

Show HN: A simple lightweight CSS grid, not a bloated framework - thisisdallas
http://thisisdallas.github.com/Simple-Grid/

======
zaidf
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?

~~~
blauwbilgorgel
It isn't about which is easiest to implement. No one said CSS(3) was super-
easy. This discussion is also very old by now. I am surprised to bump into
this view again.

A CSS layout is better than a table-based layout, due to:

\- Maintenance: Maintaining or redesigning a table-based layout is very
cumbersome, especially with nested tables, because:

\- Seperation of content and design: The content has to be changed, to change
the design, and that is not a nice workflow.

\- Accessibility: CSS designs allow much better for a user-specified
stylesheet. Resize the browserwindow and tables keep sticking out, where with
CSS you can change the order (put columns under each other). Screenreaders
behave in a specific way for tables, they try to read the "summary", or they
assume the table holds tabular data, reading it row by row. A table lay-out
can therefor confuse.

\- SEO: CSS designs make content stacking possible, tables only allow to put
the content in the order of the table cells. Webmaster guidelines ask you to
check for correct use of HTML, which tables for lay-out isn't:

\- Semantics/standards: Use tables for tabular data. Provide a summary and
table header if relevant and possible. Using tables for lay-out semantically
turns your entire page into tabular data.

\- Pagespeed: CSS allows for faster, progressive rendering. HTML tables take
their width from the resulting table-cell: Content will jump around while
rendering or some browsers even show a blank table before all content is
loaded.

A CSS framework like this is far from hacky. Using tables for layout, because
CSS is deemed too complex, now that is hacky.

Also, don't forget support for "display: table" is in near all modern
browsers. If you really want to design lay-out like you are using tables, it
is possible with CSS too.

For responsive designs, much more is possible with CSS than a 100% width
table. You can't just slap a few lines of table and expect it to work well on
an ipad.

~~~
ville
I agree with all the points you listed and that CSS layout is superior.
However every time I use a CSS grid I find myself thinking whether the content
and design are really separated. If I add classes like .col-1-4, .span3 or
.three.columns to an element in the markup, doesn't that mix details specific
to a certain design (or even one particular screen size in responsive design)
with the content?

~~~
blauwbilgorgel
I agree. Frameworks like:

    
    
      <div class="table">
        <div class="tr">
          <div class="td">...</div>
          <div class="td">...</div>
        </div>
      </div>

remind me of tables too. They tend to add a few unneeded or non-semantic
div's. And they don't really separate content and design. It is a lesser-of-
two-evils thing for me, because sometimes grids/frameworks can save me a lot
of time. Ideally you'd use semantic-sounding classnames and don't include
unnecessary div's.

------
sbarre
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
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
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.

------
pault
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
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
Maybe using display: 'inline-block' is a solution?

------
bmuon
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:
[https://github.com/yui/yui3/blob/master/build/cssgrids/grids...](https://github.com/yui/yui3/blob/master/build/cssgrids/grids.css)

------
envex
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
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
I just don't think I'm understanding when it comes to something like

.col-2-12 & col-10-12

~~~
talmand
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.

------
petewailes
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/> | HN thread:
<http://news.ycombinator.com/item?id=4669809>

------
binarymax
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
> _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.

~~~
lazerwalker
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>

------
da_n
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.

------
firefoxman1
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>

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

~~~
thisisdallas
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
Here: [http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-
sm...](http://dhirajkumarsingh.wordpress.com/2012/07/31/animated-smoke-effect-
hot-coffee-tea-jquery-css/)

------
JulianWasTaken
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.

------
exodust
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.

------
emehrkay
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

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

------
corny
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/>

~~~
thisisdallas
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.

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

------
theallan
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
Hey thanks! Right now, it works in IE8 and up.

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

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

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

~~~
fourstar
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/> \-- resize the window.

~~~
Bootvis
Imgur doesn't like the deeplinking, so click this link first:

<http://i.imgur.com/kyOq3.jpg>

and then the jsfiddle link provided by fourstar.

~~~
fourstar
Ah, weird. Thanks.

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

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

------
thornofmight
Thanks! This looks great.

