MicroCSS, a minimalist framework

13 October 2007 css

After seeing some CSS framework I wanted try a personal implementation of a generalist framework, designed to provide the tools for define the page structure. Rather than build a complex infrastructure of rules I tried to find a limited set of rules that allowed me especially flexibility.

Update 3/11/2008: an updated version is available: microCSS v3

The framework is based on generic classes dimensioned in percentage to adapt to any width of the layout, fixed or fluid. The classes have widths from 20% to 80% and have been chosen thinking to page subdivision in fractions (1/5, 1/4, 1/3, etc). Every class is duplicated for the alignment (left and right).

class width page fraction
20% 1/5
25% 1/4
33% 1/3
50% 1/2
66% 2/3
75% 3/4
80% 4/5

Appropriately nesting the classes is possible to easy obtain layout from 2 to 5 columns, very robust, and in wich is possible to establish what column will be the first in the HTML source, with the well-known benefits for accessibility and search engine optimization.

I had the inspiration for this method of nesting reading Source Ordered Columns (Position Is Everything) in wich is described an alternative method for a 3 columns layout. Estending this technique to nest more elements it’s easy to obtain multi-columns layouts.

The second point of my effort was to find a good way to split the page in top-bottom sections and have different layouts in each of them. For example, a firs section 2 columns followed by a section with 4 columns. To do that using floats, you need to use an element to clear the floats between the sections. This require the insert of an “alien” element in the code.

The solutions has come reading Clearing a float container without source markup (Position Is Everything) that permit, using only CSS rules, to clear the floats in an effective and clean manner.

This technique has been applied to a .wrap class, to assign to a div enclosing each section.

In the end I made a global reset of margin and padding, to avoid the different default rules between different browsers. Referring to Undoing html.css (Tantek Celik), Global White Space Reset (Left Justified) and YUI Reset CSS (Yahoo! UI Library) I mixed up all and make a personal version of the reset.

I added an id #container to enclose the entire document. If you choose a fixed width layout, #container will automatically center the page in the browser.

You can see an example page with layout from 2 to 5 columns (all in the same page) or you can download the file microcss.zip (microCSS framework) containing the framework and the example page.

Note: Internet Explorer make some mistakes when rounding a math calc, so it’s necessary to specify the classes with a different width. In the first release of microCSS I have inserted some hacks to achieve the right behaviour, but this prevent the CSS validation. So the IE rules have been splitted in a separate stylesheet to include with conditional comments.

Comments

06/08/08 17:41 - Rhodesian Ridgeback Puppies

Is this the same implementation you have used in the invision template?

07/08/08 06:10 - **Scaracco**

Yes, I have used microCSS for Invision and Ribbon templates.