Haml And Sass In 15 Minutes

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.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    12 Favorites & 1 Group

    Haml And Sass In 15 Minutes - Presentation Transcript

    1. Patrick Crowley the.railsi.st
    2. Haml & Sass in 15 minutes
    3. What are Haml and Sass?
    4. • Template languages
    5. •Template languages • Haml generates .html
    6. •Template languages • Haml generates .html • Sass generates .css
    7. •Template languages • Haml generates .html • Sass generates .css • You can use one or both
    8. Do I have to learn another markup language?
    9. Yes, you do. Get over it.
    10. “Haml is poetry.” Max Muermann
    11. The principles of Haml...
    12. • Markup should be beautiful
    13. •Markup should be beautiful • Markup should be DRY
    14. •Markup should be beautiful • Markup should be DRY • Markup should be indented
    15. •Markup should be beautiful • Markup should be DRY • Markup should be indented • Structure should be clear
    16. The Basics
    17. • White space active
    18. •White space active • Indentation = structure
    19. •White space active • Indentation = structure • Tags begin with %
    20. •White space active • Indentation = structure • Tags begin with % • Tags close themselves
    21. •White space active • Indentation = structure • Tags begin with % • Tags close themselves • Use hashes for attributes
    22. <h1>Haml is cool</h1>
    23. %h1 Haml is cool
    24. <h1>Haml is cool, Lisa</h1>
    25. <h1>Haml is cool, <%= @name %></h1>
    26. %h1 = \"Haml is cool, #{@name}\"
    27. <div id=\"color\">Red</h1>
    28. %div#color Red
    29. #color Red
    30. Loops
    31. <ul id=\"friends\"> <% @friends.each do |friend| %> <li><%= friend.name %></li> <% end %> </ul>
    32. %ul#friends - @friends.each do |friend| %li= friend.name
    33. <ul id=\"friends\"> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
    34. Attributes
    35. ul#friends - @friends.each do |friend| %li= friend.name
    36. ul{:id => \"friends\", :class => \"list\"} - @friends.each do |friend| %li= friend.name
    37. <ul id=\"friends\" class=\"list\"> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
    38. Forms
    39. <% if logged_in? -%> <% form_for :comment, :url => blog_comments_path(@post) do |f| %> <label for=\"comment_comment\">Post a comment:</label> <%= f.text_area :comment, :rows => 14, :cols => 40 %> <%= submit_tag \"Add comment\" %> <% end -%> <% else -%> <%= link_to \"Login\", :action => \"login\" %> <% end -%>
    40. if logged_in? - form_for :comment, :url => blog_comments_path(@post) do |f| %label{:for => \"comment_comment\"} Post a comment: = f.text_area :comment, :rows => 14, :cols => 40 = submit_tag \"Add comment\" - else = link_to \"Login\", :action => \"login\"
    41. Layouts
    42. <head><!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"> <head> <meta http-equiv=\"content-type\" content=\"text/html;charset=UTF-8\" /> <%= title :site => \"Graffletopia\", :separator => \"-\" %> <%= stylesheets %> <%= javascript_include_tag :defaults %> </head> <body> <% if logged_in? %> <p>You are logged in.</p> <% end %> <% if flash[:notice] != nil -%> <p><%= flash[:notice] %></p> <% end -%> <%= yield %> </body> </html>
    43. !!! Strict %html{html_attrs} %head = title :site => \"Graffletopia\", :separator => \"-\" %meta{:http-equiv => \"Content-type\", :content => \"text/html;charset=UTF-8\"} = stylesheets = javascript_include_tag :defaults %body - if logged_in? %p You are logged in. - if flash[:notice] != nil %p= flash[:notice] = yield
    44. Sass
    45. Basic syntax
    46. #box { border: 0; color: black; }
    47. #box border: 0 color: black
    48. #box :border 0 :color black
    49. Nesting
    50. #box :border 0 :color black .orange :border 1px orange
    51. #box { border: 0; color: black; } #box .orange { border: 1px orange; }
    52. Variables
    53. !pink = #f3f #box :border 0 :color black .pink :border = !pink
    54. #box { border: 0; color: black; } #box .pink { color: #f3f; }
    55. Comments
    56. /* Homepage box #box :border 0 :color black
    57. Now go play!
    58. script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable
    59. Helpful hints
    60. • Grab the TextMate bundles
    61. • Grab the TextMate bundles • Start a template at a time
    62. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml
    63. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass
    64. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass • Screw up? Check whitespace
    65. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass • Screw up? Check whitespace • Move logic to helpers
    66. Have fun!
    67. The End

    + Patrick CrowleyPatrick Crowley, 2 years ago

    custom

    5942 views, 12 favs, 0 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 5942
      • 5942 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 12
    • Downloads 67
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events