Foxy - CSS Framework
Join the DZone community and get the full member experience.
Join For FreeOne 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)
Let's take one part of the Framework:
.d5{ width:calc(100%/5 - 10px); margin-left:10px} Meaning we have
100%/5 = 20% column with 10px margin or you can build 5 columns inside
100%.
.dx5{calc(100% - 100%/5 - 10px); margin-left:10px} is the second part of
the d5 meaning you have 100% - 20% = 80% with 10px margin.
Very simple rule to remember .d5 + .dx5 = 100% or .d7 + dx7 = 100%
Here is example of some grid combination (Firefox only).
Demo1
Demo2
And some cats.
Opinions expressed by DZone contributors are their own.
Comments