Description: Wouldn’t it be great if your toughest layout challenges were pre-solved for you, with code you could use over and over no matter what the design looks like? Sure, but is it possible, or even wise? Find out as we study popular CSS frameworks to help you better understand CSS as a design tool.
Which framework is right for you? None of them are right for you, it all depends on the project.
If you're going to use a framework it should be yours, something you created.
An overview of frameworks. All have some form of reset, colours and fonts. Most do layout. Very few do print, forms and hacks.
Only me and one other guy put up our hands saying we'd never use a CSS framework.
All frameworks set the font size smaller than the default, between 10px and 13px. They set the default font to a sans-serif. The line height is all over the place, between 10px and 19px.
Heading sizes are all over the place too.
HTML4 is the only one that will make headings smaller than 1em.
Blueprint and Elements make headings really big and quickly get smaller.
Lots of charts with average sizes and fancy stuff like that. Doesn't help me when I get a PSD and am told "make the heading 14px".
Average of all of the heading sizes set in all the CSS frameworks, kinda interesting.
2.33 1.80 1.45 1.25 1.11 1.05
He's trying to generalize based on these frameworks. "The perfect heading sizes".
How frameworks name things: .container_12, . grid_15 pick what you want to lay out and add a number to it. OR div.span-12 (a div with a class of span-12?!)
Personal opinion: These all suck!
Mark up your content based on a CSS framework?!
There are some that are more intuitive. YAML, WYMstyle, Content With Style.
How to layout with a framework:
For the .container_12 style frameworks you add a class to your HTML. For the moe intuitive ones you use the one that has the layout you want.
One way you load every layout style but only use one, the other you load only the layout you use.
Everything in one style sheet means less hit on the server. That's why YUI did it the way they did.
If you import style sheets they don't get cached in IE.
Hacking: Tells us not only browser deficiencies but also what CSS is missing. Clear-fixing (display: inline-block; height: 1%; etc...)
Pseudo-padding: A div inside a column for the sole purpose of adding padding inside the div due to the IE box model.
Lots of IE6 hacking in frameworks.
Cool bits in frameworks:
External links:
a[href^="http:"]
Cool stuff, as usual, is not cross-browser compatible.
Some have compressed files. All white space stripped.
Several frameworks have de-bugging styles. A background image with a grid or crazy colours (like how Dave does it ;))
I like FireBug better for these purposes.
Haha, he just said the same thing about FireBug.
YAML provides a blank copy of their CSS so you can overwrite anything you want.
960 provides sketch files. a PDF you can print with the grid on it.
How
Eric does it:
Directory structure, linked styles, layout files (not classes), naming conventions, resets, default text sizes, default colours, bullets and icons, debug styles.
Frameworks are not final solutions, they're a starting point. If you have your own it's tuned to what you do.
Answers to questions: Font sizes in percentages line height just a number, no unit.
End
Matt
Copyright 2012 Scribble Technologies Inc. All Rights Reserved.
