A minimal CSS layout framework | Hacker News Reader

A minimal CSS layout framework

github.com

60 pointspeterlind14 comments

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/

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

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

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

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

relevant http://1kbgrid.com/

My favorite one. Really easy to use.

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

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.

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.

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

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

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

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

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

s/who's/whose

Reply on news.ycombinator.com