Foxy - CSS Framework

Wednesday, June 29, 2011 { 6 Comments }

Responses to “Foxy - CSS Framework”

One of the coolest new stuff 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).