Simple-Grid on HackerShow

Dev tools

css grid system

SHOW HN2012

A simple lightweight CSS grid, not a bloated framework

Shown by thisisdallas on Oct 18, 2012. Click the card to turn it over.

134points

61comments

#146of 1,677 in 2012

Top 9%of 2012 by points

How HN took it

DebatedReal support and real criticism

10 positive, 11 neutral or asking, 2 mixed, 12 critical, out of 35 comments about the project. Thread score -0.06.

Design: 4 for, 3 againstExecution: 0 for, 6 againstIdea: 2 for, 3 against

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

Lightweight and simple, easy to build on
From 3 comments
- I really like this. Very simple and lightweight, as advertised. Not perfect on IE8 but comparable with other frameworks that have too much going on. One suggestion - use HTML5…
  binarymax on HN
- This is really useful as a template for building a CSS grid system. I love that it's not a "framework" and that the CSS itself is very simple and straight-forward to build upon:…
  daigoba66 on HN
- Thanks for posting, this is great, simple CSS grid.
  waynesutton on HN
Columns stack on resize
From 1 comment
- Not all of us are skilled at the front-end. I love your grid, especially how columns stack on resize, and wouldn't be able to just whip one up myself. The steam is cool too.
  genwin on HN

Not responsive down to images
From 1 comment
- It is not responsive down to the images, so nothing much of use now.
  nshankar on HN
overflow hidden clears floats and clips tooltips
From 2 comments
- Nice, but I see you are using overflow: hidden on grid containers to clear the floats. This can be a pain when implementing absolutely and relatively positioned elements like…
  pault on HN
- Good catch. Edit any of the H3 elements in any of the gray rows and simulate a tooltip: <h3>col-1-1</h3> Replace it in Firebug with a basic tooltip: <h3…
  armageddon on HN
Breaks on older iPad and Chrome for iOS
From 1 comment
- On Chrome for iOS latest on an iPad 1 this doesn't appear to render properly. There's a gutter of scrollable space on the right side and the headers in the 4 ad copy columns…
  JulianWasTaken on HN
Only works in IE8 and up
From 1 comment
- Hey thanks! Right now, it works in IE8 and up.
  thisisdallas on HN

Use HTML5 semantic tags in examples
From 1 comment
- I really like this. Very simple and lightweight, as advertised. Not perfect on IE8 but comparable with other frameworks that have too much going on. One suggestion - use HTML5…
  binarymax on HN
Clarify license
From 1 comment
- Very nice, fantastic work and thanks for putting it out there. Is there any license or usage info (WTFPL)? I read recently that if there is no license you shouldn't touch it…
  da_n on HN
Document the column naming convention
From 1 comment
- I just don't think I'm understanding when it comes to something like .col-2-12 & col-10-12
  envex on HN

Why fluid instead of fixed widths
From 1 comment
- Interesting. Have you thought about using the micro clearfix instead of overflow hidden to sort the columns? Also, what made you choose to go fluid instead of fixed? Also, would…
  petewailes on HN
Advantage over Bootstrap or Skeleton
From 1 comment
- What's the advantage of using this grid system, instead of a framework that contains this functionality and more (such as Twitter Bootstrap or Skeleton)?
  andrewkkirk on HN
Why the col-x-y naming convention
From 1 comment
- Looks good, I'm just not a fan of the naming conventions on the columns. Why did you decide to go with ".col-1-2" over something like (foundation's) ".one.column"?
  envex on HN

YUI3 Grids
From 1 comment
- The same lightweight pattern has been used in YUI3 Grids for a number of years and it even works on IE6. User guide: http://yuilibrary.com/yui/docs/cssgrids/ Code:…
  bmuon on HN
1KB grid
From 1 comment
- I love the goal of keeping it lightweight. This is very similar to my grid of choice, the 1KB grid[1] which I like because you can adjust the number of columns and width in px.…
  firefoxman1 on HN
Twitter Bootstrap and Skeleton
From 1 comment
- What's the advantage of using this grid system, instead of a framework that contains this functionality and more (such as Twitter Bootstrap or Skeleton)?
  andrewkkirk on HN
Foundation
From 1 comment
- Looks good, I'm just not a fan of the naming conventions on the columns. Why did you decide to go with ".col-1-2" over something like (foundation's) ".one.column"?
  envex on HN
CSS-Tricks dont-overthink-it grids
From 1 comment
- I've been using this grid technique for a little while. It's really great. I was disappointed that the original author wasn't credited though. Compare with:…
  corny on HN