Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply



Published on

Short presentation I did for the Ruby Ireland Group

Short presentation I did for the Ruby Ireland Group

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 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'> 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; %head xhtml1/DTD/xhtml1-transitional.dtdquot;> %title Haml syntax demo <html lang='en-US' xml:lang='en-US' %body xmlns=''> #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> 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
  • 12. Resources • •
  • 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 • Show some code, it’s cool, but depending on how much customisation you do it might be better to use the standard RESTful controller