This is not the document you are looking for? Use the search form below to find more!

Report home > Others

Haml And Sass In 15 Minutes

0.00 (0 votes)
Document Description
Haml And Sass In 15 Minutes
File Details
Submitter
  • Name: joline
Haml And Sass In 15 Minutes screenshot
Embed Code:
DOWNLOAD

Add New Comment




Related Documents

15 minute loans- small loans in just 15 minutes

by: bensond505, 1 pages

15 minute loans find range of matchless loan services alike payday loans in 15 minutes, no credit check installment loans and short term cash loans. Apply with us now and get the cash you need in ...

jQuery in 15 minutes

by: itaf, 14 pages

jQuery in 15 minutes

Haml And Sass: Put your markup on a diet

by: heidi, 16 pages

Haml And Sass: Put your markup on a diet

LAMP(Linux,Apache,MySQL and PHP) in 5 minutes

by: imogen, 16 pages

LAMP(Linux,Apache,MySQL and PHP) in 5 minutes

Money In 15 Minutes Beating Online Roulettes

by: kane2, 13 pages

In 15 Minutes You Can Be Making A Full Time Income From Home. You Will Not Have To Use Any Of Your Own Money.

15 Minute Loans

by: tyrone2gholar, 5 pages

15 minute loans arrange for you short term loans, loans in 15 minutes, 15 minutes payday loans and no credit check loans. Apply with us now and get rid of all your financial woes in the least ...

The impact of structure on word meaning and fill-in-the-blank tests procedures on short-term and long-term retention of vocabulary items

by: seyed_hossein_fazeli, 12 pages

The impact of structure on word meaning and fill-in-the-blank tests procedures on short-term and long-term retention of vocabulary items

David Levey 2008: Language Change and Variation in Gibraltar ...

by: hanno, 7 pages

David Levey 2008: Language Change and Variation in Gibraltar. Amsterdam /Philadelphia: John Benjamins Publishing Company. xxii + 192 pp. ISBN 978 90 272 1862 9 M. A book review. Reviewed by Teresa ...

Ccna Commands In 10 Minutes

by: tero, 9 pages

Ccna Commands In 10 Minutes

Aware Bear Computers Pittsford NY Overheating Laptop Repair and Service in Rochester NY

by: Andre Leite Alves, 1 pages

Aware Bear Computers Pittsford NY Overheating Laptop Repair and Service in Rochester NY Aware Bear Computers in Pittsford NY specializes in laptop repair and service in Rochester NY. If your laptop ...

Content Preview
  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 = quot;Haml is cool, #{@name}quot;
  27. <div id=quot;colorquot;>Red</h1>
  28. %div#color Red
  29. #color Red
  30. Loops
  31. <ul id=quot;friendsquot;> <% @friends.each do |friend| %> <li><%= friend.name %></li> <% end %> </ul>
  32. %ul#friends - @friends.each do |friend| %li= friend.name
  33. <ul id=quot;friendsquot;> <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 => quot;friendsquot;, :class => quot;listquot;} - @friends.each do |friend| %li= friend.name
  37. <ul id=quot;friendsquot; class=quot;listquot;> <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=quot;comment_commentquot;>Post a comment:</label> <%= f.text_area :comment, :rows => 14, :cols => 40 %> <%= submit_tag quot;Add commentquot; %> <% end -%> <% else -%> <%= link_to quot;Loginquot;, :action => quot;loginquot; %> <% end -%>
  40. if logged_in? - form_for :comment, :url => blog_comments_path(@post) do |f| %label{:for => quot;comment_commentquot;} Post a comment: = f.text_area :comment, :rows => 14, :cols => 40 = submit_tag quot;Add commentquot; - else = link_to quot;Loginquot;, :action => quot;loginquot;
  41. Layouts
  42. <head><!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html;charset=UTF-8quot; /> <%= title :site => quot;Graffletopiaquot;, :separator => quot;-quot; %> <%= 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 => quot;Graffletopiaquot;, :separator => quot;-quot; %meta{:http-equiv => quot;Content-typequot;, :content => quot;text/html;charset=UTF-8quot;} = 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

Download
Haml And Sass In 15 Minutes

 

 

Your download will begin in a moment.
If it doesn't, click here to try again.

Share Haml And Sass In 15 Minutes to:

Insert your wordpress URL:

example:

http://myblog.wordpress.com/
or
http://myblog.com/

Share Haml And Sass In 15 Minutes as:

From:

To:

Share Haml And Sass In 15 Minutes.

Enter two words as shown below. If you cannot read the words, click the refresh icon.

loading

Share Haml And Sass In 15 Minutes as:

Copy html code above and paste to your web page.

loading
PDFCast Tags | Browse | DMCA Guidelines | Terms of Use | Privacy Notice | Contact | Facebook | Valid XHTML | Sitemap | Book Sitemap
© Copyright 2011 PDFCast.org

0.0798 - 4.4MB