Recommended
More Related Content
Similar to Haml
Similar to Haml (20)
Recently uploaded
Recently uploaded (20)
Haml
- 2. What is Haml? • A markup language • An alternative to erb / RHTML for Rails + Merb • rubygem or rails plugin
- 3. Haml has principles • Markup should be beautiful • Markup should be DRY • Markup should be well-indented • XHTML structure should be clear Beautiful - READABLE! DRY - in XHTML elements are named twice, ERB adds even more repetition. HAML relies on indentation to determine where elements and blocks of code begin and end-> smaller templates + cleaner code well indented - ERB doesn’t encourage well-indented code. Haml indents properly all the time XHTML structure should be clear - guaranteed by the first 3
- 4. Syntax %tag content <tag>content</tag> The percent character is placed at the beginning of a line. It’s followed immediately by the name of an element, then the text to be rendered inside the element
- 5. Syntax <h1>Haml should be</h1> %h1 Haml should be <ul> %ul <li>Beautiful</li> %li Beautiful <li>DRY</li> %li DRY <li>Well-indented</li> %li Well-indented </ul> nesting is achieved through indentation
- 6. Attributes <p class='bio'> %p{:class => quot;bioquot;} This paragraph has class This paragraph has class </p> <p id='bio'> %p{:id => quot;bioquot;} This paragraph has identity This paragraph has identity </p> A Ruby hash is used for specifying the attributes of an element. It is literally evaluated as a Ruby hash, so logic will work in it and local variables may be used A Ruby method call that returns a hash can be substituted for the hash contents multiple hashes, separated by commas can be used
- 7. class and id shortcuts <p class='bio'> %p.bio This paragraph has class This paragraph has class </p> <p id='bio'> %p#bio This paragraph has identity This paragraph has identity </p> borrowed from CSS
- 8. Implicit <div> <div class='class'> <div id='id'> .class <p> #id I'm wrapped in two divs %p </p> I'm wrapped in two divs </div> </div> If you only define a class and/or id using the . or # syntax, a div element is automatically used
- 9. Haml -vs- HTML !!! <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 %html{ html_attrs } Transitional//ENquot; quot;http://www.w3.org/TR/ %head xhtml1/DTD/xhtml1-transitional.dtdquot;> %title Haml syntax demo <html lang='en-US' xml:lang='en-US' %body xmlns='http://www.w3.org/1999/xhtml'> #content <head> %h1 Haml should be: <title>Haml syntax demo</title> %ul.principles </head> %li Beautiful <body> %li DRY <div id='content'> %li Well-indented <h1>Haml should be:</h1> %li Clearly XHTML <ul class='principles'> #footer <li>Beautiful</li> %span.author Ciaran <li>DRY</li> <li>Well-indented</li> <li>Clearly XHTML</li> </ul> </div> <div id='footer'> <span class='author'>Ciaran</span> </div> </body> </html> !!! generates doctype !!! XML generates XML prolog html_attrs is a Haml Helper, Returns a hash containing default assignments for the xmlns and xml:lang attributes of the html HTML element
- 10. Ruby evaluators - for article in @articles .post .date %h3= h article.publication_date.strftime(quot;%d %m %Yquot;) .article %h3= link_to(h(article.title), article) ~article.body = is followed by Ruby code, which is evaluated and the output inserted into the document as plain text - hyphen character makes the text following it into quot;silent scriptquot;: Ruby script that is evaluated, but not output for loop (+ all Ruby blocks) are automatically closed, based on indentation ~ acts like = except that it preserves the whitespace
- 11. Haml in rails projects rails 2.0 uses $view.html.erb , for haml views just replace erb with haml
- 13. SASS • Syntactically Awesome StyleSheets • comes with haml
- 14. SASS syntax #main p #main p { :color #00ff00 color: #00ff00; :width 97% width: 97%; } #main p .redbox { .redbox background-color: #ff0000; :background-color #ff0000 color: #000000; } :color #000000 Rules can also be nested within each other. This signifies that the inner rule’s selector is a child of the outer selector
- 15. SASS Constants !main_color = #00ff00 #main { #main color: #00ff00; } :color = !main_color #main p { :p background-color: #00ff00; :background-color = !main_color color: #000000; } :color #000000 support for setting document-wide constants. They‘re set using an exclamation mark followed by the name, an equals sign, and the value
- 16. make_resourceful • rails plugin • DRYs up controller code • http://railscasts.com/episodes/92 Show some code, it’s cool, but depending on how much customisation you do it might be better to use the standard RESTful controller