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

HAML/SASS and tenplate
building clean semantic sites for
less.
The players.
POSH
Typographical Baseline Grid
Layout Grid
HAML/SASS
tenplate
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
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>
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>
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.
Grids
“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice. ”
Josef Müller-Brockmann
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.
A comparison of a page with arbitrary values with one that has
considered vertical rhythm.
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.
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.
Layout Grid
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
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>
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
ERB
<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>
HAML
#content
.left.column
%h2 Welcome to our site!
%p= print_information
.right.column= render :partial => "sidebar"
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
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;
}
SASS
#main
:width 90%
p
:border-style solid
:border-width 1px
:border-color #00f
a
:text-decoration none
:font-weight bold
a:hover
:text-decoration underline
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
tenplate
variable typograpical grid
variable layout grid
forms
POSH
layout
microformats - coming soon
Typographical grid
!font_size = 1.4
h1
:font-size= !font_size+.6+"em"
:margin= (!line_height/!font_size)+"em"
Layout grid
Leverage mixins
!width = 960
!grid_width = 960/10
=column_calc(!col_size)
Resources/Thanks
Microformats.org
http://www.microformats.org
Opera Developers blog.
http://dev.opera.com/articles/view/setting-web-type-to-abaseline-grid/
HAML/SASS
http://haml.hamptoncatlin.com/
Obtiva
http://www.obtiva.com
Tom Kersten