The 1KB CSS Grid

Posted by chris24 on Tuesday August 11, 2009 @04:36PM
from the 1kbgrid.com dept.

http://www.1kbgrid.com/

( 7 comments | 47 points | on HN )

Re:The 1KB CSS Grid by sosuke on Tuesday August 11, 2009 @05:59PM (#756544)

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#inl...

[ Parent | on HN ]

Re:The 1KB CSS Grid by proee on Tuesday August 11, 2009 @05:11PM (#756430)

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.

[ Parent | on HN ]

Re:The 1KB CSS Grid by antidaily on Tuesday August 11, 2009 @07:44PM (#756803)

and 960.gs comes with photoshop and fireworks templates with guides already setup.

[ Parent | on HN ]

Re:The 1KB CSS Grid by wmeredith on Tuesday August 11, 2009 @10:21PM (#757107)

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

[ Parent | on HN ]

Re:The 1KB CSS Grid by fno on Wednesday August 12, 2009 @03:02AM (#757505)

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

[ Parent | on HN ]

Re:The 1KB CSS Grid by zackham on Tuesday August 11, 2009 @07:41PM (#756801)

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)

[ Parent | on HN ]

Re:The 1KB CSS Grid by erlanger on Tuesday August 11, 2009 @11:10PM (#757169)

  /* ================ */
  /* = 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 */
  }

[ Parent | on HN ]