Just like there are frameworks for many programming languages – CakePHP, jQuery, .NET – there are frameworks for CSS. The point of frameworks is to increase productivity and efficiency with CSS code. Many common practices done when using CSS are pre-defined within a framework to save the developer time and effort.
In this article we’re going to take a closer look into some of the most popular CSS frameworks, and see if using one could really live up to it’s reputation. Just like when working with any other framework, template, or application, there can be pros and cons. We’ll look into the good, the bad, and the ugly of using a CSS framework.
Time-Saving Web Development
There is no doubt that a CSS framework can save time when used correctly. After all, a framework’s purpose is to set up a base for developers to work with. Anything from typography and grids, to resets and add-ons are used in frameworks to make the developer’s life easier. The point is not to open up a text editor and start coding from scratch.
The Time-Wasting Learning Curve
In contrast, there is of course a learning curve when using a new CSS framework. This can take up more time than it’s worth. Beyond the learning curve though, when the code is not 100% yours, there can be confusion at some points throughout the development process. As designers and developers, we like to know the complete back-end workings of what we’re dealing with. Without that, a project can actually take longer.
Image credit: mayeve
Finding a Balance
So in respect to time efficiency, is using a framework worth it? For many, probably yes. It does take a good understanding of the framework that will be used before the time saving benefits truly arise, and maybe even a change in how one is used to coding. However, there are certain individuals that may work quicker with their own code completely — it can really just depend on the type of thinker you are.
When using a framework of any kind, including CSS frameworks, you are essentially using someone else’s well thought-out code, and trying to use it to your benefit. If you find it difficult to work with someone else’s code besides your own, then using a framework may not be for you.
Better CSS Efficiency
Many CSS frameworks are also meant to get all the garbage out of the way, standardize code, and keep things short and quick. For many pre-defined features in CSS frameworks, code is condensed using short-hand and eliminating whitespace. Since each browser has to load stylesheets along with other website documents, having smaller CSS files can speed up a website’s load time.
Image credit: juehuayin
Are There Too Many Extras?
While a solid CSS framework can speed up a website’s load time and keep things efficient, it can also do the opposite, depending on the project. How much CSS is your project going to need anyway? Does it need all the little features and details that come with some of the more complex CSS frameworks?
If coding a simple website, all the additional typography rules, layouts, and print styles may not be necessary. In that case, all these pre-defined features are just getting in the way, bloating the web space. One could choose to manually take out what is unneeded, but it almost makes more sense to code from scratch with no framework at all if one is to go through that trouble.
Deciding If It’s Worth It
A simple static website with a few pages likely won’t need a framework behind it, but something like a blog design or e-commerce site that will require many of the standard styled elements, multiple layouts, etc. could easily benefit from one. It’s all about knowing your project well and deciding appropriately. If using a framework is just going to make things complicated and longer, then it’s not worth it.
More Precise Design
Many frameworks feature a grid system, which compliments a design grid system like 960.gs. Pre-defined layouts or custom layouts can be made with CSS frameworks easily and hassle-free, and the pre-built grid keeps things in place. Even complex layouts take less thinking, and margins, padding, and the standard box model is always used correctly. Pixel-perfect conversions from Photoshop to code can be done more precisely and more quickly.
Image credit: adactio
What if the Framework Can’t Support Your Design?
For many standard, and not-so-standard layouts, a CSS framework can make things easier and make code stronger. However, some designs are not meant for frameworks. Many designs still do not conform to grids, or otherwise conform to a different kind of grid. This is especially true for more creative designs. Is it possible that a grid that goes along with your favorite framework would just get in the way, or otherwise be of no good use?
Knowing How Your Design Works
It’s true that many designs can benefit from using a framework grid to base their design on. By following a framework, the final layout is less likely to break under varying content options and among different browsers. It’s nearly foolproof.
Yet, grids and other design-related features of a framework can also just get in the way and mess with certain designs more than it can help. For non-conventional designs, try it without a framework, but always give a framework a try for grid-based designs or standard-layout designs.
Extras and Add-ons
Some frameworks include commonly used elements, like lightboxes, tabs, sprites, and more. Many of these frameworks let you download the standard version, and add these extra features as ‘add-ons.’ This definitely has a benefit of adding these features easily and with compatibility to the framework, but not requiring the developer to have them on the framework if they’re not going to be used.
However, beware that not all frameworks are created equally. Some may pack on more extras than necessary, by choice or not. Note what you use regularly, and if the extras included in the framework will be helpful, or will just pack things on and make things more confusing.
Popular CSS Frameworks
Blueprint offers a lot of features that many designers and developers ask for. Pre-defined typography, buttons sets, sprites, layouts, and more. Among all these features, designers can pick and choose, which makes this framework a great choice for a variety of projects.
Cleve CSS is a unique idea that focuses around giving the developer a different option when coding in CSS. It creates a new type of shorthand, that looks similar to the Python language. Shorter code and smaller files make this a very efficient framework. This framework focuses less on pre-built features and extras, and puts more emphasis on the developer coding everything themselves. It involves a quicker and smarter syntax, thus speeding up development time.
This is a very simple CSS framework with less of a learning curve, and more versatility. It may not cover as much as something like Blueprint, but it can be more useful to those who want to use a CSS framework without all the initial confusion.
YUI 2 has a strong focus on working with grids, and less focus on pre-built features like typography, resets, etc. (Although these are also included). If you often work with complex layouts, YUI 2 is a great option for building robust, unbreakable designs. It works easily with all the common layout widths, but also works well with custom widths. This is also one of the best frameworks for SEO.
Elements is a CSS framework focused around a time and effort efficient workflow. This framework has the designer in mind. It includes preset classes, a mass reset, and some neat extra features that are nearly always usable and lightweight.
Using a framework or not depends on how you as a designer or developer prefer to work, and how frameworks personally affect your workflow. They can be a great tool to use when used correctly, and can make any developer’s life much easier.
Besides deciding whether or not to use a CSS framework in the first place, afterward there is also the decision of which framework to use. Keep the above notes in mind when deciding: time saving, code efficiency, design factors, and the need for add-ons. The need for any of these features over the other depends on the type of projects you normally take on and how you work when coding.