CSS Framework Roundup: Should You Use One? ∞
Posted at 7:30 PM on February 3rd, 2009
After seeing some CSS frameworks pop up over the past couple years, I thought it fitting to address the increasingly popular trend. In my opinion, I see CSS frameworks as a way to learn how other designers and developers work with layout, markup, and style to produce websites rapidly, semantically, and with great flexibility.
Without further ado, the official Wikipedia definition of a CSS framework:
A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage…
Popular CSS Frameworks
Below is a roundup of the various CSS frameworks out there and a short description from the authors of each framework. I’ve included the 960 grid system from Nathan Smith simply because it’s awesome even though it is so much more than just a CSS framework.
- 960 Framework
- Description from Nathan Smith: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
- Blueprint CSS Framework
- Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
- Elements CSS Frameworks
- Description from Project Designs: Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.
- CwS CSS Framework
- Description from Content with Style: If you’ve been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I’m trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I’ve not attempted to explain the layouts included here so it may not be suitable if you’re a CSS beginner. Sorry about that… Feel free to dissect them yourself if you’re interested; I’ve kept them as simple as possible.
- YAML CSS Framework
- Description from YAML.de:
Yet Another Multicolumn Layout
(YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users. - YUI Grids CSS
- Description from Yahoo!: The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
- Boilerplate CSS Framework
- Description from Nathan Borror: As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.
- CleverCSS
- CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is. The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it’s nonetheless a good idea for structural styles.
- WYMstyle: a CSS framework
- Description from WYMstyle: WYMstyle is a set of CSS files, that you can easily combine to very quickly create the layout of your web sites. WYMstyle aims to suppress the tedious compatibility testing across browsers for each created website, by providing CSS modules which are reliable and well-tested.
Should you use a Framework?
For me, I prefer to use my own CSS as a base, mainly due to the fact that every project is different, I don’t want to lock myself into using someone else’s code, and I don’t want to spend time learning how to combine classes to create the right layout. I just want to write the CSS and markup I need, nothing more.
I think using someone else’s framework is great for the following types of people:
- Students: learn everything you can from some of the best front-end developers out there.
- Back-end developers: being a front-end developer, I say don’t touch my CSS!
- Graphic designers: if you don’t really know HTML or CSS, it’s a great way to get into it and learn your constraints
- Web design chop shops: there’s nothing better for rapidly designing/coding websites than the 960 grid system
- Bryan Veloso: 960, it does a <body> good.
Thoughts? Did I leave out your favorite CSS framework? Comment below.
10 comments so far
Oops. I dribbbled.
-
I designed this for a big announcement on the UpThemes blog.
-
Working on revisions to a logo we were commissioned to design.
-
-
Client requested some color changes.
Steal this design. See if I care.
Hand-crafted in the year of the tiger.
Totally agree with you on the fact that each project is different. One might argue that you could design each project based on any framework … but like you said; “I just want to write the CSS and markup I need, nothing more.” <- Damn right!
Enjoyed the article! Keep up the great work
I’ve been looking at a bunch of these frameworks now but I just can’t find a good enough reason to get myself to use any of them. It’s just too easy for me to do just what I need, efficiently enough.
In the future though, I’ll probably play with some of them just to say that I have experience with them. Haha.
[...] frameworks: use or not? http://www.chris-wallace.com/2009/02/03/css-framework-roundup-should-you-use-one/ « előző | következő » Peter Szinek — 2009. 02. 04. [...]
[...] CSS Framework Roundup: Should You Use One? [...]
[...] 5.CSS Framework Roundup: Should You Use One? [...]
I had no idea there were THAT many CSS frameworks out there. Honestly, how differently can you make them? Thanks for the post, very nice looking site by the way!
Excuse me, could you tell me the URL for the Twitter Search plugin by Rogie King that you’re using? I can’t seem to find it on his website.
It’s not been released yet, unfortunately. I’m not sure when he plans to release it, but keep an eye out for it.
very interesting
DreamWeaver — PageMaker for the Web — sees the page as a bunch of boxes. It thinks in tags, translates to numbered s, and puts it all into the .