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.
Things That Are Brown web site, built using the 960 Grid
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.
Second & Park web site, build using the 960 Grid
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?
HTML5
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:
Experimenting with HTML5 Structural Tags
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.
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
Also, this article from A List Apart describes the reasoning behind CSS Frameworks very well:
http://www.alistapart.com/articles/frameworksfordesigners/
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:
960 Grid System
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.
Fluid 960 Grid
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.
http://www.designinfluences.com/fluid960gs/
1KB CSS Grid
3. 1KB CSS Grid
A lightweight grid.
Tiny Fluid Grid
4. Tiny Fluid Grid
A fluid version of the 1KB Grid.
YUI Library
5. Yahoo YUI
It’s been around for a while and is on its third iteration. Includes JavaScript as part of the framework.
http://developer.yahoo.com/yui/
Blueprint CSS
6. Blueprint CSS
This one includes styles for forms, for printer-friendly pages, and for typography:
52 Framework
7. 52 Framework
An HTML5 and CSS3 framework
HTML5 Boilerplate
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.
Sencha Touch Framework
9. Here are some far-out frameworks, including those that use JavaScript, and ones for building HTML5 games and touch-screen apps. Check out this amazing collection compiled by another blogger:
http://rachit-myvoice.blogspot.com/2011/03/html5-and-css3-frameworks.html
Carla, your posts are always so well done and helpful. This is a great post. I am very new to web design, and the first thing I noticed was how websites could be used as templates. The information you give here is very thorough in that you include the new technology HTML5 and updating the use of semantic markup. Plus you listed some great resources. Thank you so much.