HAML example

I wanted find out for myself what the reported HAML goodness is all about, so I spent a little time to educate myself on the basics, and then I took to converting one of my Rails erb files over to HAML. I’m posting the before and after results here as HAML examples to give one more convincing example of how much easier it is to read and write HAML views than the more noisy erb you-must-close-every-tag format.
At the end of this article, I list a few links to resources I found useful as I was getting started with HAML in my Rails application development.

Before (erb):

&lt;div class="page-heading"&gt;
 &lt;h1&gt;Quote: &lt;%= @quote.formatted_id &gt;&lt;/h1&gt;
&lt;/div&gt;

&lt;= render 'form' &gt;

&lt;div id="tabs"&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="#devices-tab"&gt;Devices&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#options-tab"&gt;System Options&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#reports-tab"&gt;Reports&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#notes-tab"&gt;Notes&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

&lt;div id="devices-tab"&gt; Devices Page&lt;/div&gt;

&lt;div id="options-tab"&gt; Options Page&lt;/div&gt;

&lt;div id="reports-tab"&gt; Reports Page&lt;/div&gt;

&lt;div id="notes-tab"&gt; Notes Page&lt;/div&gt;

&lt;script type="text/javascript"&gt;
 $(document).ready(function() {
 $( "#tabs" ).tabs();
 });
&lt;/script&gt;

<h1>Quote: <%= @quote.formatted_id ></h1>

</div>

<= render 'form' >

<ul>

<li><a href="#devices-tab">Devices</a></li>

<li><a href="#options-tab">System Options</a></li>

<li><a href="#reports-tab">Reports</a></li>

<li><a href="#notes-tab">Notes</a></li>

</ul>

</div>

<div id="devices-tab"> Devices Page</div>

<div id="options-tab"> Options Page</div>

<div id="reports-tab"> Reports Page</div>

<div id="notes-tab"> Notes Page</div>

$(document).ready(function() {

$( "#tabs" ).tabs();

});

</script>

After (HAML):

.page-heading
  %h1 Quote #{@quote.formatted_id}

= render 'form'

#tabs
  %ul
    %li
      %a{:href =&gt; "#devices-tab"}Devices
    %li
     %a{:href =&gt; "#options-tab"}System Options
    %li
      %a{:href =&gt; "#reports-tab"}Reports
    %li
      %a{:href =&gt; "#notes-tab"}Notes

#devices-tab
  Devices Page

#options-tab
  Options Page

#reports-tab
  Reports Page

#notes-tab
  Notes Page

:javascript
  $(document).ready(function() {
  $( "#tabs" ).tabs();
  });

.page-heading

%h1 Quote #{@quote.formatted_id}

= render 'form'

#tabs

%ul

%li

%a{:href => "#devices-tab"}Devices

%li

%a{:href => "#options-tab"}System Options

%li

%a{:href => "#reports-tab"}Reports

%li

%a{:href => "#notes-tab"}Notes

#devices-tab

Devices Page

#options-tab

Options Page

#reports-tab

Reports Page

#notes-tab

Notes Page

:javascript

$(document).ready(function() {

$( "#tabs" ).tabs();

});

HAML Videos

A video on HAML by Jason McCay from BarCamp Birmingham 2008-04-12

A HAML video from John Schult at merb day Atlanta 2008-12-06

HAML and SASS video (2007-11-20) – http://www.podcast.tv/video-episodes/episode-038-haml-and-sass-in-15-minutes-5214343.html

HAML and SASS video on Doctype video podcast Episode 38

3 thoughts on “HAML example”

Anonymous says:

November 16, 2010 at 12:40 pm

Hey Matt,

Nice article.

You may also want to add http://html2haml.heroku.com to you reference list it is a way to convert erb to haml via the web.

suku says:

August 23, 2013 at 1:16 am

can i get an example of the simple project using haml and sass?

1. admin says:
  
  September 11, 2013 at 3:54 pm
  
  Sorry, I cannot share the code.

Matt Slay, PhC

Before (erb):

After (HAML):

More HAML examples and links

HAML Videos

3 thoughts on “HAML example”

Leave a Reply Cancel reply

Doctor of Code