15 ms·

Show HN: A simple lightweight CSS grid, not a bloated framework

134 points by thisisdallas 14y ago

sbarre 14y ago
This is really nice (I love the subtle steam off the coffee on the page!), but I feel that basic grids like this are so straightforward to implement that anyone can whip one up for their project if they want one. It's always good to have a template to start from like this, but I don't see it being much different than an on-the-fly one that I would throw together myself if I'm not using a framework.
- thisisdallas 14y ago
  Hey thanks for the kind words! I completely agree with everything said. I also think in a lot of cases, there might be some projects that require a difference in a grid, if one is being used so building a grid specifically for each project isn't always a bad thing to do. That's actually why I created this grid, to fit a specfic project of mine. I am picky and wanted something that I couldn't already find so I decided to build one and throw it up on github.
  - genwin 14y ago
    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.
  - sbarre 14y ago
    Absolutely! I commend you for sharing your work, big or small, and I hope people can benefit from this.
- bpatrianakos 14y ago
  True but this also helps a lot of people who aren't as comfortable with CSS layouts to better understand how grids work. I remember when I was green having one hell of a time understanding how to position elements in a grid and no tutorial really made the idea stick until I used a couple of grid frameworks and messed with them. So I think there's more benefit to this than you'd imagine and as a professional developer myself I actually haven't seen a grid implemented in this way before and it actually gave me a couple of ideas.
theallan 14y ago
Looks really nice. A nice base to built up from. Out of interest - what is the level of browser support? For example IE6/7/8?
- thisisdallas 14y ago
  Hey thanks! Right now, it works in IE8 and up.
envex 14y ago
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"?
- thisisdallas 14y ago
  There really wasn't a specific reason for the naming convention. Although adding "col-" to all of the columns allowed me to easily select every column using [class*='col-'].
  - envex 14y ago
    I just don't think I'm understanding when it comes to something like .col-2-12 & col-10-12
    - talmand 14y ago
      It signifies the number of columns and how many columns each section, or div, takes. In your example, the first section would take 2 columns out of twelve. The second section takes the remaining 10 columns. Or, col-3-12 & col-9-12; first section would take 3 columns out of twelve and the second takes the remaining nine. What I'm curious about is if doing something like this: col-2-12 & col-8-12. But I'm too lazy to download the css to see for myself.
    - ville 14y ago
      I had the same problem as it seems the convention isn't explained on the website. However as soon as I took a look at the code it became clear that the numbers represent fractions. .col-2-12 is a column that is 2/12 in width (same as 1/6) and .col-10-12 is 10/12, respectively.
- bung 14y ago
  also multiple class support like that only goes back so far
binarymax 14y ago
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 semantic tags (header, section, etc) in your example page and code snippets. Too many divs scattered everywhere makes it a bit difficult to read.
- kijin 14y ago
  > Very simple and lightweight, as advertised > perfect on IE8 > use HTML5 semantic tags (header, section, etc) You can only have two of the three things that you have on your wishlist. IE8 doesn't know how to apply CSS to HTML5 tags. This is typically fixed with html5shiv, a JavaScript library. But including html5shiv would make this grid less simple and less lightweight.
  - deleted 14y ago
    [deleted]
  - lazerwalker 14y ago
    Instead of including the entirety of html5shiv, it's almost no overhead to add in a shim just for the HTML5 semantic tags. Here's a snippet I've used on a number of production sites: https://gist.github.com/3915474 https://gist.github.com/3915474
deleted 14y ago
[deleted]
- thornofmight 14y ago
  The grid adds a base layout which you would then customize by adding classes and ids on top of the default grid classes. You can definitely adjust positions with pixel accuracy. The grid is useful because it helps with responsive web design: everything resizes and repositions when you change your browser size or use a mobile device to view the webpage.
- thoughtpalette 14y ago
  CSS Frameworks are not for beginners. They're geared at developers who need to hit the ground running on a website. I'd actually say to stay away from them until you've been doing front-end for awhile as the non-semantic naming conventions are not something beginners should be using. I'm sure you could adjust positions with specificity, but in my opinion, that goes against a Grid Frameworks purpose.
