HAML/SASS and tenplate

1. HAML/SASS and tenplate building clean semantic sites for less.

2. The players. POSH Typographical Baseline Grid Layout Grid HAML/SASS tenplate

3. POSH POSH encapsulates the best practices of using semantic HTML to author web pages. • isn't there a tag for that? • semantic classes and id's • no images for presentation

4. Before (markup w/ out posh) <div class="title"> • This is my headline </div> <br /> <br /> <div class="sub-header"> • this is a sub header </div> <br /> <div class="content"> • this is a paragraph of content, it contains some <b>bold</b> text and some <span class="blue">colored</span> text. • c • this is a second paragraph </div>

5. POSH (ahh, isn't that better) <h1>This is my headline</h1> <h2>this is a sub header</h2> <p> • this is a paragraph of content, it contains some <strong>bold</strong> text and some <span class="highlight">colored</span> text. </p> <p> • this is a second paragraph </p>

6. POSH Check List • The first rule of POSH is that you must validate your POSH. • Second, drop the use of TABLEs for purely presentational purposes, spacer GIFs, and presentational-html in general. • Next, fix your Bed and BReakfast markup. • Eliminate Anorexic Anchors. • Use good semantic-class-names.

7. Grids “ The grid system is an aid, not a guarantee.It permits a number of possible uses and eachdesigner can look for a solution appropriate to hispersonal style. But one must learn how to use thegrid; it is an art that requires practice. ” Josef Müller-Brockmann

8. Typographical Grid One of the things that separates good design from average design is baselines that line up.  Web designers/developers have generally disregarded the baseline grid even though the necessary tools have been available for some time now.

9. A comparison of a page with arbitrary values with one that has considered vertical rhythm.

10. Em's Em's provide a relative alternative to px/pt, making your website scale gracefully to different font settings across browsers. By setting the page’s overall font-size value to 62.5% in the body rule, text can be sized in ems using a value a tenth of the target pixel size. In other words, 1.0em equates to 10px, and 2.4em equates to 24px. Baseline grid is calculated by dividing the line-height by the font-size.

11. Layout Grids Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components. Instead of arbitrarily picking column sizes, grids enable you to create a common visual language throughout an entire Web site, rather than deciding things on a page-by-page basis. Components relate to each other, which makes it easier for users to scan content and develop familiarity with it.

12. Layout Grid

13. HAML Haml is the next step in generating views in your Rails application. Haml makes poorly  nested markup a thing of the past. Your views are cleaner and look beautiful with haml. It's faster that erb's. What are you waiting for. Whitespace matters

14. Our old POSH <h1>This is my headline</h1> <h2>this is a sub header</h2> <p> • this is a paragraph of content, it contains some <em>bold</em> text and some <span class="highlight">colored</span> text. </p> <p> • this is a second paragraph </p>

15. Now in HAML %h1 This is my headline %h2 this is a sub header %p • this is a paragraph of content, it contains some • %em bold • text and some • %span.highlight colored • text. %p this is a second paragraph

16. <div id='content'> <div class='left column'><h2>Welcome to our site!</h2><p><%= print_information %></p></div><div class="right column"><%= render :partial => "sidebar" %></div></div> ERB

17. HAML #content.left.column%h2 Welcome to our site!%p= print_information.right.column= render :partial => "sidebar"

18. SASS (syntactically awesome stylesheets) SASS is put quite simply an alternative way to write css. But in reality it is so much more. SASS provides: • tabulation • nested selectors • constants • mixins • basic operations

19. CSS #main {width: 90%;}#main p {border-style: solid;border-width: 1px;border-color: #00f;}#main p a {text-decoration: none;font-weight: bold;}#main p a:hover {text-decoration: underline;}

20. SASS #main:width 90%p:border-style solid:border-width 1px:border-color #00fa:text-decoration none:font-weight bolda:hover:text-decoration underline

21. Plus Constants !my_constant = #336699 Basic operations !my_highlight = !my_constant+#666666 Mixins   =clearfix • display: inline-block • &:after •   content: "." •   display: block •   height: 0 •   clear: both •   visibility: hidden •   * html & •     height: 1px

22. tenplate variable typograpical grid variable layout grid forms POSH layout microformats - coming soon

23. Typographical grid !font_size = 1.4 h1   :font-size= !font_size+.6+"em"   :margin= (!line_height/!font_size)+"em"

24. Layout grid Leverage mixins   !width = 960   !grid_width = 960/10   =column_calc(!col_size)

25. Resources/Thanks Microformats.org http://www.microformats.org Opera Developers blog. http://dev.opera.com/articles/view/setting-web-type-to-a-baseline-grid/ HAML/SASS http://haml.hamptoncatlin.com/ Obtiva http://www.obtiva.com Tom Kersten