Complex Simplicity

So, this is the first post in a serie about creating a xhtml template with the aid of compass, sass, haml and blueprint.

The tools (gems) of the trade:

• Serve
• Compass

Follow the links and install the gems.
Create a compass project with blueprint with the command

compass -f blueprint project-name

I use 2 processes during my development (commands from the project-name directory)

1. compass -w .
2. serve

The first process watches the current directory and compiles changes made to the sass files, while the second command starts a WEBrick server on port 4000 to serve the project. (haml, js, css etc).
Open the project in your favorite editor. I use TextMate with the following bundles

• SeaOfClouds Sass Bundle
• TextMate Haml Bundle

I found this article that describes the installation of the TextMate Haml Bundle.

Open the screen.sass file from the src directory and take a look at the generated sass for you. I generaly change it to look like this:

// This import applies a global reset to any page that imports this stylesheet.
@import blueprint/reset.sass
// To configure blueprint, edit the partials/base.sass file.
@import partials/base.sass
// Import all the default blueprint modules so that we can access their mixins.
@import blueprint
// Import the non-default scaffolding module.
@import blueprint/modules/scaffolding.sass

// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
+blueprint

body
  +blueprint-typography
  +blueprint-utilities
  +blueprint-debug
  +blueprint-interaction
  :font-size 62.5%
  .container
    +container

Add the files _layout.haml and index.haml to the root of the project.
The _layout.haml file is quite similar to a Rails layout file and Serve detects and uses this file as the layout file.

The _layout.haml looks like this (for now):

!!!Strict
%html
  %head
    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :media=>"screen", :type=>"text/css"}
    %link{:rel=>"stylesheet", :href=>"stylesheets/print.css", :media=>"print", :type=>"text/css"}
    <!--[if IE]>
    %link{:rel=>"stylesheet", :href=>"stylesheets/ie.css", :media=>"screen, projection", :type=>"text/css"}
    < ![endif]-->

  %body
    .container
      %h1
        Test 123

    = yield

Next episode will build further on sass and the power of the blueprint mixins.