deleted 14y ago
[deleted]
daigoba66 14y ago
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: https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css https://github.com/ThisIsDallas/Simple-Grid/blob/master/simp...
emehrkay 14y ago
Looks good. Your #viewport div causes a strange error with having a horizontal scrollbar @ ~789px. Instead of using the margin-left, why not position it with left and top since it is already absolutely positioned? Edit: you can probably just change margin-left to left and create the same steam effect that is offscreen when the browser is too narrow
thornofmight 14y ago
Thanks! This looks great.
bmuon 14y ago
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/ http://yuilibrary.com/yui/docs/cssgrids/ Code: https://github.com/yui/yui3/blob/master/build/cssgrids/grids.css https://github.com/yui/yui3/blob/master/build/cssgrids/grids...
da_n 14y ago
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 because the default is non-permissive, even if the source code is open etc. Cheers.
pault 14y ago
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 tooltips and badges, etc.
- armageddon 14y ago
  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 style="position:relative"> col-1-2 <span style="border:1px solid blue;background:yellow;display:block;position:absolute;width:300px;height:50px;left:0;top:-55px">Hi there</span> </h3> The tooltips get cut off. :(
  - ncri 14y ago
    Maybe using display: 'inline-block' is a solution?
artursapek 14y ago
The most impressive part of this page to me is that way you animated the hot coffee mug.
- thisisdallas 14y ago
  Oh man I wish I could claim that I wrote that steam script but I don't know js that well. I'll try to find the original version that I worked off of and post it here.
  - aawc 14y ago
    Here: http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-smoke-effect-hot-coffee-tea-jquery-css/ http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-sm...
tharris0101 14y ago
Cool! There are a lot of times I'm building a quick and dirty site and this will be really helpful
petewailes 14y ago
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 love feedback on a project I've been working on: http://wail.es/opendaws/ http://wail.es/opendaws/ | HN thread: http://news.ycombinator.com/item?id=4669809 http://news.ycombinator.com/item?id=4669809
waynesutton 14y ago
Thanks for posting, this is great, simple CSS grid.
firefoxman1 14y ago
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. [1]http://1kbgrid.com http://1kbgrid.com
zaidf 14y ago
So I am trying extremely hard to convince myself that these css grids are much better than html tables. Yet, when I see projects like these that make the act of making two columns of arbitrary widths such a big deal, I find it hard to convince myself that css for your basic page container is worth the hacks. I really want to be convinced otherwise because I'd like to believe if so many people are for it, I am obviously not seeing something they can. So dear HN, please help me convince myself that CSS and its hacks are superior than tables. My mind's first objection: "to make a simple two column layout that would typically take a few lines with the table tag and be compatible across browsers. The same thing in css would require the use of an open-source grid or bunch of hacks and testing--taking much more effort than the table tag". How do I respond to this objection?
- tocomment 14y ago
  That's an excellent point. I actually don't remember why we all moved away from tables (it was before my time). Do you know what was so bad about them?
  - Goronmon 14y ago
    People were using tables as a way to control the layout of pages.
  - pbhjpbhj 14y ago
    Tables carry semantic weight. The web started a move to being all about semantics, machine readability and interpretation of pages by robots (like Googlebot). Personally I threw my lot in with XHTML and started moving to XFN and other microformats. One of the big things with tables was screenreaders. Screenreaders assume a table is tabular data and treat it as such leading to a terrible UX. Where I am, a business that doesn't make reasonable changes to accommodate disabled users is acting unlawfully. Screenreaders basically amplified the error of using semantic markup where non-functional style is intended. Semantics was the in thing for a while and separation of function and style pushed people towards using pure [X|]HTML with no extraneous tags and all styling performed outside the markup via CSS files. Tables for tabular data only. CSS promised to bring table-layouts to 'display:' in CSS1 but IIRC MSIE put the kibosh on that one [that's en-gb euphemism for 'stopped it'] and indeed it's only just become fully supported in IE9 I think. Markup philoshopies aside it was a real bitch trying to edit tables or change layout with tables without decent visual layout tools. You'd have a page-table (for body centering), then that would have a table for a main grid, then you'd have a table for the visual header, a table for the menu, a table for the ads column(s), tables for the footers, tables to put pull out quotes in, tables for aligning images. All those tables made page markup significant at a time when home users didn't have ADSL connection yet. You'd end up with nests of tables easily 10 deep on some sites and working out in the markup what was happening in such a site was a nightmare. In contrast a well CSS formatted page is (was?) slim, the content is simple and changing layout is just a matter of altering the CSS and not re-writing the whole page. It became a point of pride for many to avoid frames, a way to show one knows ones game. For a while it seemed that as no really needs to wrangle with IE6 all the fun would have gone out of CSS layout ... but then we got iPad and a million different android resolutions to worry about and so again there is pressure to use liquid responsive layouts where in the interim things have gotten very much focussed on pixel-perfect presentation. That all said I was having the same thought the other day - that CSS grids are starting to look a bit messy and that I'm ready for the next iteration.
