Base CSS Templates

After my Progressive Enhancement presentation at cf.objective last week, I had several people ask about baseline CSS that I use.  This sort of surprised me, since I figured at a developer conference CSS would kind of be glossed over (and I built my presentation with that bias).  That said, CSS is a fundamental aspect of progressive enhancement, and I am pleased people are interested in as well.

I use a pair of primary CSS templates when I throw together a new application: CSS Tabs and table.data.

The former is a small snippet of CSS which will turn a UL of LIs into a nice tab bar.  It supports customizing size and colors, as well as stacking multiple bars with different horizontal alignment (left align main nav, right aligned 'help' and 'logout' tabs).  It is NOT a client-side tabber, it's strictly presentational enhancement of a list of normal server-side links.  You could certainly use JS to manipulate the classes on the LIs client-side, but it provides no functionality along those lines.

The latter is a simple starting point for styling data tables (which, by the way, should be the only type of tables you have).  By default it uses a yellow theme for alternating rows, but if you add the 'grey' class it'll flip to a greyscale approach.  It has support for subheadings, multi-column headings, numeric cells, and 'total' rows.

Both are really designed as a starting point for your application to get a base level of prettiness out of the box.  table.data, in particular, usually ends up being further enhanced by the application stylesheet, perhaps to add new cell types or a different color scheme.  I've attempted to make them easy to extend without having to modify the code directly, which will let you grab a new copy (in the case of bug fixes) and not lose any of your changes.  Remember, layers of enhancement is the mantra.

I also generally end up with a .box class, along with .box.error and .box.success variants.  But those are typically more bound to the application's specific look and feel, so I haven't generalized those out into a separate stylesheet.  They're more semantic markup conventions I try to use consistently across applications.

Finally, I posted about inline progress bars last fall, which is a technique that has served me very well on several applications since then.  This is a hybrid JS/CSS technique, not pure CSS, but it's easily dropped into an existing application with the proper markup structures.