An Event Apart: The Lessons of CSS Frameworks

Frameworks:

• 960
  
• Blueprint
  
• Content with style
  
• Elements
  
• That Standards Guy
  
• Tripoli
  
• WYMstyle
  
• YAML
  
• YUI
  

Which CSS Framework is right for you? None.

• Frameworks aren't bad or evil, but if you're going to use a framework, it should be yours.
  
• Take inspiration from existing frameworks.

• Most frameworks use resets, fonts and colors, but leave forms alone. Almost all do layouts (having different kinds of layouts). Not a whole lot for print styling. Surprisingly few hacks. 

Body Sizes

• Font size: They all cluster around 12-13px, either absolute or by percentage.
  
• Default font family is a sans-serif font. 
  
• Line-height is less uniform - anywhere from 1 - 1.6. 

Heading Sizes

• Most use ems or percentages. 960 and Elements uses pixels.
  
• HTML 4 is the only one that has headings go below 1. h5 and h6 can actually be smaller than the paragraph text it sits next too. No one else thought that was a good idea.
  
• Blueprint and Elements start really big and get smaller.
  
• Everyone else starts around 1.6-2 for h1 and goes down to 1 for h6. 
  
• Average is: h1, 2.33; h2, 1.8; h3, 1.45; h4, 1.25; h5, 1.11; h6, 1.05

Naming Conventions
Group 1: 960, Blueprint, YUI/That Standards Guy

• have tons and tons of descriptive classes. pick whatever you want to layout and then add a class to it as appropriate. 
  

Group 2: Content with Style, WYMstyle, YAML

• have universal names (header, main, footer, content, etc...)

Layout Invocation

• 960/Blueprint/That Standards Guy/YUI: some type of ID or class
  
• Content With Style/Tripoli/WYMstyle: point to a directory with a stylesheet that has the layout you want. 
  


• With the first approach, you are loading every possible layout. With the second, you are only loading the one you want.

Style Inclusion Patterns

• Elements/That Standards Guy: Every page, you just point to a stylesheet and it imports whatever it needs.
  
• Everyone else: You link to whatever you need. 
  
• Frameworks skew towards the latter because of caching in IE. If you use the first, you end up downloading all the importing stylesheets again because it doesn't cache them. 

What the Hack?

• Hacks tell us what CSS is missing.
  
• clear-fixing; pseudo-padding
  
• Most hacks are for IE (shocker)

Some Cool Bits

• Elements: external linking - identifies external and internal links, pdf downloads, mailtos, etc...
  
• 960/Blueprint/YAML: compressed files - strip out all comments and whitespace to make file smaller. 
  
• Blueprint/WYMstyle, YAML: debugging.
  
• YAML: draft files.
  
• 960: sketch files.

Goal should be to create your own framework! They are good places to start but the advantage to having your own is that its tuned to what you do.


Read posts about other day 1 presentations »