

A minimal CSS layout framework - peterlind
https://github.com/robertpiira/ingrid

======
collypops
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>

Demo: <http://colingourlay.github.com/frak/>

~~~
XLcommerce
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 :(

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

(demo: <http://oocss.org/grids_docs.html>)

And it's been damn bullet proof, being used in production code.

------
zalew
relevant <http://1kbgrid.com/>

~~~
firefoxman1
My favorite one. Really easy to use.

------
vladocar
Ultra minimal: [http://www.vcarrer.com/2009/06/1-line-css-grid-
framework.htm...](http://www.vcarrer.com/2009/06/1-line-css-grid-
framework.html)

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

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

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

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

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

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

------
facorreia
s/who's/whose

