4 ms·

The 1KB CSS Grid

47 points by chris24 17y ago

proee 17y ago
I've been using the 960.gs for a while now and really find it efficient. At first I was critical of such systems but the ability to reuse css classes is great and it's a nice having a starting point for new site layouts.
- antidaily 17y ago
  and 960.gs comes with photoshop and fireworks templates with guides already setup.
sosuke 17y ago
My only issue with the CSS from this is on .column it specifies the display as inline and then with another class sets the width. I can't remember right now but I had particular issues when trying to do the same thing a year or so ago and it turns out that its not W3 spec. Without the inner p tag creating a display block element the grid breaks down. In short display inline elements cannot by themselves have width assigned to them. http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#inline-formatting http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#inl...
zackham 17y ago
I suppose this has its place for simple fixed width designs, but when you need something more flexible I love YUI grids (which they seem to be responding to with this simpler grids css)
wmeredith 17y ago
No comment on the grid, really, but that's one gorgeous GUI.
- fno 17y ago
  I have to disagree, the font looks terrible for me (Windows XP, Opera). Maybe he forgot to use a good fallback font?
erlanger 17y ago
/* ================ */ /* = The 1Kb Grid = */ /* 12 columns, 60 pixels each, with 20 pixel gutter */ /* ================ */ /* Enjoy your tableless layout that acts like a table! */ .grid_1 { width:60px; } .grid_2 { width:140px; } .grid_3 { width:220px; } .grid_4 { width:300px; } .grid_5 { width:380px; } .grid_6 { width:460px; } .grid_7 { width:540px; } .grid_8 { width:620px; } .grid_9 { width:700px; } .grid_10 { width:780px; } .grid_11 { width:860px; } .grid_12 { width:940px; } .column { margin: 0 10px; overflow: hidden; /* Bad call */ float: left; display: inline; /* float: left implies display: block */ } .row { width: 960px; margin: 0 auto; overflow: hidden; /* Bad call */ } .row .row { margin: 0 -10px; width: auto; display: inline-block; /* Not well-supported */ }

47 points by chris24 17y ago

proee 17y ago

I've been using the 960.gs for a while now and really find it efficient. At first I was critical of such systems but the ability to reuse css classes is great and it's a nice having a starting point for new site layouts.

antidaily 17y ago
and 960.gs comes with photoshop and fireworks templates with guides already setup.

sosuke 17y ago

My only issue with the CSS from this is on .column it specifies the display as inline and then with another class sets the width. I can't remember right now but I had particular issues when trying to do the same thing a year or so ago and it turns out that its not W3 spec. Without the inner p tag creating a display block element the grid breaks down. In short display inline elements cannot by themselves have width assigned to them. http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#inline-formatting http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#inl...

zackham 17y ago

I suppose this has its place for simple fixed width designs, but when you need something more flexible I love YUI grids (which they seem to be responding to with this simpler grids css)

wmeredith 17y ago

No comment on the grid, really, but that's one gorgeous GUI.

fno 17y ago
I have to disagree, the font looks terrible for me (Windows XP, Opera). Maybe he forgot to use a good fallback font?

erlanger 17y ago

/* ================ */ /* = The 1Kb Grid = */ /* 12 columns, 60 pixels each, with 20 pixel gutter */ /* ================ */ /* Enjoy your tableless layout that acts like a table! */ .grid_1 { width:60px; } .grid_2 { width:140px; } .grid_3 { width:220px; } .grid_4 { width:300px; } .grid_5 { width:380px; } .grid_6 { width:460px; } .grid_7 { width:540px; } .grid_8 { width:620px; } .grid_9 { width:700px; } .grid_10 { width:780px; } .grid_11 { width:860px; } .grid_12 { width:940px; } .column { margin: 0 10px; overflow: hidden; /* Bad call */ float: left; display: inline; /* float: left implies display: block */ } .row { width: 960px; margin: 0 auto; overflow: hidden; /* Bad call */ } .row .row { margin: 0 -10px; width: auto; display: inline-block; /* Not well-supported */ }