Here we discuss getting a simple structure in place for laying out the pages of our application …

Using HAML and SASS

Our setup is dependent on HAML and SASS. Lets just add this to the HAML branch first of all and see how things go.

gch haml

We are going to add some SASS stylesheets but first of all we’ll use a reset style sheet.

Our SASS stylesheets will separate 3 concerns

• layout
• typography
• appearance

Layout

Layout comprises of two sass stylesheets, grid-base and structure.

grid-base defines a virtual grid using SASS arithmetic, which by default is divided into 24 columns. The grid is all about the width of these columns. If you use percentages you can create a liquid layout. If you use ems you can create a fixed width layout which can resize quite nicely. The approach is to setup a large number of SASS mixins. This is based on the code in Blueprint. The innovation is to not let any of the blueprint class styles get into your code. Instead we use the SASS mixins to apply the code to our semantic css styles. Some examples

In blueprint html ends up like

<div id=wrap class="span-8"> ...

With sass its just

<div id=wrap> ...

but in structure.sass we have

#wrap
  +span-8

this includes the sass mixin +span-8 into the css for #wrap.

This pretty much gives us the best of both worlds - a powerful grid and semantic html source. We also end up with less junk in our css as only the sass mixins that are used end up in the final stylesheets.

Typography

Typography uses one stylesheet (typography.css). It is mostly concerned about getting vertical rhythm in our document. Here we define a desired default line-height in pixels and then use a combination of SASS arithmetic and constants to apply this line height to our typographical styles which are em based. This allows us to create styles with different font sizes that all line up.

Appearance

This is controlled by screen.sass and is all about defining the colour, position and maybe horizontal margins of elements.