6 ms·

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 mar

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 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/grids.css https://github.com/stubbornella/oocss/blob/master/core/grid/...].

silvestrov 15y ago
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 15y ago
  <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()...
JonnieCache 15y ago
It's a CSS3 demo. It says CSS3 in the title. I don't think lack of support is much of a criticism.
vladocar 15y ago
Hi I'm an author of this framework. I must point that this is just experimental framework it works only in Firefox4 and later. Back in 2008 I build Malo - CSS Framework http://code.google.com/p/malo/ http://code.google.com/p/malo/ that already is using the solution that you pointed (div inside div). Malo works even in IE 5.5. The problem of this solution is that you have extra divs or paragraphs or you mast build complete typographical solution like I did with Emastic http://code.google.com/p/emastic/ http://code.google.com/p/emastic/. Other solution is to have % margins(gutter) Example: width:24% and margin-left:1% total 25%. This is good solution if you have fixed container like 960px or 1000px. So if we have 1000px container is very easy yo calculate that 1% will be 10px. But what happens if we want to have 80% container? Meaning 80% of any browser size. There is no way that we can calculate that. That is calc() is cool. We can do calc(25% -10px) margin-left:10px Here is working demo: http://dl.dropbox.com/u/2111778/Foxy-CSS-Framework/calc1.html http://dl.dropbox.com/u/2111778/Foxy-CSS-Framework/calc1.htm... . The concept is: Fluid % main container (it can be also fixed), fluid % columns, fixed px margin(gutter). I repeat this is just experimental framework with the goal to show potential use of the CSS3 calc() function. I think that the calc() function has huge potential for cool layouts in the future..
- pornel 15y ago
  Are you aware that you can achieve visually identical effect with `box-sizing`? (it can change "W3C" box model to "quirks" box model on any container) width: 25%; padding: 10px; border: 5px; box-sizing:border-box; gives same effect as: width: calc(25%-10px-5px); padding: 10px; border: 5px; Also, it would be nice if your framework had at least half-decent fallback for browsers without calc() (I think `width:24%` would be better than leaving it auto).
  - netghost 15y ago
    For anyone interested, I actually had written up an article on box-sizing yesterday: http://monkeyandcrow.com/blog/splitting_the_difference/ http://monkeyandcrow.com/blog/splitting_the_difference/ There's an example illustrating pornel's point.
  - 15y ago
pornel 15y ago
If you swap margin for padding, then: box-sizing: border-box; magically solves this problem and already works in all browsers (including IE since v8).

silvestrov 15y ago

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 15y ago
<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()...

JonnieCache 15y ago

It's a CSS3 demo. It says CSS3 in the title. I don't think lack of support is much of a criticism.

vladocar 15y ago

Hi I'm an author of this framework. I must point that this is just experimental framework it works only in Firefox4 and later. Back in 2008 I build Malo - CSS Framework http://code.google.com/p/malo/ http://code.google.com/p/malo/ that already is using the solution that you pointed (div inside div). Malo works even in IE 5.5. The problem of this solution is that you have extra divs or paragraphs or you mast build complete typographical solution like I did with Emastic http://code.google.com/p/emastic/ http://code.google.com/p/emastic/. Other solution is to have % margins(gutter) Example: width:24% and margin-left:1% total 25%. This is good solution if you have fixed container like 960px or 1000px. So if we have 1000px container is very easy yo calculate that 1% will be 10px. But what happens if we want to have 80% container? Meaning 80% of any browser size. There is no way that we can calculate that. That is calc() is cool. We can do calc(25% -10px) margin-left:10px Here is working demo: http://dl.dropbox.com/u/2111778/Foxy-CSS-Framework/calc1.html http://dl.dropbox.com/u/2111778/Foxy-CSS-Framework/calc1.htm... . The concept is: Fluid % main container (it can be also fixed), fluid % columns, fixed px margin(gutter). I repeat this is just experimental framework with the goal to show potential use of the CSS3 calc() function. I think that the calc() function has huge potential for cool layouts in the future..

pornel 15y ago
Are you aware that you can achieve visually identical effect with `box-sizing`? (it can change "W3C" box model to "quirks" box model on any container) width: 25%; padding: 10px; border: 5px; box-sizing:border-box; gives same effect as: width: calc(25%-10px-5px); padding: 10px; border: 5px; Also, it would be nice if your framework had at least half-decent fallback for browsers without calc() (I think `width:24%` would be better than leaving it auto).
- netghost 15y ago
  For anyone interested, I actually had written up an article on box-sizing yesterday: http://monkeyandcrow.com/blog/splitting_the_difference/ http://monkeyandcrow.com/blog/splitting_the_difference/ There's an example illustrating pornel's point.
- 15y ago

pornel 15y ago

If you swap margin for padding, then: box-sizing: border-box; magically solves this problem and already works in all browsers (including IE since v8).