How Blueprint and Compass help Idiots making CSS layouts

{{{
It takes me at least 2 hours to get CSS make what I want – normally this is having *a two-column layout, pushing elements around and having decent margins between floating blocks*. My CSS-skills do suck hard, and I usually give up asking friends and colleagues for help.

Luckily, I met Wynn Netherland and Adam Stacoviak at the “LSRC 2010”:http://www.lonestarrubyconf.com/schedule – I didn’t attend their training _Design eye for the Dev guy_ however, Wynn pointed me to *Blueprint and Compass* after telling him how hard I suck at implementing CSS.

This short write-up is meant to *help non-designers to have pretty clean CSS layouts* by using the mentioned frameworks.

h3. What is Blueprint?

“Blueprint”:http://www.blueprintcss.org/ is basically a *CSS template that offers a grid layout and a nice basic font setup*. It’s as if your CSS buddy would give you some ready-made CSS file and you could use his classes in your HTML files.

The central concept of Blueprint is the grid. *You don’t arrange elements by eyeballing but snapping to (invisible) grid lines* – this usually looks great.

Can you see how the left navigation columns and the content block are perfectly aligned in columns? That’s *this grid everybody refers to*.

Now, Blueprint “provides a bunch of CSS”:http://www.digitart.net/blueprintcss/bluebrintcss.pdf for snapping and moving. For instance, the following div would horizontally span the next 3 cells in your grid.

....

This is how I created the very left column. I *don’t worry about actual _widths, padding, margins_ – Blueprint does it for me*.

h3. A two-column layout

Another thing I love about Blueprint: *It comes with a two-column CSS setup* which is used on almost every web page, separating your site into

* header
* sidebar
* content
* footer

In my page I have a super simple HTML setup.

All I need to to is setting my body’s class to @bp@ and @two-col@. I can then use the four column elements Blueprint provides *inside the @#container@ element*.

This is not too much work and saves me from fighting with @float: left@ and all the other tricks I love and hate.

Blueprint offers much more cool stuff, but all I wanted for now is pointing out that *Blueprint is just pure CSS* and nothing more.

h3. What is Compass?

The next step t’wards good-looking pages is “Compass”:http://compass-style.org/ – and here I had a hard time figuring out how it works.

Compass is *a set of Ruby applications helping you to maintain your CSS*. It heavily relies on “SASS”:http://sass-lang.com/, *which itself is a _CSS-generating_ language.*

Now, what Compass basically does is

* automatically *including Blueprint CSS files* in your project
* scanning for *SASS files and compiling them* to real, browser-readable CSS files
* providing a great and lucid set of “documentation”:http://compass-style.org/docs/reference/blueprint/, once you come behind how things work together

h3. Rails and Compass

Let’s see how all these tools can be combined to make your Rails app look less sucky.

The first thing is requiring Compass in your @Gemfile@.

gem 'rails', '3.0.1'
gem 'compass'
gem 'haml'

The next step is initializing compass in my Rails app. I simply call

rails-app$ compass init rails --using blueprint

Now Compass does a few things worth mentioning.

* it creates @.scss@ stylesheets in @app/stylesheets@, which you’d usually edit to customize your look-and-feel. Note that *you no longer use CSS directly but SASS*.
* it installs an initializer to *automatically compile your site’s stylesheets*

All I do for now is including Compass’ compiled stylesheets in my layout.

%head
  = stylesheet_link_tag 'compiled/screen.css', ...

Looking at my page source and following the @screen.css@ url, I can see that Compass already did a lot of work for me by including the Blueprint CSS sources in my local CSS file.

body.two-col #container {
  width: 950px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}

/* and so on... */

When I now use the container setup I described earlier, *my site already looks 10 times better*.

%body.bp.two-col
    #container
      #header
        %h1 Apotomo
      
      #sidebar
      #content
        = yield

h3. What is SASS?

In order to customize your design, *you may open the @app/stylesheets/screen.scss@ file and add things*.

body.two-col {
  background-color: #dedede;

  #container {
    background-color: white;
    height: 100%;
  }
}

This is SASS – it’s meant to *keep you away from coding CSS directly while providing some nifty object-oriented features* like mixins, inheritance and variables. You can read about that at the “project page”:http://sass-lang.com/ or “in this great post”:http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/.

BTW- there are two different SASS syntaxes available which confused me.

* The older @.sass@ syntax doesn’t need curly brackets and instead relies on indendation as HAML does.
* The @.scss@ syntax is more CSS-like and seems to be the _authorative_ syntax (?).

h3. Presentation-free Markup?

Something I didn’t get either was the difference between *presentational classes* and *semantical selectors* in Compass and SASS, although it’s very simple.

I used to put *presentational classes into my HTML*.

Instead, I could have done that using *semantical selectors* in SASS, cleanly separating content and presentation.

#sidebar {
  div { width: 300px; }
}

I don’t need to *mention the div’s width anywhere except in the SASS file*, as I already know that divs in the sidebar won’t have any other width than 300. Is that right?

Another example: *When debugging my layout, I like the @showgrid@ feature* which displays the grid in the background of the element.

While I could do something like

which uses a _presentational class_ in my markup I can also control that in my SASS stylesheet.

#container {
    @include showgrid;

The “showgrid mixin”:http://compass-style.org/docs/reference/blueprint/debug/ is applied to the @#container@ selector, which basically includes the showgrid code into this selector.

h3. Now, use it!

I hope this article helps nerds understanding how these awesome frameworks act together and how they can be used to do something we all love: *Having good-looking sites.*
}}}

Advertisement