Haml
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
2 Favorites & 1 Group
-
zooshej
favorited this 3 months ago
-
nicck.olay
favorited this 9 months ago
-
ciaran.lee added this to the group RubyIreland
Haml - Presentation Transcript
- Haml http://haml.hamptoncatlin.com/
- What is Haml? • A markup language • An alternative to erb / RHTML for Rails + Merb • rubygem or rails plugin
- Haml has principles • Markup should be beautiful • Markup should be DRY • Markup should be well-indented • XHTML structure should be clear Beautiful - READABLE! DRY - in XHTML elements are named twice, ERB adds even more repetition. HAML relies on indentation to determine where elements and blocks of code begin and end-> smaller templates + cleaner code well indented - ERB doesn’t encourage well-indented code. Haml indents properly all the time XHTML structure should be clear - guaranteed by the first 3
- Syntax %tag content <tag>content</tag> The percent character is placed at the beginning of a line. It’s followed immediately by the name of an element, then the text to be rendered inside the element
- Syntax <h1>Haml should be</h1> %h1 Haml should be <ul> %ul <li>Beautiful</li> %li Beautiful <li>DRY</li> %li DRY <li>Well-indented</li> %li Well-indented </ul> nesting is achieved through indentation
- Attributes <p class='bio'> %p{:class => \"bio\"} This paragraph has class This paragraph has class </p> <p id='bio'> %p{:id => \"bio\"} This paragraph has identity This paragraph has identity </p> A Ruby hash is used for specifying the attributes of an element. It is literally evaluated as a Ruby hash, so logic will work in it and local variables may be used A Ruby method call that returns a hash can be substituted for the hash contents multiple hashes, separated by commas can be used
- class and id shortcuts <p class='bio'> %p.bio This paragraph has class This paragraph has class </p> <p id='bio'> %p#bio This paragraph has identity This paragraph has identity </p> borrowed from CSS
- Implicit <div> <div class='class'> <div id='id'> .class <p> #id I'm wrapped in two divs %p </p> I'm wrapped in two divs </div> </div> If you only define a class and/or id using the . or # syntax, a div element is automatically used
- Haml -vs- HTML !!! <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 %html{ html_attrs } Transitional//EN\" \"http://www.w3.org/TR/ %head xhtml1/DTD/xhtml1-transitional.dtd\"> %title Haml syntax demo <html lang='en-US' xml:lang='en-US' %body xmlns='http://www.w3.org/1999/xhtml'> #content <head> %h1 Haml should be: <title>Haml syntax demo</title> %ul.principles </head> %li Beautiful <body> %li DRY <div id='content'> %li Well-indented <h1>Haml should be:</h1> %li Clearly XHTML <ul class='principles'> #footer <li>Beautiful</li> %span.author Ciaran <li>DRY</li> <li>Well-indented</li> <li>Clearly XHTML</li> </ul> </div> <div id='footer'> <span class='author'>Ciaran</span> </div> </body> </html> !!! generates doctype !!! XML generates XML prolog html_attrs is a Haml Helper, Returns a hash containing default assignments for the xmlns and xml:lang attributes of the html HTML element
- Ruby evaluators - for article in @articles .post .date %h3= h article.publication_date.strftime(\"%d %m %Y\") .article %h3= link_to(h(article.title), article) ~article.body = is followed by Ruby code, which is evaluated and the output inserted into the document as plain text - hyphen character makes the text following it into \"silent script\": Ruby script that is evaluated, but not output for loop (+ all Ruby blocks) are automatically closed, based on indentation ~ acts like = except that it preserves the whitespace
- Haml in rails projects rails 2.0 uses $view.html.erb , for haml views just replace erb with haml
- Resources • http://haml.hamptoncatlin.com • http://lab.hamptoncatlin.com/play/with/haml
- SASS • Syntactically Awesome StyleSheets • comes with haml
- SASS syntax #main p #main p { :color #00ff00 color: #00ff00; :width 97% width: 97%; } #main p .redbox { .redbox background-color: #ff0000; :background-color #ff0000 color: #000000; } :color #000000 Rules can also be nested within each other. This signifies that the inner rule’s selector is a child of the outer selector
- SASS Constants !main_color = #00ff00 #main { #main color: #00ff00; } :color = !main_color #main p { :p background-color: #00ff00; :background-color = !main_color color: #000000; } :color #000000 support for setting document-wide constants. They‘re set using an exclamation mark followed by the name, an equals sign, and the value
- make_resourceful • rails plugin • DRYs up controller code • http://railscasts.com/episodes/92 Show some code, it’s cool, but depending on how much customisation you do it might be better to use the standard RESTful controller
+
2035 views, 2 favs, more stats
Short presentation I did for the Ruby Ireland Group more
More info about this document
© All Rights Reserved
Go to text version
- Total Views 2035
- 2035 on SlideShare
- Comments 0
- Favorites 2
- Downloads 45
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Adobe PDF
0 comments
Post a comment