Blog
Whilst working on client projects we often find useful bits of information out. Where possible we blog about that information to pass on our knowledge. Below are some of our most recent entries.
Cleaner 960.gs using SASS and Compass
Due to large cases of divitis, classitis and some presentational naming conventions we don't agree with, we've kept the front-end grid systems, such as 960.gs, at arms length. That has recently changed due to SASS and Compass.
Why so down on grid systems?
If you've never looked at the markup of grid systems before, below is an very small example taken from the 960.gs site.
<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...
</div>
<div class="grid_3">
...
</div>
<div class="grid_2 omega">
...
</div>
</div>
<div class="grid_3 suffix_1">
...
</div>
</div>
Full 960.gs layouts often contain a large number of divs, classes and even id's containing layout information, which in our opinion is incorrect. Some may feel that there is no problem having classes and ids that are named after layout information, however we feel that this is putting layout information into the HTML, and that is something we have all been trying to move away from for many years.
SASS and Compass to the rescue
We recently started using SASS and Compass to help try and organise our stylesheets. If you are not aware of either of these tools then we suggest you read up fully on both as it may well change completely how you write your stylesheets.
SASS - Syntactically Awesome Stylesheets - allows you to put nested rules, variables, mixins and selector inheritance into your stylesheets.
Compass is a stylesheet authoring framework that not only allows you to easily use SASS, but also use existing stylesheet frameworks such as Blueprint and 960.gs.
NB. You don't have to be working on a Ruby project to benefit from using Compass and SASS. Also you don't need to install anything on your web server. You just need Ruby and RubyGems installed on your development machine to generate the CSS files.
Setting up Compass with 960.gs
We are not going to go into how to install Compass in this blog. This information can be found on the Compass site, we are simply going to explain how to use Compass to clean up your markup and stylsheets.
Once you have Compass installed on your machine, you need to get the 960.gs plugin.
gem install compass-960-plugin
You are now ready to setup your Compass project using 960.gs
compass create -r ninesixty my_project --using 960
You can change the configuration of the Compass project by editing the config.rb file that is generated. The one setting you are likely to change is the output_style, which we normally set to compressed to reduce our CSS file size.
require 'ninesixty'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/stylesheets" #path for CSS file generation
sass_dir = "app/src" #path to SASS files
images_dir = "public/images"
output_style = :compressed
The project creation script creates a couple of scss ("Sassy CSS") files. You can ditch the grid.scss files completely. We'll get the power of the grids another way.
The final stage is to setup the Compass watcher process. This process just watches for any changes to your SASS files and regenerates the CSS files as appropriate. It also outputs any relevant error messages.
compass watch
Getting 960.gs into the mix
This is where things get interesting and you'll finally start to do away with those horrible 'grid_9' classes in your markup.
Start by creating your own .scss file in your sass source folder. We call ours layout.scss. At the top of that file add in 960 and clearfix modules. There are lots of other modules you can import, so it's worthwhile researching these.
@import "compass/utilities/general/clearfix";
@import "960/grid";
By default the 960 module is set to 12 columns. We generally override this to 16 columns.
@import "compass/utilities/general/clearfix";
@import "960/grid";
$ninesixty_columns: 16;
You can now setup your grid and start styling elements with their relevant grid values.
@import "compass/utilities/general/clearfix";
@import "960/grid";
$ninesixty_columns: 16;
#wrapper
{
@include grid_container;
@include clearfix;
}
#mast
{
@include grid(16);
@include clearfix;
background: #ddd;
#logo
{
@include grid(6);
@include alpha;
}
#strapline
{
@include grid(10);
@include omega;
}
}
The @include is how you include a mixin in SASS. The 960 grid mixins used above are:
- @include grid_container - centres the 960px wide layout
- @include grid(n) - sets the width of an element based on the number of columns needed (With the default columns set to 16 so 'n' should be out of 16)
- @include alpha / omega - This removes the 10px margin (gutter) between elements. Alpha is at the start and Omega at the end
You will notice as you add more code into the .scss files, that the watcher process keeps overwriting the .css files. The above code generates the following css. (We have removed the compressed setting for readability)
/* line 7, ../src/grid.scss */
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
overflow: hidden;
display: inline-block;
}
/* line 8, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.0/frameworks/compass/... */
#wrapper {
display: block;
}
/* line 13, ../src/grid.scss */
#mast {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 940px;
overflow: hidden;
display: inline-block;
background: #ddd;
}
/* line 8, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.0/frameworks/compass/... */
#mast {
display: block;
}
/* line 19, ../src/grid.scss */
#mast #logo {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 340px;
margin-left: 0;
}
/* line 25, ../src/grid.scss */
#mast #strapline {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 580px;
margin-right: 0;
background: red;
}
Notice there is not one single reference to any of the usual 960.gs classes and ids. Finally we can have the benefits of the CSS grid systems without the inherent problems of classitis, divistis and layout information in our HTML markup.
This post is only meant as a brief introduction to Compass and SASS. We recommend you spend some time looking into the available framework modules and decide which works best for you. The most useful thing we did when first getting into using the modules was to read through the module code to understand it's full capabilities. See the grid code from the 960 module.
We now use SASS and Compass for all our CSS generation whether we are working in .Net, Ruby, PHP or just doing simple HTML cutouts.
TweetRead more entries
Keep up to date
Want to find out more?
If we have piqued your interest then we'd love to hear from you.