New Rails Project (part 3) - Default Layout
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.
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 comprises of two sass stylesheets,
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> ...
structure.sass we have
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 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.
This is controlled by
screen.sass and is all about defining the colour, position and maybe horizontal margins of elements.