Danial Parsa Negin Parya. HTML Abstraction Markup Language Doesn’t use of traditional inline...

HAMLDanial ParsaNegin Parya

WHAT IS 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.

HAML PRINCIPALS

Markup should be beautiful

Markup should be DRY

<h1>Teen Wolf</h1>

Markup should be well-indented

XHTML structure should be clear

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

INSTALL HAML

Standard Gem gem install haml

haml-edge Gem gem install haml-edge

Installation from Git git clone git://github.com/nex3/haml.git cd haml rake install

ENABLE HAML IN RAILS

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"

GETTING STARTED

app/views/account/login.html.erb → app/views/account/login.html.haml

HOW TO CONVERT?

ATTRIBUTE METHODS

def html_attrs(lang = 'en-US') {:xmlns => "http://www.w3.org/1999/xhtml",

'xml:lang' => lang, :lang => lang} endThen 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>

ELEMENT NAME: %

%one %two %three Hey there

<one> <two> <three>Hey there</three> </two> </one>

CLASS AND ID: . AND #

is compiled to:

RUNNING RUBY: -

-foo = "hello“-foo << " there" -foo << " you!" %p= foo

is compiled to:<p> hello there you! </p>

REFERENCES

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/wh

y-use-haml-and-sass-i-already-know-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/



Danial Parsa Negin Parya. HTML Abstraction Markup Language Doesn’t use of traditional inline...

Documents

Transcript of Danial Parsa Negin Parya. HTML Abstraction Markup Language Doesn’t use of traditional inline...