One of the coolest new things in CSS3 is the calc function. Calc() is a dream come true for the people who like to mix various units like(px, em, %) with the goal to have more flexible layout system.

With calc you can have something like width: calc(280px - 2em + 2%*1px ….)

When I first heard about calc() my first thought was I can finally implement margins on my CSS Framework Malo.

If you have some .class { width:25% } that will make 4 columns grid (25% + 25% +25% + 25%). The problem is that you can't have precision px margins (gutter). So in the past you had nested divs or .something-like-this{width:24%; margin-left:1%}

With calc() that problem is solved now we can have .class{width:calc(25%-10px); margin-left:10px} . And with that we can have the flexibility of the % and the px precision.

Unfortunately calc is only implemented on Firefox 4 or later. Some documentation indicate that works even on IE9 but my test show differently.

To show the power of CSS3 calc I decided to build one simple CSS Framework. Clearly this framework has no piratical value today because only work on Firefox 4 or later. I build it to show how cool calc() is and to indicate how calc() can be used in the future.

The logic behind this framework:

It is one to twelve column framework. The margin(gutter) is 10px you can change it if you like. You can put px, em, % in the default container(like 960px or 73% or 50em)