diff options
| author | Simon Neveu <simon@hoverstud.io> | 2014-10-08 23:18:30 +0100 |
|---|---|---|
| committer | Simon Neveu <simon@hoverstud.io> | 2014-10-08 23:18:30 +0100 |
| commit | 269d717224db16057d8c0f20084df533d8dc45dd (patch) | |
| tree | 646ca255faa6ae255143b4617e235e7f8abd10c4 /haml.html.markdown | |
| parent | 645233dce9b4d97f1958dbb08b18551b9bfe906d (diff) | |
added comments, tags, classes, and attributes
Diffstat (limited to 'haml.html.markdown')
| -rw-r--r-- | haml.html.markdown | 64 |
1 files changed, 63 insertions, 1 deletions
diff --git a/haml.html.markdown b/haml.html.markdown index cde76eee..124f160b 100644 --- a/haml.html.markdown +++ b/haml.html.markdown @@ -5,4 +5,66 @@ contributors: - ["Simon Neveu", "https://github.com/sneveu"] --- -HAML is a
\ No newline at end of file +Haml is a markup language predominantly used with Ruby that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. It encourages well-written markup. + +Haml aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is markup that is well-structured, DRY, logical, and easier to read. + +```haml +/ ------------------------------------------- +/ Comments +/ ------------------------------------------- + +/ This is what a comment looks like haml + +/ + To write a multi line comment, indent your commented code to be + wrapped by the forward slash + +-# This is a silent comment, which means it wont be rendered into the doc at all + + +/ ------------------------------------------- +/ Html elements +/ ------------------------------------------- + +/ To write your tags, use the percent sign followed by the name of the tag +%body + %header + %nav + +/ Notice no closing tags. The above code would output + + <body> + <header> + <nav></nav> + </header> + </body> + +/ Divs are the default elements so they can be written simply like this +.foo + +/ To add content to a tag, nest it +%h1 Headline copy + +/ + To output a ruby value as the contents of the tag, use an equals sign followed + by the ruby code + +%h1= author.name + +/ Classes can be added to your tags either by chaining .classnames to the tag +%div.foo.bar + +/ or as part of a ruby hash +%div{:class => 'foo bar'} + +/ Attributes for any tag can be added in the hash +%a{:href => '#', :class => 'bar', :title => 'Bar'} + +/ For boolean attributes assign the value 'true' +%input{:selected => true} + +/ To write data-attributes, use the :data key with it's value as another hash +%div{:data => {:attribute => 'foo'}} + + |