As promised in my last post introducing the website redesign, I'd like to expand on the various projects that I've used to put this together. Today I'll start with the CSS framework.

Firstly, I use Eric Meyer's CSS Reset as a starting point. Reset stylesheets supply rules to get rid of the inconsistencies that different browsers apply to elements by default, when you don't supply any explicit styles to tell them otherwise. Without a reset stylesheet, these inconsistencies are generally stumbled across when doing cross browser testing and are worked around by adding styles that are specific to each specific piece of markup which renders oddly. With a reset, the inconsistencies have been removed at a higher level so your styles for specific elements of the page can concentrate on the actual style and not making sure that the bottom margin of that level three header in your sidebar is the same height in IE as it is in Firefox.

Despite being a deceptively small stylesheet, an awful lot of time and careful thought has gone into each and every rule - Eric does a great job of explaining his approach in this article which is well worth the read if you're not familiar with CSS resets.

Next, to massively simplify the problem of page layout I use the 960 Grid System. Using a grid system feels a little bit icky - having to put classes in the markup to indicate a box that is 8 columns wide is not very “semantic”. If I really wanted to be semantic and purge myself of the heinous crime against semanticism that is …

<div class="container_12">
    <div id="header" class="grid_12">
        ...
    </div>
    <div id="content" class="grid_8">
        ...
    </div>
    <div id="sidebar" class="grid_3 prefix_1">
        ...
    </div>
</div>

… I could attempt to make use of a tool like Sass to apply the Grid Systems rules to the semantic ids and classes etc. Sass and other similar tools such as HSS, CleverCSS, or LESS are higher level meta languages that are compiled down into CSS. This allows such things as mixins, where you can embed whole sets of rules inside selectors with a single line, so my semantic classes and ids could have all the rules of 960s container_12s and grid_8s applied to them without having to use the unsemantic class names in the markup.

In fact, while writing this, I've discovered that of course, others have done exactly this already.

Making Semantic Grids

• Use the +grid-container mixin to declare your container element.
• Use the +grid mixin to declare a grid element.
• Use the +alpha and +omega mixins to declare the first and last grid elements for a row.
• User the +grid-prefix and +grid-suffix mixins to add grid columns before or after a grid element.

Example:

#wrap
  +grid-container
  #left-nav
    +alpha
    +grid(5,16)
  #main-content
    +grid-prefix(1,16)
    +grid(10, 16)
    +omega

Awesome. Something to pursue another day I think. For now using 960 GS certainly got the job done quickly and let me move onto the parts that interested me more.

Please note that if you “view source” to look for the reset or 960.gs stylesheet you won't find them very easy to read. My styles have been minified and concatenated together for performance reasons by django-compress - which I'll get to in a future post.