When I started a particular auction application in Rails 3.0, I took the time to try out a grid layout library. There are a number of them out there, and for unknown reasons to me now, I chose Blueprint. It worked well, and I quickly had a usable site with much less hassle on the layout side of things. However, the hassle proved to be greater on the print media. No surprise; printing from HTML has always been a painful ordeal.
Recently during a site update, I realized what the biggest problem was: I still had the same ‘span-4’ type classes in the html, but was setting a ‘display: none’ on some columns like navigation sidebars. This resulted in a 4 column wasted whitespace that I couldn’t easily get rid of. As a result, my printing was always off center, and restricted in space.
[sourcecode language=”html”]
<div class="container">
<div id="header" class="span-24">
This header goes across the whole screen
</div>
<div id="nav" class="span-4">
Navigation stuff
</div>
<div id="maincontent" class="span-20 last">
Main content
</div>
</div>
[/sourcecode]
As you can see, the layout is very straight forward, but rigid; the content section is 20 columns whether you show the nav section or not. That’s the problem with grid layouts – you end up putting non-semantic markup in your html. Then your design is stuck, and other media types are in pain.
Enter rails 3.2 and the asset pipeline. I discovered that Compass, a set of SASS mixins, also bundled Blueprint, making it a no-brainer to upgrade to SCSS and Compass. I was able to remove the Blueprint css files from the project and replace them with few simple calls like `@import “blueprint”`. This allowed me to delete several css files from my own source code management, as they are bundled in the compass-rails gem.
Then the real magic begins. Instead of specifying ‘span-4’ in the nav section, I include the styles into a semantic name. The same is true for the main content areas, in an easy to read form that makes it clear what is happening:
[sourcecode language=”css”]
.container {
@include container;
#nav {
@include column(4);
}
#header {
@include column(24);
@include last();
}
#maincontent {
@include column(20);
@include last();
}
}
[/sourcecode]
The styles that define a column are inserted directly into the nav styling. The magic of SCSS transforms that into normal CSS for us. I won’t go into the details of SCSS features here, but you if you are familiar with CSS, you may notice this looks like CSS, but also has nesting and includes. The generated CSS has all of the formatting integrated into the semantic names. Here’s an example of what it turned into.
The html can now be simplified down to:
[sourcecode language=”html”]
<div class="container">
<div id="header">
This header goes across the whole screen
</div>
<div id="nav">
Navigation stuff
</div>
<div id="maincontent">
Main content
</div>
</div>
[/sourcecode]
Why is this important? First, the html itself is much cleaner, with meaningful names and no explicit formatting, making it much more readable. But look what happens in the print media css:
[sourcecode language=”css”]
header, nav {
display: none;
}
.container {
@include container;
#maincontent {
@include column(24);
@include last();
}
}
[/sourcecode]
The nav and header sections are hidden, and the content section now has a full 24 columns, instead of 19! Sweet zen! The page now uses the full size of the page, without needing any changes to the html.
There were many other benefits to using SASS and Compass, such as variables, and mixins for advanced features such as drop shadows and rounded corners, but that was just icing on the cake.
Having converted my layout, the print stylesheets worked much better, and I was able to get all the forms printed for this year’s event. However, web browsers still often don’t handle things consistently, and where page breaks and margins worked for me, they didn’t always work for others. So I am preparing to ditch printing from the web browser and instead, render straight to pdf for more precise printouts. I’ll save that for another post.
Leave a Reply