5 ms·

A minimal CSS layout framework

60 points by peterlind 15y ago

collypops 15y ago
This is very similar to a minimal grid system I developed a couple of years back, but I define the fractions on the child elements, rather than the parent, eliminating the need for extra classes. I don't make any assumptions about margins, but you could easily apply border-box and padding to the columns (like Ingrid does). I really like that border-box is picking up support. I find it a much easier way to think about the box model, because I find it applies well to UI development in HTML (especially on mobile devices like iPads). GitHub Project: https://github.com/colingourlay/frak https://github.com/colingourlay/frak Demo: http://colingourlay.github.com/frak/ http://colingourlay.github.com/frak/
- XLcommerce 15y ago
  border-box is the only sane way to work with boxes... it's the way things should have been from the start. The mental gymnastics involved in box layout is so unnecessary :(
facorreia 15y ago
s/who's/whose
zalew 15y ago
relevant http://1kbgrid.com/ http://1kbgrid.com/
- firefoxman1 15y ago
  My favorite one. Really easy to use.
Yaggo 15y ago
I'm not big fan of CSS frameworks but could actually try this one. Like the lightweight approach + storybook association.
gazrogers 15y ago
I think the .unit class could be done away with if he used .ingrid > * in its place. Of course, that might mean rewriting some of the CSS to account for the change in specificity in that rule.
- jordanlev 15y ago
  I believe this would have performance implications (css selectors are read "backwards" by browsers, so this would mean every element on the page is examined to see if it's inside a .ingrid class). Not always, but definitely could for a large/complex page, and since this is a framework that will be used in all sorts of situations it's best that the author stays on the conservative side.
- deleted 15y ago
  [deleted]
shortformblog 15y ago
Be sure to resize your window when trying this out. This is a fluid layout in every sense.
- mladenkovacevic 15y ago
  I got a little choked up when I did this and saw the fluidity. It was beautiful.
vladocar 15y ago
Ultra minimal: http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html http://www.vcarrer.com/2009/06/1-line-css-grid-framework.htm...
dutchbrit 15y ago
I'd consider including HTML5 Boilerplate's JS in the demo html.
huckfinnaafb 15y ago
Some issues... Even using the grid normally, it ends up using more horizontal space than on the viewport, forcing a horizontal scrollbar (Chrome 18). Another problem: setting max-widths on units. Any proceeding units are handicapped by this and often just leave empty space to the right. I also don't like the presence of three sets of classes when two would be appropriate. "ingrid" as the container, and "span-x" for each column division. And this is unavoidable, as you need to define "in-[parts]" in the container to even use the span-x classes. I understand that it's less work if you stick to equal parts, but this is not the majority use case in my experience. I find the naming scheme awkward. "in-twos" and "in-thirds" instead of "in-halves" or "in-threes". Keep it consistent. --- All in all, I wouldn't recommend this to my mother. I use Nicole Sullivan's snippet in her github project, https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/blob/master/core/grid/... (demo: http://oocss.org/grids_docs.html http://oocss.org/grids_docs.html) And it's been damn bullet proof, being used in production code.
riffplay 15y ago
Is this released under a license? I'm reluctant to use code which hasn't been.

60 points by peterlind 15y ago

This is very similar to a minimal grid system I developed a couple of years back, but I define the fractions on the child elements, rather than the parent, eliminating the need for extra classes. I don't make any assumptions about margins, but you could easily apply border-box and padding to the columns (like Ingrid does). I really like that border-box is picking up support. I find it a much easier way to think about the box model, because I find it applies well to UI development in HTML (especially on mobile devices like iPads). GitHub Project: https://github.com/colingourlay/frak https://github.com/colingourlay/frak Demo: http://colingourlay.github.com/frak/ http://colingourlay.github.com/frak/

XLcommerce 15y ago
border-box is the only sane way to work with boxes... it's the way things should have been from the start. The mental gymnastics involved in box layout is so unnecessary :(

facorreia 15y ago

s/who's/whose

zalew 15y ago

relevant http://1kbgrid.com/ http://1kbgrid.com/

firefoxman1 15y ago
My favorite one. Really easy to use.

Yaggo 15y ago

I'm not big fan of CSS frameworks but could actually try this one. Like the lightweight approach + storybook association.

gazrogers 15y ago

I think the .unit class could be done away with if he used .ingrid > * in its place. Of course, that might mean rewriting some of the CSS to account for the change in specificity in that rule.

jordanlev 15y ago
I believe this would have performance implications (css selectors are read "backwards" by browsers, so this would mean every element on the page is examined to see if it's inside a .ingrid class). Not always, but definitely could for a large/complex page, and since this is a framework that will be used in all sorts of situations it's best that the author stays on the conservative side.
deleted 15y ago
[deleted]

shortformblog 15y ago

Be sure to resize your window when trying this out. This is a fluid layout in every sense.

mladenkovacevic 15y ago
I got a little choked up when I did this and saw the fluidity. It was beautiful.

vladocar 15y ago

Ultra minimal: http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html http://www.vcarrer.com/2009/06/1-line-css-grid-framework.htm...

dutchbrit 15y ago

I'd consider including HTML5 Boilerplate's JS in the demo html.

huckfinnaafb 15y ago

Some issues... Even using the grid normally, it ends up using more horizontal space than on the viewport, forcing a horizontal scrollbar (Chrome 18). Another problem: setting max-widths on units. Any proceeding units are handicapped by this and often just leave empty space to the right. I also don't like the presence of three sets of classes when two would be appropriate. "ingrid" as the container, and "span-x" for each column division. And this is unavoidable, as you need to define "in-[parts]" in the container to even use the span-x classes. I understand that it's less work if you stick to equal parts, but this is not the majority use case in my experience. I find the naming scheme awkward. "in-twos" and "in-thirds" instead of "in-halves" or "in-threes". Keep it consistent. --- All in all, I wouldn't recommend this to my mother. I use Nicole Sullivan's snippet in her github project, https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/blob/master/core/grid/... (demo: http://oocss.org/grids_docs.html http://oocss.org/grids_docs.html) And it's been damn bullet proof, being used in production code.

riffplay 15y ago

Is this released under a license? I'm reluctant to use code which hasn't been.