HN Explorer

7 comments

[ 3.8 ms ] story [ 25.5 ms ] thread
proee
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
and 960.gs comes with photoshop and fireworks templates with guides already setup.
sosuke
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...

zackham
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
No comment on the grid, really, but that's one gorgeous GUI.
fno
I have to disagree, the font looks terrible for me (Windows XP, Opera). Maybe he forgot to use a good fallback font?
erlanger 

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