1 / 13

HAML

Danial Parsa Negin Parya. HAML. HTML Abstraction Markup Language Doesn’t use of traditional inline coding. Makes markup as elegant as it can be. Haml's equivalent for CSS is Sass. What is HAML?. Markup should be beautiful Markup should be DRY <h1>Teen Wolf</h1 >

cormac
Download Presentation

HAML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DanialParsa NeginParya HAML

  2. HTML Abstraction Markup Language Doesn’t use of traditional inline coding. Makes markup as elegant as it can be. Haml's equivalent for CSS is Sass. What is HAML?

  3. Markup should be beautiful • Markup should be DRY • <h1>Teen Wolf</h1> • Markup should be well-indented • XHTML structure should be clear Haml principals

  4. Why use haml? • <% if @users.empty? %>  <div class="empty_collection">    <em>Could not find any users.</em>  </div><% else %>  <table class="users_list">    <thead>      <tr>        <th>Name</th>        <th>Email</th>        <th>Age</th>      </tr>    </thead>    <tbody>      <% @users.each do |user| %>        <tr class="<%= cycle('odd','even') %>">          <td><%= user.name %></td>          <td><%= user.email %></td>          <td><%= user.age %></td>        </tr>      <% end %>    </tbody>  </table><% end %> • if @users.empty?  .empty_collection    %em Could not find any users- else  %table.users_list    %thead      %tr        %th Name        %th Email        %th Age    %tbody      - @users.each do |user|        %tr{:class => cycle('odd','even')}          %td= user.name          %td= user.email          %td= user.age

  5. Standard Gem • gem install haml • haml-edge Gem • gem install haml-edge • Installation from Git • git clone git://github.com/nex3/haml.git • cdhaml • rake install Install haml

  6. before Rails 3, add the following line to environment.rb: config.gem "haml“ For Rails 3 add the following line to the Gemfile: gem "haml" Enable haml in rails

  7. app/views/account/login.html.erb→ app/views/account/login.html.haml Getting started

  8. How to convert?

  9. Attribute Methods def html_attrs(lang = 'en-US') {:xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang} end Then it can be used like: %html{html_attrs('fr-fr')} <html lang='fr-fr' xml:lang='fr-fr' xmlns='http://www.w3.org/1999/xhtml'> </html>

  10. Element Name: % %one %two %three Hey there <one> <two> <three>Hey there</three> </two> </one>

  11. Class and ID: . and # is compiled to:

  12. Running Ruby: - -foo = "hello“ -foo << " there" -foo << " you!" %p= foo is compiled to: <p> hello there you! </p>

  13. http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html http://haml-lang.com/ http://en.wikipedia.org/wiki/Haml http://blog.digimonkey.com/2010/02/why-use-haml-and-sass-i-already-know-html/ References

More Related