{Carrer web log} ←

Foxy - CSS Framework

Wednesday, June 29, 2011 { 6 Comments }

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).

Demo1

Demo2

And some cats.


Download this project on GitHub

6 Responses to “Foxy - CSS Framework”

1. //  Matteo Balocco // 6/29/2011

   Did you try on IE9 with the -ms vendor prefix?
   
   (Nice, nice, nice project indeed! Kudos)
   
   Teo
   
   PS. Did you read the Lea Verou's posts about calc() and attr()?  

2. //  klkl // 6/29/2011

   Do you know you can mix % and px in all browsers, no calc needed, if you set box-sizing:border-box? Even IE8 supports it.  

3. //  Anonymous // 6/29/2011

   IE9 supports calc() without a prefix, but it only accepts simple calculations; therefore calc(100% - (2em + 24px)) doesn't work, but (100% - 44px) does. See my example here: http://thebookofcss3.com/wp-content/examples/css3_17-02.html  

4. //  Vladimir // 6/29/2011

   @Matteo: I didn't try with -ms vendor prefix. I did this Framework mounts back, this and other million framework that are still waiting ... I also did the UniGrid that we talk about with Davide (Folletto).
   
   @klkl: I actually did other framework with the "box" philosophy, but I hadn't time to publish it.
   
   @stopsatgreen: Thanks for the info and the demo, I was wrong, calc() works in IE9 in some cases.  

5. //  Adam Sanderson // 6/30/2011

   The calc property is neat, but have you looked at box-sizing? I wrote up a little article about using box sizing for layout.
   
   It will give you the same general effect, but works on all recent browsers.  

6. //  Vladimir // 6/30/2011

   @Adam: Thanks for the link, box-sizing is definitely something that I will consider in some of my future projects.  

Post a Comment

<< Home