Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HAML in 5 minutes     Cameron Hill
markup should be beautiful
HTML:<div id="article">  <h2>OxiClean tackles household stains</h2>  <span class="author">Billy Mays</span>  <p>It boosts ...
Four Simple Rules•   %tag creates a <tag></tag> element•   HTML attributes as Ruby hashes•   CSS selector shortcuts & impl...
%tag creates a <tag></tag> element%div Some content         <div>Some content</div>%h2 Breaking News         <h2>Breaking ...
HTML attributes as hashes%a{ :href => “/article/4”, :target=> “_blank” } Read more<a href=“/article/4” target=“_blank”>Rea...
CSS id and class shortcuts%h2#title Rails in Action<h2 id=“title”>Rails in Action</h2>%span.author Steve Klabnik<span clas...
Implicit DIV tags#content This is my content<div id="content">This is my content</div>.article This is my content<div clas...
Nested elements: Indentation mattersHAML:%ul  %li Mayonnaise  %li Mustard  %li    %a{ :href => “ketchup.com” } KetchupHTML...
Evaluating Ruby with HAML
= evaluates a Ruby expression (like <%= %>)ERB:<h2><%= @ticket.title %></h2>HAML:%h2= @ticket.titleERB:<span>Created by <%...
Blocks in HAML        -or-Death to <% end %>
- Indicates a conditional or blockERB:<% if @ticket.comments.exists? %>  <%= render @ticket.comments.select(&:persisted?) ...
ERB:<% @ticket.assets.each do |asset| %>  <p>     <%= link_to File.basename(asset.file_name), asset.url %>  </p><% end %>H...
I’m sold!How do I use it in Rails?
gem “haml”
http://haml.info
Thanks!    cameronhill.netgithub.com/cameronbot     @cameronbot
Upcoming SlideShare
Loading in …5
×

6

Share

Download to read offline

Haml in 5 minutes

Download to read offline

Quick overview of HAML for templating views in Ruby on Rails.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Haml in 5 minutes

  1. 1. HAML in 5 minutes Cameron Hill
  2. 2. markup should be beautiful
  3. 3. HTML:<div id="article"> <h2>OxiClean tackles household stains</h2> <span class="author">Billy Mays</span> <p>It boosts your detergent power</p> <a href="oxiclean.com">Read more</a></div>HAML:#article %h2 OxiClean tackles household stains %span.author Billy Mays %p It boots your detergent power %a{:href => "oxiclean.com"} Read more
  4. 4. Four Simple Rules• %tag creates a <tag></tag> element• HTML attributes as Ruby hashes• CSS selector shortcuts & implicit divs• Nested elements: Indentation matters
  5. 5. %tag creates a <tag></tag> element%div Some content <div>Some content</div>%h2 Breaking News <h2>Breaking News</h2>%br <br/>%widget <widget></widget>
  6. 6. HTML attributes as hashes%a{ :href => “/article/4”, :target=> “_blank” } Read more<a href=“/article/4” target=“_blank”>Read more</a>%ul{ :id => "projects", :class => "secondary" }<ul id=“projects” class=“secondary”></ul>
  7. 7. CSS id and class shortcuts%h2#title Rails in Action<h2 id=“title”>Rails in Action</h2>%span.author Steve Klabnik<span class="author">Steve Klabnik</span>
  8. 8. Implicit DIV tags#content This is my content<div id="content">This is my content</div>.article This is my content<div class=”article">This is my content</div>
  9. 9. Nested elements: Indentation mattersHAML:%ul %li Mayonnaise %li Mustard %li %a{ :href => “ketchup.com” } KetchupHTML:<ul> <li>Mayonnaise</li> <li>Mustard</li> <li><a href=“ketchup.com”>Ketchup</a></li>
  10. 10. Evaluating Ruby with HAML
  11. 11. = evaluates a Ruby expression (like <%= %>)ERB:<h2><%= @ticket.title %></h2>HAML:%h2= @ticket.titleERB:<span>Created by <%= @ticket.user.email %></span>HAML:%span= “Created by #{@ticket.user.email}”%span Created by #{@ticket.user.email}
  12. 12. Blocks in HAML -or-Death to <% end %>
  13. 13. - Indicates a conditional or blockERB:<% if @ticket.comments.exists? %> <%= render @ticket.comments.select(&:persisted?) %><% else %> <p>There are no comments for this ticket.</p><% end %>HAML:- if @ticket.comments.exists? = render @ticket.comments.select(&:persisted?)- else %p There are no comments for this ticket.
  14. 14. ERB:<% @ticket.assets.each do |asset| %> <p> <%= link_to File.basename(asset.file_name), asset.url %> </p><% end %>HAML:- @ticket.assets.each do |asset| %p= link_to File.basename(asset.file_name), asset.url
  15. 15. I’m sold!How do I use it in Rails?
  16. 16. gem “haml”
  17. 17. http://haml.info
  18. 18. Thanks! cameronhill.netgithub.com/cameronbot @cameronbot
  • theprodigal

    Aug. 1, 2017
  • WingtonBrito

    Jul. 1, 2016
  • hangama

    Mar. 10, 2015
  • dop3

    Jan. 25, 2015
  • RickLiu8

    Sep. 17, 2014
  • mkyriacou

    Nov. 26, 2013

Quick overview of HAML for templating views in Ruby on Rails.

Views

Total views

8,739

On Slideshare

0

From embeds

0

Number of embeds

81

Actions

Downloads

26

Shares

0

Comments

0

Likes

6

×