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)

• ltdiv class"title"gt
• This is my headline
• lt/divgt
• ltbr /gt
• ltbr /gt
• ltdiv class"sub-header"gt
• this is a sub header
• lt/divgt
• ltbr /gt
• ltdiv class"content"gt
• this is a paragraph of content, it contains some
  ltbgtboldlt/bgt text and some ltspan
  class"blue"gtcoloredlt/spangt text.
• c
• this is a second paragraph
• lt/divgt

5
POSH (ahh, isn't that better)

• lth1gtThis is my headlinelt/h1gt
•  
• lth2gtthis is a sub headerlt/h2gt
•  
• ltpgt
• this is a paragraph of content, it contains some
  ltstronggtboldlt/stronggt text and some ltspan
  class"highlight"gtcoloredlt/spangt text.
• lt/pgt
•  
• ltpgt
• this is a second paragraph
• lt/pgt

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 pages 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

• lth1gtThis is my headlinelt/h1gt
•  
• lth2gtthis is a sub headerlt/h2gt
•  
• ltpgt
• this is a paragraph of content, it contains some
  ltemgtboldlt/emgt text and some ltspan
  class"highlight"gtcoloredlt/spangt text.
• lt/pgt
•  
• ltpgt
• this is a second paragraph
• lt/pgt

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
ERB

• ltdiv id'content'gt
• ltdiv class'left column'gtlth2gtWelcome to our
  site!lt/h2gtltpgtlt print_information
  gtlt/pgtlt/divgtltdiv class"right column"gtlt
  render partial gt "sidebar" gtlt/divgtlt/divgt

17
HAML

• content.left.columnh2 Welcome to our
  site!p print_information.right.column render
  partial gt "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 90main p border-style
  solidborder-width 1pxborder-color
  00fmain p a text-decoration
  nonefont-weight boldmain p ahover
  text-decoration underline

20
SASS

• mainwidth 90pborder-style
  solidborder-width 1pxborder-color
  00fatext-decoration nonefont-weight
  boldahovertext-decoration underline

21
Plus

• Constants
•   !my_constant 336699
•  
• Basic operations
•   !my_highlight !my_constant666666
•  
• 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-typ
  e-to-a-baseline-grid/
• HAML/SASS
• http//haml.hamptoncatlin.com/
• Obtiva
• http//www.obtiva.com
• Tom Kersten