Your SlideShare is downloading. ×
Haml
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

Haml

5,092
views

Published on

Short presentation I did for the Ruby Ireland Group

Short presentation I did for the Ruby Ireland Group

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,092
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Haml http://haml.hamptoncatlin.com/
  • 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
  • 12. Resources • http://haml.hamptoncatlin.com • http://lab.hamptoncatlin.com/play/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