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.
by Matt McCausland at 6/23/2008 1:49:03 PM
Which framework is right for you? None of them are right for you, it all depends on the project.
by Matt McCausland at 6/23/2008 1:49:50 PM
If you're going to use a framework it should be yours, something you created.
by Matt McCausland at 6/23/2008 1:50:42 PM
An overview of frameworks. All have some form of reset, colours and fonts. Most do layout. Very few do print, forms and hacks.
by Matt McCausland at 6/23/2008 1:52:14 PM
Only me and one other guy put up our hands saying we'd never use a CSS framework.
by Matt McCausland at 6/23/2008 1:56:15 PM
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.
by Matt McCausland at 6/23/2008 1:59:42 PM
Heading sizes are all over the place too.
by Matt McCausland at 6/23/2008 2:03:40 PM
HTML4 is the only one that will make headings smaller than 1em.
by Matt McCausland at 6/23/2008 2:04:18 PM
Blueprint and Elements make headings really big and quickly get smaller.
by Matt McCausland at 6/23/2008 2:05:03 PM
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".
by Matt McCausland at 6/23/2008 2:06:59 PM
Average of all of the heading sizes set in all the CSS frameworks, kinda interesting.
by Matt McCausland at 6/23/2008 2:07:23 PM
2.33 1.80 1.45 1.25 1.11 1.05
by Matt McCausland at 6/23/2008 2:07:45 PM
He's trying to generalize based on these frameworks. "The perfect heading sizes".
by Matt McCausland at 6/23/2008 2:09:42 PM
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?!)
by Matt McCausland at 6/23/2008 2:12:15 PM
Personal opinion: These all suck!
by Matt McCausland at 6/23/2008 2:13:01 PM
Mark up your content based on a CSS framework?!
by Matt McCausland at 6/23/2008 2:14:35 PM
There are some that are more intuitive. YAML, WYMstyle, Content With Style.
by Matt McCausland at 6/23/2008 2:15:15 PM
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.
by Matt McCausland at 6/23/2008 2:18:06 PM
One way you load every layout style but only use one, the other you load only the layout you use.
by Matt McCausland at 6/23/2008 2:18:37 PM
Everything in one style sheet means less hit on the server. That's why YUI did it the way they did.
by Matt McCausland at 6/23/2008 2:19:27 PM
If you import style sheets they don't get cached in IE.
by Matt McCausland at 6/23/2008 2:22:56 PM
Hacking: Tells us not only browser deficiencies but also what CSS is missing. Clear-fixing (display: inline-block; height: 1%; etc...)
by Matt McCausland at 6/23/2008 2:25:21 PM
Pseudo-padding: A div inside a column for the sole purpose of adding padding inside the div due to the IE box model.
by Matt McCausland at 6/23/2008 2:26:32 PM
Lots of IE6 hacking in frameworks.
by Matt McCausland at 6/23/2008 2:28:20 PM
Cool bits in frameworks:
by Matt McCausland at 6/23/2008 2:28:53 PM
External links:
a[href^="http:"]
by Matt McCausland at 6/23/2008 2:29:29 PM
Cool stuff, as usual, is not cross-browser compatible.
by Matt McCausland at 6/23/2008 2:31:27 PM
Some have compressed files. All white space stripped.
by Matt McCausland at 6/23/2008 2:34:20 PM
Several frameworks have de-bugging styles. A background image with a grid or crazy colours (like how Dave does it ;))
by Matt McCausland at 6/23/2008 2:36:16 PM
I like FireBug better for these purposes.
by Matt McCausland at 6/23/2008 2:36:42 PM
Haha, he just said the same thing about FireBug.
by Matt McCausland at 6/23/2008 2:37:16 PM
YAML provides a blank copy of their CSS so you can overwrite anything you want.
by Matt McCausland at 6/23/2008 2:38:11 PM
960 provides sketch files. a PDF you can print with the grid on it.
by Matt McCausland at 6/23/2008 2:40:03 PM
How
Eric does it:
by Matt McCausland at 6/23/2008 2:40:44 PM
Directory structure, linked styles, layout files (not classes), naming conventions, resets, default text sizes, default colours, bullets and icons, debug styles.
by Matt McCausland at 6/23/2008 2:42:29 PM
Frameworks are not final solutions, they're a starting point. If you have your own it's tuned to what you do.
by Matt McCausland at 6/23/2008 2:44:42 PM
Answers to questions: Font sizes in percentages line height just a number, no unit.
by Matt McCausland at 6/23/2008 2:46:34 PM
End
by Matt McCausland at 6/23/2008 2:46:37 PM