Liveblogging AEASF: Lessons of Frameworks - Meyer
Popular frameworks: 960, blueprint, CWS, Elements, YUI, etc.
960 came along after the fact but was interesting enough to include in Eric’s research.
What are the common themes? What are the differences? Arey they good or bad things?
Which one should you be using? None of them!
There is nothing wrong with templates (for inspiration, etc) but we don’t make cookie-cutter sites.
Overview
A truth table basically of features.
Commonalities: Resets, Colors, Fonts.
This is evidence of what we all feel: extreme frustration with browser differences.
Font sizes:
1em != 1 on line height. 1em computes to 12.16 px and that is propogated down the DOM. Generally, don’t use units on line heights.
Heading sizes:
Very inconsistent.
YUI doesn’t touch header sizes.
Heading sizes don’t go below 1em (unless you count the HTML4 proposed)
Perfect heading sizes as per the wisdom of the crowd (averaging 2 averages)
These are similar to what designers already use.
Naming conventions:
Masthead vs header, container vs content vs goingtohell, etc.
Some used global grid classes (960, blueprint, yui/tsg) like: .span-16 (which you of course apply to a div),
The others use ids that are descriptive: #footer, #nav, #topnav, #content
#content, #main, and #page are separate concepts
Layout Invocation:
Some had all the possibilities in 1 file (960, blueprint, YUI), others used separate layout files for 1-2-3col layouts
Some used Wired pattern: 1 css with @imports to lots of others, the other frameworks include multiple
s in html
IEWIN only caches the 1st level of @imports. <-- GET CLARIFICATION ON THIS
Hacks:
clear-fixing (css limitation)
pseudo-padding (css box-model limitation) (using .box with margin inside a column, esp with mixing units)
IEEEEE! (* html ie is teh suck)
Cool bits:
Attribute styling urls on external links (like ALA article) (Don’t use for crucial content)
Debugging styles (blueprint grid is neato)
YAML ‘draft’ files: a skeleton for variying styles (could be cool for multi-team environs)
960 has ’sketch’ files, pdf templates that have a grid like the framework.
Questions:
- IE caching: IE6-7 will cache any stylesheet that your HTML file points to, but if those stylesheets import stylesheets they will not be chached.
- uncool bits? Set pixel-size fonts, the body is bad enough but it’s uncool to do it to all the headers and elements, etc
- resources for understanding ems? ems for sizing and ems for fonts are very different concepts. A number of css books attempt to explain it
- zooming? Text zooming != page zooming. As page zoom is more widespread, pixel fonts less of an issue.
- Other media? Print is the only one in the frameworks, but that will change (media queries). When will we see TV styles again?
- css predictions 10 years from now? At least a dozen albums. No, Eric is not a prophet. Sry.
- Would you recommend using a framework? No, they are based on the assumptions of the people who make them. If you want a framework, develop it to reflect yourself or your team.



No Comments, Comment or Ping
Reply to “Liveblogging AEASF: Lessons of Frameworks - Meyer”