CSS frameworks have a tendency to be dismissed by many CSS authors; code bloat and non-semantic class names are usually at the top of the list of reasons why. Even without ever using one, I shared the same opinion, but that might have changed after trying a few of them out while doing some research recently…
Existing frameworks
There’s an abundance of CSS frameworks out there, from the simpler ones that only provide layout solutions to ones that include forms, typography and fluid layout modules.
From what I can tell, designers and agencies that work with frameworks on a regular basis tend to use either Blueprint CSS or 960 Grid System (often abbreviated to 960gs). Yahoo!’s YUI Grids is also a popular one. These were the three frameworks I experimented with.
Preconceptions
I had frameworks all figured out: they were for CSS authors who wanted to go with the easy solution and not create their own CSS foundations, or for those who didn’t really want to understand how CSS works — basically, anyone looking for an easy solution.
If there is one thing I dislike it is purists who aren’t open to other people’s ideas and that never change their minds. I love CSS and I can be a purist in some cases, but I also understand that not everything can be perfect and sometimes stylesheets are messy. We all aspire to create beautiful, clean code, that is semantic and valid, but when working on real projects, that keep being updated, where more than one person at different times edits the CSS, each one with their interpretation of ‘perfect’ and with their own different level of expertise and experience, efficiency usually takes precedence over the purity of the code.
But I digress. What I mean to say is that sometimes we can use the odd non-semantic class name and no puppies will die. This is what frameworks are often criticised for. Class names like ‘grid_16‘ or ‘span-8‘ are far from being ideal, but given the need for being adaptable to any kind of project, they make sense (in most cases at least).
These non-semantic class names can be paired with better ID names (like ‘class="span-8" id="aside"‘) or, when using HTML5, with semantic element names.
While I was trying these frameworks out, I asked a few questions on Twitter (mainly complaints, to be fair), and, even though this is not scientific, most people seemed to reprove the use of frameworks. I seem to remember someone even saying they are ‘useless’, and many more negative comments. Two or three people said they used them though, and were very happy about that (opinions diverged on which one).
Wireframing
I always had the idea that frameworks would be quite useful to create wireframes on the browser, so that was what I decided to replicate with Blueprint, 960gs and YUI 3 Grids, using a very simple layout.
Blueprint
The Blueprint CSS framework was created by Olav Bjørkøy and released in August 2007. It is usually considered to be the most comprehensive CSS framework, since it caters not only for grid-based layout creation but provides, and has, a solid typographic foundation, considering aspects like vertical rhythm. It also provides a reset and print stylesheet, and basic styling for forms.
The framework uses by default a 24-column layout (each column spans 30 pixels and has a right margin of 10 pixels) but you can create different layouts by using the compressor included in the files.
Using Blueprint is as easy as including a wrapper with a class of “container” surrounding the remaining blocks on the page. Depending on the width of each of the internal containers, you need to use a class of, for example, “span-24”, for a div that spans across the entire width of the page, or “span-8”, for a block that spans across 8. If the container is the last one within a particular container or column, it should also include a class of “last”. The HTML for a the layout above would look like this (I have omitted the content, of course):
<body> <div class="container"> <div class="span-24 b"> </div> <div class="span-6 b"> </div> <div class="span-18 last"> <div class="span-15"> <div class="span-15 last b"> </div> <div class="span-9 b"> </div> <div class="span-6 last b"> </div> </div> <div class="span-3 last"> </div> <div class="span-18 last b"> </div> </div> </div> </body>
I’ve also added a class “b” (pardon the presentational name) to the divs that have content so that I could add a light background and some bottom margin to preview the wireframe better (we’re just doing a quick example here, so it’s OK to include this directly in the head):
.b { background:#d4d4d4; margin-bottom:10px; }
Here’s a screenshot of the completed wireframe:
This took me less than 10 minutes to make (I know it’s pretty basic though), including having a quick read through the Getting Started guides.
960gs
The 960 Grid System CSS framework was developed by Nathan Smith and was released in March 2008. This framework was developed with a strong focus on the grid; even though it provides basic typographic styles, its main purpose is to deliver a cross-browser foundation (it has full A-Grade browser support, as defined by Yahoo!) that allows for many variations of the most common grid-based layouts.
For 960gs I’m going with an even simpler layout — the main idea here is to show the differences between class naming and nesting from framework to framework.
The framework works, by default, on either a 12 or 16 column grid. We need to add a container surrounding the inner blocks with a class of “container_16” (or “container_12”); the inner containers should have classes of “grid_16”, “grid_14”, etc., depending on how many columns they span. Here is the final HTML markup for our simple layout:
<body> <div class="container_16"> <div class="grid_16 b"> Header </div> <div class="grid_4 b"> Sidebar </div> <div class="grid_12 b"> Main content </div> <div class="grid_16 b"> Footer </div> </div> </body>
And this what you should see:
As with Blueprint, there are several tools online that allow you to configure the framework to your needs. Fluid 960 Grid System is based on the original 960 Grid System, but allows for fluid and fixed layouts, and includes basic styling for elements such as navigation, tables, forms, articles and typography.
YUI 3 Grids
The YUI 3 Grids framework is part of the Yahoo! User Interface Library (YUI). The library includes JavaScript resources as well as CSS (YUI 3 CSS also incorporates reset and typography stylesheets). It works in a similar way to the other frameworks presented in this chapter, with a difference: there is no predefined width for the main container, only predefined “units” in which a container can expand within another container.
In this case, we need to add the desired width to the body element of our page, as such:
body {
margin: auto;
width: 960px;
}
The “margin: auto” property will centre our content on the page. Next, as with the other frameworks, we need to include a wrapper container with the class “yui3-g”. The containers within it will take class names based on the percentage of the width they should fill (or “units”). So, for example, if the sidebar takes up one third of the total width, it should have a class of “yui3-u-1-3”, and if the main content area takes up two thirds of the total width, it should have a class of “yui3-u-2-3”. YUI comes with a set of predefined unit classes (which are listed in the framework’s website).
The final example would have the following HTML:
<body> <div class="yui3-g"> <div class="yui3-u-1 b"> Header </div> <div class="yui3-u-1-3 b"> Sidebar </div> <div class="yui3-u-2-3 b"> Main content </div> <div class="yui3-u-1 b"> Footer </div> </div> </body>
Looking like this:
Notice that YUI doesn’t have gutters between the columns — I see that as a downside.
My favourite
For me there’s a clear winner and it’s Blueprint. The guide was clear, it provides lots of tutorials and examples from within the front page of the website, and the fact that it provides a good typographic foundation is a major advantage.
Another advantage of Blueprint is the community behind it, which is constantly creating and releasing new plugins, themes and other tools that can be used in conjunction with the basic framework.
I felt 960gs‘s logic a lot harder to understand; it took me more than 30 minutes to figure out how the framework worked and finish the layout. If I’m going to use a framework I will be doing it to save time, so I didn’t find that experience very nice. Also, contrary to Blueprint’s website, 960gs’s didn’t have a clear ‘getting started’ tutorial, so I had to look for articles outside of the site to ‘get started’. I do like the Fluid 960gs framework, but I’m not sure if there isn’t something similar for Blueprint.
Most people that I’ve talked to while doing this little experiment mentioned that they didn’t really appreciate frameworks, but the ones who did, swore by 960gs, so it might have been that I just wasn’t introduced to it the right (or simpler) way. There are beautiful websites built on top of this framework (a quick look at its website is enough proof), like the gorgeous Black Estate Vineyard:
The fact that YUI is adaptable to any width is a major plus, but the reduced amount of unit combinations made it a little uncomfortable to use, and I felt somewhat restricted as to what I could do with my layouts. If this is incorrect, I’d love it if someone would let me know, I couldn’t find a way around it easily in the getting started guide.
Conclusion
I’ve mentioned above that I believed CSS frameworks to be ‘the easy solution’. I still think that’s true, but I don’t see it as a bad thing: why spend hours creating perfectly hand-crafted CSS layouts when there are excellent foundations that we can build upon already out there? Life’s not just about coding (really) and there are better things that I can be doing with my time than creating problems for which there are solutions already.
This doesn’t mean, however, that I believe everyone should be using existing frameworks in their projects. Ideally, you’d be working with your own framework or template, adapted to your needs. It just means that I don’t think CSS frameworks should be treated like a bad thing and they can definitely be useful in some cases, or even as a base or inspiration for creating a custom framework. And I will certainly not condemn any designer or agency that uses out-of-the-box solutions, like Blueprint, because the benefits that you get from using those can surpass the downsides like verbose stylesheets and non semantic class names.
Don’t get me wrong: I thrive on a good piece of semantic HTML and CSS, and like most of you I also wanted to throw up the first time I looked at the non-semantic classes that these frameworks use. I will look at you sideways if your navigation is a paragraph rather than a list and I may unfollow you on Twitter if I know you’ve ever used class names like “redLink”. I still believe that the non-semantic class names are the least desirable feature of frameworks; ideally we shouldn’t have classes like that in our stylesheets, but I also think there are times when we need to be flexible and adapt ourselves and accept that things like this will happen.
Maybe they are a good solution for quick or low budget projects, or prototypes (although prototype code will often move on to production, so beware if you’re especially lazy, like me). I just thought this would be a good topic to discuss, and I guess I don’t mind saying that I like stuff people usually get repulsed by, so here.
My verdict: no, frameworks are not evil.
So my question is, have you ever used a framework? Do you agree that they are a great tool, or have I gone crazy? I’d love to hear your thoughts.
Update, 13 January 2018: Portuguese translation of this article