HAML For The Win!<br />An introduction to HAML<br />Oct. 13, 2011<br />1<br />Created for Magma Rails 2011 - www.magmarail...
What is HAML?<br />A more concise syntax for coding HTML in your Rails app<br />Uses indentation for nesting markup<br />R...
Using HAML in Rails<br />Use it as a replacement for ERB files<br />If you use Bundler, add this to your Gemfile:<br />gem...
A comparison<br />HTML<br /><body><br />  <div id=“wrapper”><br />    <div class=“stuff”><br />     <a href=“#”>Top</a><br...
Tag names<br />Use % and then the name of the tag<br />Examples:<br />Oct. 13, 2011<br />An Introduction to HAML by Jonath...
ID’s<br />ID’s are just like they are in CSS<br />#id_name<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dea...
Classes<br />Classes are also just like they are in CSS<br />.class_name<br />Oct. 13, 2011<br />An Introduction to HAML b...
div is the default tag name<br />If you want to leave out the tag name and just put classes and/or ID’s, %div is assumed<b...
ID’s and Classes together<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />9<b...
Nesting<br />Tags are nested by indentation only<br />No closing tags!<br />Oct. 13, 2011<br />An Introduction to HAML by ...
Text content<br />Text can go at the end of the line if there’s no other content to nest<br />Can also be nested itself (r...
Attributes<br />Use a Ruby style hash for attributes<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - ww...
Boolean Attributes<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />13<br />Us...
Using an array for ID’s and Classes<br />For the ID attribute it will separate the values by an _<br />For the Class attri...
HTML??<br />You can also use regular HTML<br />Converting a file over time<br />Copy/paste a tracking code or something co...
Adding Ruby code<br />Use – and = for Ruby code<br />= for when you want to output the result<br />– for when the code has...
Ruby Interpolation<br />Use #{} to interpolate Ruby code<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean ...
Filters<br />Filters start with a : and let you put in indented content to be interpreted in a special way<br />:javascrip...
Filters<br />:cssfilter wraps some CSS in <style> and CDATA tags for inline CSS<br />Oct. 13, 2011<br />An Introduction to...
Other filters<br />:plain – does not parse the content<br />:escaped – same as plain but HTML-escapes the text<br />:ruby ...
Upcoming SlideShare
Loading in...5
×

Introduction to HAML

14,984

Published on

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

No Downloads
Views
Total Views
14,984
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Introduction to HAML

  1. 1. HAML For The Win!<br />An introduction to HAML<br />Oct. 13, 2011<br />1<br />Created for Magma Rails 2011 - www.magmarails.com<br />Slides posted at http://tinyurl.com/magma-haml-sass<br />Sample code from this presentation can be found in the following sample app:<br />https://github.com/jonathandean/SASS-and-HAML-FTW<br />
  2. 2. What is HAML?<br />A more concise syntax for coding HTML in your Rails app<br />Uses indentation for nesting markup<br />Reduces code (no closing tags)<br />Fixes the messy markup problem that often clutters views<br />Uses a CSS-like syntax that is easier to read and compare to your style rules<br />Makes coding your View layer faster<br />Note: doesn’t affect render time or client-side performance, simply reduces coding efforts and makes the developer more efficient<br />Easy to learn!<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />2<br />
  3. 3. Using HAML in Rails<br />Use it as a replacement for ERB files<br />If you use Bundler, add this to your Gemfile:<br />gem "haml”<br />Files named filename.html.haml (instead of filename.html.erb) will be interpreted by HAML instead of ERB<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />3<br />
  4. 4. A comparison<br />HTML<br /><body><br /> <div id=“wrapper”><br /> <div class=“stuff”><br /> <a href=“#”>Top</a><br /> </div><br /> </div><br /></body><br />HAML<br />%body<br /> #wrapper<br /> .stuff<br /> %a{:href => “#”} Top<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />4<br />7 lines<br />78 characters<br />4 lines<br />36 characters<br />Note: Some examples compile using different formatting, I changed them for the slides for readability<br />
  5. 5. Tag names<br />Use % and then the name of the tag<br />Examples:<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />5<br />HTML<br /><body></body><br /><div></div><br />HAML<br />%body<br />%div<br />
  6. 6. ID’s<br />ID’s are just like they are in CSS<br />#id_name<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />6<br />HTML<br /><div id=“mine”></div><br /><p id=“yours”></p><br />HAML<br />%div#mine<br />%p#yours<br />
  7. 7. Classes<br />Classes are also just like they are in CSS<br />.class_name<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />7<br />HTML<br /><div class=“mine”></div><br /><p class=“yours”></p><br />HAML<br />%div.mine<br />%p.yours<br />One way for multiple classes (more later)<br />HTML<br /><div class=“mine yours”></div><br />HAML<br />%div.mine.yours<br />
  8. 8. div is the default tag name<br />If you want to leave out the tag name and just put classes and/or ID’s, %div is assumed<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />8<br />HTML<br /><div id=“mine”></div><br />HAML<br />%div#mine<br />(or just)<br />#mine<br />
  9. 9. ID’s and Classes together<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />9<br />You can put ID’s and classes together as well<br />HTML<br /><div class=“yours” id=“mine”><br /></div><br /><div class=“yours his”id=“mine”><br /></div><br />HAML<br />#mine.yours<br />#mine.yours.his<br />
  10. 10. Nesting<br />Tags are nested by indentation only<br />No closing tags!<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />10<br />HAML<br />#mine<br /> %p.yours hi!<br />HTML<br /><div id=“mine”><br /><p class=“yours”>hi!</p><br /></div><br />
  11. 11. Text content<br />Text can go at the end of the line if there’s no other content to nest<br />Can also be nested itself (required with other nested content)<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />11<br />HAML<br />#mine<br /> %p.yours hi!<br />(or)<br />#mine<br />%p.yours<br /> hi!<br />#mine<br />%p.yours<br /> hi!<br /> %span dude<br />HTML<br /><div id=“mine”><br /> <p class=“yours”>hi!</p><br /></div><br /><div id=“mine”><br /> <p class=“yours”><br /> hi! <span>dude</span><br /> </p><br /></div><br />#mine<br /> %p.yourshi!<br /> %span dude<br />
  12. 12. Attributes<br />Use a Ruby style hash for attributes<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />12<br />HTML<br /><a href=“http://hi.com”>hi</a><br /><input type=“submit”><br />HAML<br />%a{:href => ”http://hi.com”} hi<br />%input{:type => "submit”}<br />Or a more HTML-like syntax with ()<br />HAML<br />%a(href=”http://hi.com”) hi<br />%input(type="submit”)<br />HTML<br /><a href=“http://hi.com”>hi</a><br /><input type=“submit”><br />
  13. 13. Boolean Attributes<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />13<br />Use boolean values for attributes such as “selected”<br />HTML<br /><input selected><br /><input><br />HAML<br />%input{:selected => true}<br />(or)<br />%input(selected=true)<br />(or)<br />%input(selected)<br />%input{:selected => false}<br />(or)<br />%input(selected=false)<br />
  14. 14. Using an array for ID’s and Classes<br />For the ID attribute it will separate the values by an _<br />For the Class attribute it will add them as separate classes<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />14<br />HTML<br /><p class=“one two”>hi</p><br /><p id=“one_two”>hi</p><br />HAML<br />%p{:class => [‘one’,’two’]} hi<br />%p{:id=> [‘one’,’two’]} hi<br />
  15. 15. HTML??<br />You can also use regular HTML<br />Converting a file over time<br />Copy/paste a tracking code or something complicated and hard to write as HAML<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />15<br />HTML<br /><div id=“myParagraph”><br /> <p>Hello there!</p><br /></div><br />HAML<br />#myParagraph<br /> <p>Hello there!</p><br />
  16. 16. Adding Ruby code<br />Use – and = for Ruby code<br />= for when you want to output the result<br />– for when the code has no output<br />Use of this should be rare, as this type of Ruby code shouldn’t often be in the view layer<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />16<br />HTML<br /><p>hi hi hi hi hi</p><br /><p>hi</p><br /><p>hi</p><br /><p>hi</p><br /><p>hi</p><br /><p>hi</p><br />HAML<br />%p= “hi “*5<br /><ul><li>5.times do</li></ul>%p= “hi”<br />No end required<br />
  17. 17. Ruby Interpolation<br />Use #{} to interpolate Ruby code<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />17<br />HTML<br /><p>Hi Jon</p><br />HAML<br />- awesome_guy = “Jon”<br />%p Hi #{awesome_guy}<br />(same as)<br /><ul><li>awesome_guy= “Jon”</li></ul>%p= “Hi #{awesome_guy}”<br />
  18. 18. Filters<br />Filters start with a : and let you put in indented content to be interpreted in a special way<br />:javascriptfilter wraps some JavaScript in <script> and CDATA tags for inline JavaScript<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />18<br />HTML<br /><script><br />//<![CDATA[<br />alert(‘Hello there!’);<br />//]]><br /></script><br />HAML<br />:javascript<br /> alert(‘Hello there!’);<br />
  19. 19. Filters<br />:cssfilter wraps some CSS in <style> and CDATA tags for inline CSS<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />19<br />HTML<br /><style><br />/*<![CDATA[*/<br />.mine{<br /> color: red;<br /> }<br />/*]]>*/<br /></style><br />HAML<br />:css<br /> .mine{<br /> color: red;<br /> }<br />
  20. 20. Other filters<br />:plain – does not parse the content<br />:escaped – same as plain but HTML-escapes the text<br />:ruby – pass the content to the normal Ruby interpreter<br />:sass – parse the content with SASS to produce CSS output<br />and more! (see the docs)<br />You can also make custom filters if you have special needs<br />Oct. 13, 2011<br />An Introduction to HAML by Jonathan Dean - www.jonathandean.com<br />20<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×