#modular css

I was working on a presentation for the Atlanta HTML5 Group about modular, reusable CSS and I built a box as an example. I used the "double box" method - an outer div gets the width and the float; and an inner div gets the borders, margins and padding. This creates a really easy to use grid system for smallish sites or modular components. Here is some more detail.

nadaGRID is my simple solution for grids when you do not want a grid system.

I have nothing against grids, in fact, I would recommend one if you are starting a project. This "system" was born out of a need to simplify some code without rewriting any large parts of a large project.

It stands of the shoulders of many that have advocated the idea of a double box. The dimension declarations of width are on an outside box and anything that adds width is added to an interior div. This takes advantage of the border-box model and the fact that a block level element without declared width fills 100% of its container.

By adding dimensional styles (like padding, margin & border) to an inside box without width or height declared, you are able to have your cake and eat it too. You can do full 100% width splits (50/50, 60/40, 33/33/33, 33/66) on the containers as long as all of the dimensional styles are applied to the inner box that has no width declared.

Check it out:

http://pbdesigns.us/projects/nadaGrid/

Source @ Github

Make sure and look at the nested examples, it shows its simplicity and flexibility.