

Foxy - CSS3 Framework: Using CSS3 Calc()  - vladocar
https://github.com/vladocar/Foxy-CSS-Framework

======
huckfinnaafb
On the blog...

" _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._ "

This was never a problem if you separated your layout markup from your content
markup, like so.

    
    
        <div style="float:left;width:50%">
            <div style="margin:12px">Hello, world</div>
        </div>
        <div style="float:left;width:50%">
            <div style="margin:12px">Hello, world</div>
        </div>
    

Bear in mind that calc() has terrible support
[<http://caniuse.com/#search=calc>]. Box-sizing fixes the problems addressed
by this "framework" without deferring to an expensive and inappropriately used
calc() property.

I see no reason why anyone would use this over a grid model such as this
[[https://github.com/stubbornella/oocss/blob/master/core/grid/...](https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css)].

~~~
silvestrov
Extra <div>s just to control margins looks very much like having to add markup
just to do layout, i.e. mixing markup with layout. Your nested div has no
semantic meaning, they are only present for layout.

~~~
huckfinnaafb
<div>s are semantically neutral so while it is extra markup, it's not like
they had any semantic meaning in the first place. The relevancy of semantics
is a can of worms in of itself...

If you're not interested in separating layout markup from content markup, the
box-sizing property might be for you.

But I'd certainly avoid using calc()...