fourstar 14y ago
Just what I've been looking for. Love it. Thanks.
corny 14y ago
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: http://css-tricks.com/dont-overthink-it-grids/ http://css-tricks.com/dont-overthink-it-grids/
- thisisdallas 14y ago
  Hey corny, if you check out the description on the github page you will see that I gave credit to Chris and his post on css-tricks. I'm a big fan of Chris and that post was definitely the inspiration for the grid.
JulianWasTaken 14y ago
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 bleeds over to the next column.
andrewkkirk 14y ago
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)?
nshankar 14y ago
It is not responsive down to the images, so nothing much of use now.
- fourstar 14y ago
  Seriously? This is so trivial to add in your media query yourself. img { max-height: 100%; max-width: 100%; min-width: 400px; min-height: 300px; } http://jsfiddle.net/N8GKd/ http://jsfiddle.net/N8GKd/ -- resize the window.
  - Bootvis 14y ago
    Imgur doesn't like the deeplinking, so click this link first: http://i.imgur.com/kyOq3.jpg http://i.imgur.com/kyOq3.jpg and then the jsfiddle link provided by fourstar.
    - fourstar 14y ago
      Ah, weird. Thanks.
bicknergseng 14y ago
Not to be a stickler, but you're missing a few semicolons and a bracket at the end in the download.
exodust 14y ago
I'm not a fan (nor hater) of css grids because I prefer to make the html foundations for greater accuracy and control over the build. It's not rocket science, it's html and css! Second, you get a quality custom structure according to the spec of the website. You've placed HTML in specific configurations with ids and classes of your choosing, and the result can go beyond the grid! life outside the grid is good, a few dust storms and heatwaves, a bit of crime in the streets.

134 points by thisisdallas 14y ago

This is really nice (I love the subtle steam off the coffee on the page!), but I feel that basic grids like this are so straightforward to implement that anyone can whip one up for their project if they want one. It's always good to have a template to start from like this, but I don't see it being much different than an on-the-fly one that I would throw together myself if I'm not using a framework.

thisisdallas 14y ago
Hey thanks for the kind words! I completely agree with everything said. I also think in a lot of cases, there might be some projects that require a difference in a grid, if one is being used so building a grid specifically for each project isn't always a bad thing to do. That's actually why I created this grid, to fit a specfic project of mine. I am picky and wanted something that I couldn't already find so I decided to build one and throw it up on github.
- genwin 14y ago
  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.
- sbarre 14y ago
  Absolutely! I commend you for sharing your work, big or small, and I hope people can benefit from this.
bpatrianakos 14y ago
True but this also helps a lot of people who aren't as comfortable with CSS layouts to better understand how grids work. I remember when I was green having one hell of a time understanding how to position elements in a grid and no tutorial really made the idea stick until I used a couple of grid frameworks and messed with them. So I think there's more benefit to this than you'd imagine and as a professional developer myself I actually haven't seen a grid implemented in this way before and it actually gave me a couple of ideas.

theallan 14y ago

Looks really nice. A nice base to built up from. Out of interest - what is the level of browser support? For example IE6/7/8?

thisisdallas 14y ago
Hey thanks! Right now, it works in IE8 and up.

envex 14y ago

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"?

thisisdallas 14y ago
There really wasn't a specific reason for the naming convention. Although adding "col-" to all of the columns allowed me to easily select every column using [class*='col-'].
- envex 14y ago
  I just don't think I'm understanding when it comes to something like .col-2-12 & col-10-12
  - talmand 14y ago
    It signifies the number of columns and how many columns each section, or div, takes. In your example, the first section would take 2 columns out of twelve. The second section takes the remaining 10 columns. Or, col-3-12 & col-9-12; first section would take 3 columns out of twelve and the second takes the remaining nine. What I'm curious about is if doing something like this: col-2-12 & col-8-12. But I'm too lazy to download the css to see for myself.
  - ville 14y ago
    I had the same problem as it seems the convention isn't explained on the website. However as soon as I took a look at the code it became clear that the numbers represent fractions. .col-2-12 is a column that is 2/12 in width (same as 1/6) and .col-10-12 is 10/12, respectively.
