Your SlideShare is downloading. ×
Introduction to HAML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to HAML

13,582
views

Published on


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

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