Haml
                     XHTML Abstraction Markup Language

“Any sufficiently complicated rhtml partial contains an
ad hoc...
What is Haml?
• Haml is based on one primary principal.
  Markup should be beautiful.
• ...it was created for use in highl...
Recreating Haml
• Original HTML document
     <div class=quot;productquot;>
       <div class=quot;namequot;>
         Foo...
Recreating Haml
• RHTML version of the page
  <div class=quot;productquot;>
    <div class=quot;namequot;>
      <%= produ...
Recreating Haml
• Dropping closing tags and block “end”
  <div class=quot;productquot;>
    <div class=quot;namequot;>
   ...
Recreating Haml
• Removing <> Brackets
 div class=quot;productquot;
   div class=quot;namequot;
     = product.name
   div...
Recreating Haml
• CSS shortcuts
 div.product
   div.name
     = product.name
   div.price
     = number_to_currency produc...
Recreating Haml
• Drop the div tags (this is valid Haml)
  .product
    .name
      = product.name
    .price
      = numb...
Comparison
<div class=quot;productquot;>                                             .product
  <div class=quot;namequot;>...
Haml Features
•   Whitespace active

•   Well-formatted markup

•   DRY

•   Follows CSS conventions

•   Integrates with ...
Using Haml

•   Haml 1.8.0 was released on January 6, 2008
    •   gem install haml

    •   haml --rails path/to/app

   ...
Using Haml
• XML tags are specified with a %tagname
              %one
                %two
                   %three Hello...
Using Haml
 •     Brackets {} represent a Ruby hash that is used for
       specifying the attributes of an element.

%hea...
Using Haml
•   Square brackets [] use the dom_id and
    dom_class methods to tag the element.
                       %div...
Using Haml
•   . and # assign classes and ids, respectively.

          %div#things
            %span#rice Chicken Fried
 ...
Using Haml
•   = is a shortcut for inserting Ruby code into an
    element.
                  #hello_1= quot;<span>Hello</...