bung 14y ago
also multiple class support like that only goes back so far

binarymax 14y ago

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 semantic tags (header, section, etc) in your example page and code snippets. Too many divs scattered everywhere makes it a bit difficult to read.

kijin 14y ago
> Very simple and lightweight, as advertised > perfect on IE8 > use HTML5 semantic tags (header, section, etc) You can only have two of the three things that you have on your wishlist. IE8 doesn't know how to apply CSS to HTML5 tags. This is typically fixed with html5shiv, a JavaScript library. But including html5shiv would make this grid less simple and less lightweight.
- deleted 14y ago
  [deleted]
- lazerwalker 14y ago
  Instead of including the entirety of html5shiv, it's almost no overhead to add in a shim just for the HTML5 semantic tags. Here's a snippet I've used on a number of production sites: https://gist.github.com/3915474 https://gist.github.com/3915474

deleted 14y ago

[deleted]

thornofmight 14y ago
The grid adds a base layout which you would then customize by adding classes and ids on top of the default grid classes. You can definitely adjust positions with pixel accuracy. The grid is useful because it helps with responsive web design: everything resizes and repositions when you change your browser size or use a mobile device to view the webpage.
thoughtpalette 14y ago
CSS Frameworks are not for beginners. They're geared at developers who need to hit the ground running on a website. I'd actually say to stay away from them until you've been doing front-end for awhile as the non-semantic naming conventions are not something beginners should be using. I'm sure you could adjust positions with specificity, but in my opinion, that goes against a Grid Frameworks purpose.

deleted 14y ago

[deleted]

daigoba66 14y ago

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: https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css https://github.com/ThisIsDallas/Simple-Grid/blob/master/simp...

emehrkay 14y ago

Looks good. Your #viewport div causes a strange error with having a horizontal scrollbar @ ~789px. Instead of using the margin-left, why not position it with left and top since it is already absolutely positioned? Edit: you can probably just change margin-left to left and create the same steam effect that is offscreen when the browser is too narrow

thornofmight 14y ago

Thanks! This looks great.

bmuon 14y ago

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/ http://yuilibrary.com/yui/docs/cssgrids/ Code: https://github.com/yui/yui3/blob/master/build/cssgrids/grids.css https://github.com/yui/yui3/blob/master/build/cssgrids/grids...

da_n 14y ago

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 because the default is non-permissive, even if the source code is open etc. Cheers.

pault 14y ago

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 tooltips and badges, etc.

