More Related Content Similar to Haml And Sass In 15 Minutes Similar to Haml And Sass In 15 Minutes (20) More from Patrick Crowley More from Patrick Crowley (10) 9. Do I have to learn another
markup language? 14. • Markup should be beautiful 17. •Markup should be beautiful
• Markup should be DRY
• Markup should be indented
• Structure should be clear 24. •White space active
• Indentation = structure
• Tags begin with %
• Tags close themselves
• Use hashes for attributes 42. <% 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 -%> 43. 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; 45. <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> 46. !!! 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 49. #box {
border: 0;
color: black;
} 54. #box {
border: 0;
color: black;
}
#box .orange {
border: 1px orange;
} 57. #box {
border: 0;
color: black;
}
#box .pink {
color: #f3f;
} 65. • Grab the TextMate bundles
• Start a template at a time 66. • Grab the TextMate bundles
• Start a template at a time
• Use .haml or .html.haml 67. • Grab the TextMate bundles
• Start a template at a time
• Use .haml or .html.haml
• Use .sass 68. • Grab the TextMate bundles
• Start a template at a time
• Use .haml or .html.haml
• Use .sass
• Screw up? Check whitespace 69. • 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