Using Haml
•   - designates a Ruby block that should not be outputted.
    (notice no need for end)
              - (12......
Sass
                  Syntactically Awesome StyleSheets



• Basically just another way of writing CSS.
• Like Haml, it i...
Using Sass
• Basic example of nested rules
#main p                      #main p {
  :color #0f0                  color: #0...
Using Sass
• Simple Sass can equal complex CSS
  #main                     #main {
    :width 97%                width: 97...
Using Sass
    • Constants and simple arithmetic
!bg_color   = #0f0                     #container {
!main_width = 700px  ...
Using Sass
• Advanced Sass with parent selectors
                                   a{
a
                                 ...
Performance


              Haml 1.7.2
              ERB
Performance


              Haml
              ERB
              Erubis
              Markaby
Performance


              Haml
              ERB
              Erubis
Haml in the Wild

•   MyStock mystock.com
    •   Rails 2 with Haml trunk


•   Grand Harmony Spa grandharmonyspa.com
    ...
Upcoming SlideShare
Loading in …5
×

Atlanta Ruby Users Group (AtlRug) - January 2008 - Haml and Sass

4,478 views

Published on

Presentation by Andrew Bennett on Haml and Sass at the Atlanta Ruby Users Group on January 9, 2008 (http://ruby.meetup.com/83/calendar/6903097/).

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,478
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
60
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Atlanta Ruby Users Group (AtlRug) - January 2008 - Haml and Sass

  1. Haml XHTML Abstraction Markup Language “Any sufficiently complicated rhtml partial contains an ad hoc, informally-specified, bug-ridden, implementation of half of Haml.” Dan Grigsby of railspikes.com http://scribd.com/doc/978532
  2. What is Haml? • Haml is based on one primary principal. Markup should be beautiful. • ...it was created for use in highly productive environments. The beauty makes you faster. • Stop using the slow, repetitive, and annoying templates that you don’t even know how much you hate yet.
  3. Recreating Haml • Original HTML document <div class=quot;productquot;> <div class=quot;namequot;> Foo </div> <div class=quot;pricequot;> $100.00 </div> <div class=quot;updated_atquot;> 9 Jan 15:13 </div> <div class=quot;actionsquot;> <a href=quot;/products/foo/purchases/newquot;>buy</a> </div> </div>
  4. Recreating Haml • RHTML version of the page <div class=quot;productquot;> <div class=quot;namequot;> <%= product.name %> </div> <div class=quot;pricequot;> <%= number_to_currency product.price %> </div> <div class=quot;updated_atquot;> <%= product.to_s(:short) %> </div> <div class=quot;actionsquot;> <%= link_to 'buy', new_purchase_product_url(product) %> <% if product.owners.find_by_user_id(session[:user_id]) -%> <%= link_to 'sell', new_sale_product_url(product) %> <% end -%> </div> </div>
  5. Recreating Haml • Dropping closing tags and block “end” <div class=quot;productquot;> <div class=quot;namequot;> <%= product.name %> <div class=quot;pricequot;> <%= number_to_currency product.price %> <div class=quot;updated_atquot;> <%= product.to_s(:short) %> <div class=quot;actionsquot;> <%= link_to 'buy', new_purchase_product_url(product) %> <% if product.owners.find_by_user_id(session[:user_id]) -%> <%= link_to 'sell', new_sale_product_url(product) %>
  6. Recreating Haml • Removing <> Brackets div class=quot;productquot; div class=quot;namequot; = product.name div class=quot;pricequot; = number_to_currency product.price div class=quot;updated_atquot; = product.to_s(:short) div class=quot;actionsquot; = link_to 'buy', new_purchase_product_url(product) - if product.owners.find_by_user_id(session[:user_id]) = link_to 'sell', new_sale_product_url(product)
  7. Recreating Haml • CSS shortcuts div.product div.name = product.name div.price = number_to_currency product.price div.updated_at = product.to_s(:short) div.actions = link_to 'buy', new_purchase_product_url(product) - if product.owners.find_by_user_id(session[:user_id]) = link_to 'sell', new_sale_product_url(product)
  8. Recreating Haml • Drop the div tags (this is valid Haml) .product .name = product.name .price = number_to_currency product.price .updated_at = product.to_s(:short) .actions = link_to 'buy', new_purchase_product_url(product) - if product.owners.find_by_user_id(session[:user_id]) = link_to 'sell', new_sale_product_url(product)
  9. Comparison <div class=quot;productquot;> .product <div class=quot;namequot;> .name <%= product.name %> = product.name </div> .price <div class=quot;pricequot;> = number_to_currency product.price <%= number_to_currency product.price %> .updated_at </div> = product.to_s(:short) <div class=quot;updated_atquot;> .actions <%= product.to_s(:short) %> = link_to 'buy', new_purchase_product_url(product) </div> - if product.owners.find_by_user_id(session[:user_id]) <div class=quot;actionsquot;> = link_to 'sell', new_sale_product_url(product) <%= link_to 'buy', new_purchase_product_url(product) %> <% if product.owners.find_by_user_id(session[:user_id]) -%> Alternative syntax: <%= link_to 'sell', new_sale_product_url(product) %> <% end -%> .product </div> .name= product.name </div> .price= number_to_currency product.price .updated_at= product.to_s(:short) .actions = link_to 'buy', new_purchase_product_url(product) - if product.owners.find_by_user_id(session[:user_id]) = link_to 'sell', new_sale_product_url(product)
  10. Haml Features • Whitespace active • Well-formatted markup • DRY • Follows CSS conventions • Integrates with Ruby code • Implements Rails templates with the .haml extension
  11. Using Haml • Haml 1.8.0 was released on January 6, 2008 • gem install haml • haml --rails path/to/app • echo '.message Hello, World' | haml # => “<div class='message'>Hello, World</div>”
  12. Using Haml • XML tags are specified with a %tagname %one %two %three Hello, World <one> <two> <three>Hello, World</three> </two> </one>
  13. Using Haml • Brackets {} represent a Ruby hash that is used for specifying the attributes of an element. %head{ :name => 'document_head' } %script{ 'type' => quot;text/quot; + quot;javascriptquot;, :src => quot;javascripts/script_#{2 + 7}.jsquot; } <head name='document_head'> <script src='javascripts/script_9.js' type='text/javascript'></script> </head>
  14. Using Haml • Square brackets [] use the dom_id and dom_class methods to tag the element. %div[@user] %div[290] Hello! <div class='user' id='user_15'> <div class='fixnum' id='fixnum_581'>Hello!</div> </div>
  15. Using Haml • . and # assign classes and ids, respectively. %div#things %span#rice Chicken Fried %p.beans{ :food => 'true' } The magical fruit %h1.class.otherclass#id La La La <div id='things'> <span id='rice'>Chicken Fried</span> <p class='beans' food='true'>The magical fruit</p> <h1 class='class otherclass' id='id'>La La La</h1> </div>
  16. Using Haml • = is a shortcut for inserting Ruby code into an element. #hello_1= quot;<span>Hello</span>quot; #hello_2=h quot;<span>Hello</span>quot; <div id='hello_1'><span>Hello</span></div> <div id='hello_2'>&lt;span&gt;Hello&lt;/span&gt;</div>
  17. Using Haml • - designates a Ruby block that should not be outputted. (notice no need for end) - (12...14).each do |i| %p= i %p See, I can count! %p.array - if [].blank? %span.blank The array was blank. - else %span.notblank The array was not blank. <p>12</p> <p>13</p> <p>See, I can count!</p> <p class='array'> <span class='blank'>The array was blank.</span> </p>
  18. Sass Syntactically Awesome StyleSheets • Basically just another way of writing CSS. • Like Haml, it is designed to be very DRY and help you write CSS faster. • Supports nested selectors, constants, and simple arithmetic.
  19. Using Sass • Basic example of nested rules #main p #main p { :color #0f0 color: #0f0; :width 97% width: 97%; } .redbox #main p .redbox { :background-color #f00 background-color: #f00; :color #000 color: #000; }
  20. Using Sass • Simple Sass can equal complex CSS #main #main { :width 97% width: 97%; } p, div #main p, #main div { :font-size 2em font-size: 2em; } a #main p a, #main div a { :font-weight bold font-weight: bold; } pre #main pre { :font-size 3em font-size: 3em; }
  21. Using Sass • Constants and simple arithmetic !bg_color = #0f0 #container { !main_width = 700px width: 800px; } !side_width = 100px #container #main { background-color: #00ff00; #container color: #20ff20; :width = !main_width + !side_width width: 700px; } #main #container #side { :background-color = !bg_color width: 100px; } :color = !bg_color + 32 :width = !main_width #side :width = !side_width
  22. Using Sass • Advanced Sass with parent selectors a{ a color: #00f; } :color #00f a.disabled { &.disabled color: #999 !important; } :color #999 !important a:link, a:active, a:visited { &:link, &:active, &:visited text-decoration: none; } :text-decoration none a:link span.hidden, a:active span.hidden span.hidden, a:visited span.hidden { :display none display: none; } &:visited a:visited { :color #00c color: #00c; } &:hover a:hover { :text-decoration underline text-decoration: underline; }
  23. Performance Haml 1.7.2 ERB
  24. Performance Haml ERB Erubis Markaby
  25. Performance Haml ERB Erubis
  26. Haml in the Wild • MyStock mystock.com • Rails 2 with Haml trunk • Grand Harmony Spa grandharmonyspa.com or 029a630.netsolhost.com (until DNS fixed) • Generated with StaticMatic using Haml 1.7.2

×