Ruby on Rails 101 - Presentation Slide...
145372 views
Ruby on Rails Security
16040 views
Ruby On Rails Einführung
9549 views
What's new in Rails 2?
15371 views
Introduction to Active Record - Silico...
23582 views
MVC Demystified: Essence of Ruby on Ra...
6666 views
Ruby on Rails: Building Web Applicatio...
8241 views
Ruby on Rails 中級者を目指して...
5095 views
More Info
on Slideshare: 746
from embeds: 0
Slideshow transcript
Slide 1: Haml http://haml.hamptoncatlin.com/
Slide 2: What is Haml? • A markup language • An alternative to erb / RHTML for Rails + Merb • rubygem or rails plugin
Slide 3: 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
Slide 4: 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
Slide 5: 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
Slide 6: 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
Slide 7: 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
Slide 8: 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
Slide 9: 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
Slide 10: 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
Slide 11: Haml in rails projects rails 2.0 uses $view.html.erb , for haml views just replace erb with haml
Slide 12: Resources • http://haml.hamptoncatlin.com • http://lab.hamptoncatlin.com/play/with/haml
Slide 13: SASS • Syntactically Awesome StyleSheets • comes with haml
Slide 14: 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
Slide 15: 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
Slide 16: 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
Add a comment on Slide 1
If you have a SlideShare account, login to comment; else you can comment as a guest- Favorites & Groups
Showing 1-50 of 1 (more)