Putting down a CSS Framework

Intro

To support project development Kauri wants to put down an approach to using CSS that is composed of

• A technical base css framework that covers
• browser style rendition variants
• font setting
• basic layouts and grids
• A set of conventions to adhere to the principle of least surprise and make sure all team-members will easily find their way in the miriad of system resources. These conventions should cover
• layering of "levels" & "types" of classes, and the resources formatting them
• attached to a clear and fixed order of loading the resources and defining the properties
• usage of id and class selectors (or possible more advanced selectors)
• advise on supporting various 'media' (specially print)
• naming of classes and resources
• and their multiple versions
• an upfront set of useful classes that can kickstart a css-zengarden
• best if this includes a style-demo.html file to check rendition of various aspects
• warnings and alternatives to known bad practices
• agreed usage areas for acceptable hacks
• suggested /* self documentation */ principles (possibly leading up to /** javadoc */ like support for larger and more complex sites ?)

Inspiration

• Server-side CSS pre-processors, which offer things like constants:
• http://www.shauninman.com/archive/2005/08/09/css_constants
•  php solution
• introduces @server constants { name: value ; } approach (or @server url(path-to-css) to allow sorts of 'macro' settings that get replaced on the way out
• http://haml.hamptoncatlin.com/docs/sass
• rubygem
• frameworks
• YUI CSS Framework
• Mike Stenhouse's A CSS Framework
• Elements: http://elements.projectdesigns.org/
• Yaml: http://www.yaml.de/en/
• Typografic oriented CSS framework called Blueprint by Olav Frihagen Bjørkøy
• css-boilerplate
• Jim Whimpey's css framework
• code conventions
• http://www.phpied.com/css-coding-conventions/
• name convention lists and proposals:
• And all that Malarkey // Naming conventions table
• OSCOM : CSS Naming Conventions
• opinions and ideas
• frameworks for designers from a list apart
• practice for grid design
• five_simple_steps_to_designing_grid_systems
• practical grid building sample
• deployment optimization:
• Adding JS/CSS copmpression using YUI Compression, JSLint, jsmin and ant
• various tips tricks and hacks
• http://csscheatsheet.net/article/css_reference_links
• http://applestooranges.com/blog/post/css-for-bar-graphs/
• http://www.barelyfitz.com/screencast/html-training/css/positioning/
• http://phonophunk.com/news/archive/managing-css-hacks/
• http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer
• Libraries of open web designs
• http://www.openwebdesign.org/
• http://www.oswd.org/
• References
• CSS Cheat Sheet
• Css-2 Specification

Technical Base Framework

Rather then build this from scratch we're opting to blend in a 3rd party open project for this.
Scouted frameworks:

• Yahoo's YUI CSS Framework
• blueprint css @ google-code

YUI CSS Framework

See evaluation notes.
Appreciation:

• sound and solid, seems to be broadly used and working well.

Blueprint CSS

See evaluation notes.
Appreciation:

• seemingly high traction in designer minds
• described use of grid.png & photoshop processes match our holistic vision / inclusion of designers
• feels like less imposing effect on div structuring compared to yui
• IMHO the remarks on the non semantic tagging are to be overcome in templating / aggregation layers
• bigger issue comes from the non support for so called fluid layouts
• For a more general list of pro-con on those see http://green-beast.com/blog/?p=199

Subjective comparison

Using a page from the kauri forms sample, Blueprint CSS was placed next to YUI CSS to evaluate the default page styling and typography differences. More after the jump.

Set of conventions

todo: complete these lists, and work them out.

Set of standard class-names for different areas:

• checking up on existing standards as micro-formats: http://microformats.org/
• for which some css  zen work (sometimes with accompaning js work) is under way at: http://microformats.org/wiki/zen-garden
• might get extended into end-user facing (relevant?) data-typing: time, period, geo-location, but also more trivial things as numbers
• more domains
• navigation and site context (active vs. selected, has-children, and dynamic effects via open, closed, ...)
• applications: menu's, actions (and specific ones: add, remove, stop, cancel, ..) , buttons, forms, validation messages, toolbars, ...
• position-indicators in tables/lists of rows and columns (header, first, last, odd, even, mod3-0, mod3-1, mod3-2...) to help out the selection of certain css rules to be applied
• decorated hyper-links (document types, access-control, )
• general text parts: abstract, copyright, title, author, ...
• other... ?

Other remarks

All this calls for some kauri-module incarnation that other modules then can rely upon. Some initial ideas on that:

• should cover uri-rewriting from the template
• should support version-labeling of the uri's so caching can happen
• maybe could include a suggestion/approach to theming and skinning