Topic #2 – Can I get a resource?
Designing with CSS Frameworks
What are they? Why use them?
A CSS grid or framework is like a template, or like a larger version of a code snippet that you use over and over again.
A framework serves two purposes. It keeps your design neat, clean, and balanced, like the classic graphic design grid, and it also helps you to eliminate some repetitive coding. A lot of designers start many of their web projects the same way, with the same basic structure, and customize it from there, so these grids do some of that repetitive work for you.
To use these frameworks, you download a package containing HTML and CSS files. These CSS files contain styles that corral your content into a neat little grid system, made up of several columns and gutters. Most frameworks also provides you with a CSS reset. These things provide the starting point for your web site, and you customize it from here.
You can use these frameworks with little CSS knowledge, but you will benefit the most if you are already familiar with CSS layout, and can tweak these files to meet your needs.
Why are CSS frameworks considered controversial?
Frameworks are somewhat controversial because many of them do not use semantic markup, meaning that the class names like column1 or div7 or width3 used to organize the columns have no real descriptive meaning. With HTML5, we are moving toward more semantic html tags, with the addition of tags such as <header>, <article>, <section>, and <footer>.
For more on this, please see my related post:
There are some new HTML5 frameworks out there that are supposedly more semantic than the original CSS frameworks, which I link to further below in my list of frameworks.
How do I use them?
This awesome article from Six Revisions, titled The 960 Grid System Made Easy, makes all of the complicated stuff easy to understand, and goes into detail about how the columns are set up and how to adjust them.
Also, this article from A List Apart describes the reasoning behind CSS Frameworks very well:
Which one should I use?
There are many CSS frameworks out there. Some are fixed, some are fluid, and some now use HTML5 and CSS3 (these new ones supposedly being more semantic). Here are a few:
1. 960 Grid
The 960 Grid was one of the first, and is very popular. Their web site has lots of examples of designs built using their grid, and you can press a button to show the grid overlaid on the design, which really helped me to visualize the underlying structure. I especially love their printable PDF grids, because I like to hand-sketch a web page layout, and now I know it will correspond to my CSS layout.
2. Fluid 960 Grid
A fluid version of the 960 grid. Use this if you want your layout to stretch and contract with the user’s screen size.
3. 1KB CSS Grid
A lightweight grid.
4. Tiny Fluid Grid
A fluid version of the 1KB Grid.
5. Yahoo YUI
6. Blueprint CSS
This one includes styles for forms, for printer-friendly pages, and for typography:
7. 52 Framework
An HTML5 and CSS3 framework
8. HTML5 Boilerplate
This boilerplate code can be integrated with other grid systems such as the 960 Grid, Compass, and Less, and even into your WordPress theme. Read the “Docs” page for details.