armageddon 14y ago
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 style="position:relative"> col-1-2 <span style="border:1px solid blue;background:yellow;display:block;position:absolute;width:300px;height:50px;left:0;top:-55px">Hi there</span> </h3> The tooltips get cut off. :(
- ncri 14y ago
  Maybe using display: 'inline-block' is a solution?

artursapek 14y ago

The most impressive part of this page to me is that way you animated the hot coffee mug.

thisisdallas 14y ago
Oh man I wish I could claim that I wrote that steam script but I don't know js that well. I'll try to find the original version that I worked off of and post it here.
- aawc 14y ago
  Here: http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-smoke-effect-hot-coffee-tea-jquery-css/ http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-sm...

tharris0101 14y ago

Cool! There are a lot of times I'm building a quick and dirty site and this will be really helpful

petewailes 14y ago

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 love feedback on a project I've been working on: http://wail.es/opendaws/ http://wail.es/opendaws/ | HN thread: http://news.ycombinator.com/item?id=4669809 http://news.ycombinator.com/item?id=4669809

waynesutton 14y ago

Thanks for posting, this is great, simple CSS grid.

firefoxman1 14y ago

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. [1]http://1kbgrid.com http://1kbgrid.com

zaidf 14y ago

So I am trying extremely hard to convince myself that these css grids are much better than html tables. Yet, when I see projects like these that make the act of making two columns of arbitrary widths such a big deal, I find it hard to convince myself that css for your basic page container is worth the hacks. I really want to be convinced otherwise because I'd like to believe if so many people are for it, I am obviously not seeing something they can. So dear HN, please help me convince myself that CSS and its hacks are superior than tables. My mind's first objection: "to make a simple two column layout that would typically take a few lines with the table tag and be compatible across browsers. The same thing in css would require the use of an open-source grid or bunch of hacks and testing--taking much more effort than the table tag". How do I respond to this objection?

tocomment 14y ago
That's an excellent point. I actually don't remember why we all moved away from tables (it was before my time). Do you know what was so bad about them?
- Goronmon 14y ago
  People were using tables as a way to control the layout of pages.
- pbhjpbhj 14y ago
  Tables carry semantic weight. The web started a move to being all about semantics, machine readability and interpretation of pages by robots (like Googlebot). Personally I threw my lot in with XHTML and started moving to XFN and other microformats. One of the big things with tables was screenreaders. Screenreaders assume a table is tabular data and treat it as such leading to a terrible UX. Where I am, a business that doesn't make reasonable changes to accommodate disabled users is acting unlawfully. Screenreaders basically amplified the error of using semantic markup where non-functional style is intended. Semantics was the in thing for a while and separation of function and style pushed people towards using pure [X|]HTML with no extraneous tags and all styling performed outside the markup via CSS files. Tables for tabular data only. CSS promised to bring table-layouts to 'display:' in CSS1 but IIRC MSIE put the kibosh on that one [that's en-gb euphemism for 'stopped it'] and indeed it's only just become fully supported in IE9 I think. Markup philoshopies aside it was a real bitch trying to edit tables or change layout with tables without decent visual layout tools. You'd have a page-table (for body centering), then that would have a table for a main grid, then you'd have a table for the visual header, a table for the menu, a table for the ads column(s), tables for the footers, tables to put pull out quotes in, tables for aligning images. All those tables made page markup significant at a time when home users didn't have ADSL connection yet. You'd end up with nests of tables easily 10 deep on some sites and working out in the markup what was happening in such a site was a nightmare. In contrast a well CSS formatted page is (was?) slim, the content is simple and changing layout is just a matter of altering the CSS and not re-writing the whole page. It became a point of pride for many to avoid frames, a way to show one knows ones game. For a while it seemed that as no really needs to wrangle with IE6 all the fun would have gone out of CSS layout ... but then we got iPad and a million different android resolutions to worry about and so again there is pressure to use liquid responsive layouts where in the interim things have gotten very much focussed on pixel-perfect presentation. That all said I was having the same thought the other day - that CSS grids are starting to look a bit messy and that I'm ready for the next iteration.

fourstar 14y ago

Just what I've been looking for. Love it. Thanks.

corny 14y ago

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: http://css-tricks.com/dont-overthink-it-grids/ http://css-tricks.com/dont-overthink-it-grids/

thisisdallas 14y ago
Hey corny, if you check out the description on the github page you will see that I gave credit to Chris and his post on css-tricks. I'm a big fan of Chris and that post was definitely the inspiration for the grid.

JulianWasTaken 14y ago

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 bleeds over to the next column.

andrewkkirk 14y ago

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)?

nshankar 14y ago

It is not responsive down to the images, so nothing much of use now.

fourstar 14y ago
Seriously? This is so trivial to add in your media query yourself. img { max-height: 100%; max-width: 100%; min-width: 400px; min-height: 300px; } http://jsfiddle.net/N8GKd/ http://jsfiddle.net/N8GKd/ -- resize the window.
- Bootvis 14y ago
  Imgur doesn't like the deeplinking, so click this link first: http://i.imgur.com/kyOq3.jpg http://i.imgur.com/kyOq3.jpg and then the jsfiddle link provided by fourstar.
  - fourstar 14y ago
    Ah, weird. Thanks.

bicknergseng 14y ago

Not to be a stickler, but you're missing a few semicolons and a bracket at the end in the download.

exodust 14y ago

I'm not a fan (nor hater) of css grids because I prefer to make the html foundations for greater accuracy and control over the build. It's not rocket science, it's html and css! Second, you get a quality custom structure according to the spec of the website. You've placed HTML in specific configurations with ids and classes of your choosing, and the result can go beyond the grid! life outside the grid is good, a few dust storms and heatwaves, a bit of crime in the streets.