How Blueprint and Compass help Idiots making CSS layouts
Sunday, November 7th, 2010It 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 – 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.
What is Blueprint?
Blueprint 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 for snapping and moving. For instance, the following div would horizontally span the next 3 cells in your grid.
<div class="span-3">....</div>
This is how I created the very left column. I don’t worry about actual widths, padding, margins – Blueprint does it for me.
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.
<body class="bp two-col">
<div id="container">
<div id="header">
<div id="sidebar">
<div id="content">
<div id="footer">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.
What is Compass?
The next step t’wards good-looking pages is Compass – 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, 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, once you come behind how things work together
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 blueprintNow Compass does a few things worth mentioning.
- it creates
.scssstylesheets inapp/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
= yieldWhat 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 or in this great post.
BTW- there are two different SASS syntaxes available which confused me.
- The older
.sasssyntax doesn’t need curly brackets and instead relies on indendation as HAML does.
- The
.scsssyntax is more CSS-like and seems to be the authorative syntax (?).
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.
<body>
<div id="sidebar">
<div class="width-300">
<div class="width-300">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
<div id="container" class="showgrid">
which uses a presentational class in my markup I can also control that in my SASS stylesheet.
#container {
@include showgrid;The showgrid mixin is applied to the #container selector, which basically includes the showgrid code into this selector.
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.
