Haml
•
5 likes•2,307 views
This document discusses Haml, a markup language that is an alternative to ERB for use in Ruby on Rails and Merb applications. Haml aims to produce beautiful, DRY, well-indented markup that clearly shows the XHTML structure. It uses indentation rather than tags to denote nesting and supports shortcuts for classes, IDs, and implicit divs. The document also briefly introduces Sass, a stylesheet language that comes with Haml, and make_resourceful, a Rails plugin for DRYing up controller code.
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