{Carrer web log} ←

Blog about web design & development

1 line CSS Grid Framework

Tuesday, June 02, 2009 { 48 Comments }

This is the challenge of writing entire CSS layout system with one line CSS class.

I just wanted to prove how easy CSS can be, and with little imagination we can be build cool things.

I started with the principle that every column can be divided by two, becoming half column or 50% column.

So how can we build CSS Layout system with this principle?

One column can become 2 (50%) column or 100% = 50% + 50%.

So we can make 2,4,8,16, … layout system.

Believe it or not we only need this line of CSS code:

.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }

A little explanation:

.dp50 means div 50 percent

and we have floated left 50% column, display: inline; *margin-right:-1px; is fix for IE.

So the result is:

Download link

The system can be made to work with any main default size(px, em, %) something like 950px or 550px or 90% or 50em. This system works even in IE5.5, so you don’t have problem of multi browser compatibility.

You can use the system in many different ways.

Limits of this Framework?

The main limit is that you can use only 1,2,4,8,16 columns system plus some combinations like (50% + 25% +25%). If you have something like 16 columns you will have many nested divs.

Conclusion: This is just technical demo and I don’t advise you to use it in production. If you need something very small you can use Malo, it is just 8 lines of code and uses the same naming system but has to offer much more.

Building some "real" css layout system(CSS Framework) is much more complex work. Usually you project your layout starting with the typography . On the base of the typography you make the grid and the gutter.

I spend a lot of time searching for the best gutter or perfect web grid and searching the answer to the question "how we read?".

So I repeat, this experiment has pure technical nature of building relatively complex css layout with minimum CSS code.

48 Responses to “1 line CSS Grid Framework”

// Simple // 6/02/2009

This is brilliant. Cool idea.
// Pär Thernström // 6/02/2009

Yes, I also like this idea. Keep it simple! :)
// jrosell // 6/02/2009

That's an interesting aproach. Do you have some as simply idea for 3,5,7 column grids?
// Vladimir // 6/02/2009

@jrosell: You can use Malo the same css syntax but more options.
// Stanley // 6/02/2009

I thought Malo was already pushing the limits for minimum code size. How wrong could I be. But I'm delighted to be proven wrong. This is a really interesting and different idea of doing grids.
// Unknown // 6/02/2009

That's great! Nice use of your imagination. ;)
// test // 6/02/2009

great work.

you might be familiar with
http://www.designinfluences.com/fluid960gs/#

could your plan also work for 12 collom grid?
// Netwala // 6/02/2009

Awesome! Thanks for sharing!

Cheers!
// Anonymous // 6/02/2009

This looks like a nice companion to http://unobtrusivecss.com/
// Niceoutput // 6/02/2009

very very interesting, this is brilliant!
// Tyler Diaz // 6/02/2009

Nice concept, I'm starting to notice more and more developers taking different approaches to grids.
// jrosell // 6/02/2009

@Vladimir I take a look at Malo. What I mean is 2 cols (one using 66% width, while another using the rest 33%)
// Vladimir // 6/02/2009

@jrosell: If you need something complete with all options you can use Emastic (inside plugins there is percent-grid.css). Inside there are almost all combination from 10% to 100%
// Jan Järfalk // 6/02/2009

Never been a fan of css frameworks, but this one I like!
// aApe // 6/02/2009

really nice. thanks.
// Unknown // 6/02/2009

Interesting experiment, but I'd hate to maintain it.

Using a nested hierarchy of divs to achieve layout eliminates the separation of layout and markup. You could have replaced lots of those div tags with trs and tds.
// Vladimir // 6/02/2009

@Mark H: The point of this experiment was not to improve the CSS Layout system there much more elegant solution.
Like I sad nested div are one of the limits for this type of CSS solution.
My main goal was to show that you can make cool things with very little CSS.
// Dan // 6/02/2009

Yours is a very intriguing solution to the overly complex grid layouts. A great proof of concept, thanks. I'll check out Malo.
// delfuego // 6/02/2009

I love how even in a 1-line framework we still have to use hacks to fix IE6.
// Vladimir // 6/02/2009

@delfuego: Good point! But is not just IE6 also IE7 doesn't handle % very well and the grid brakes.

Without IE :

.dp50 {width:50%; float:left; }

Than I can call it: Two Word CSS Framework, lol
// Anonymous // 6/02/2009

You keep using that word. I do not think it means what you think it means. :-)
// Anonymous // 6/02/2009

The only problem I see with this solution (and this is true with many CSS frameworks) is that all the spacing like margins and paddings have to be added to content inside the divs. If you add any padding to the 50% div its width will be more than 50% and you'll end up with float drops. So, if you want 15px margin between columns, you have to add margin to each tag in the div--too much redundancy for me.
// Vladimir // 6/02/2009

@MyID.php(dave): The solution is very simple: p{padding:0 14px 0 0;}

You always have paragraphs (p) indie div. So you can use divs like building blocks.And paragraphs for text,images and everything else.
Look at the code: Example 3
// Crantea Mihaita // 6/02/2009

Smart thinking :)
// Ashton Sanders // 6/03/2009

Hahaha that is pretty funny.

Man do I hate frameworks, but that's a great addition to any website.

Thanks for the code. RT'ed
// Dean // 6/03/2009

You're putting presentation in the markup - why not just use b, i, u, width=, height=, etc if you're littering your HTML with class names that describe the presentation.
// Anonymous // 6/03/2009

The 2nd exmaple has layout problems with Chrome 2.0
// Andrea Giammarchi // 6/03/2009

nice one, I would have used main.div {...} though, just to speed up download time and to have exception with dp75 or dp25 where necessary.
// Anonymous // 6/03/2009

It would be nice if it wouldn't be build mostly of CSS hacks.
Float property were never meant to build columns - you should use 'inline-block' instead.
Other thing, you say to browser to display block elements as inline - this may lead to very unpredictable behavior in many browsers (of course in IE it will work "right" ;-)
// Ramon Leon // 6/03/2009

That is not a framework, it's a technique, please stop abusing the term framework before it ends up meaning nothing.
// Vladimir // 6/03/2009

@Ramon: Don't kill the messenger! I didn't invent the name. I prefer calling it CSS Library. But the naming standard now is CSS Framework.

The word CSS Framework was invented by Jeff Croft and I wrote my opinion on Jeff's blog

In my opinion CSS Framework(Library) is making high level reusable CSS code.

CSS is Not programing language so any association with other programing Frameworks is wrong.

One true thing about word Frame-work and CSS you are always "inside the"frame" and if you want something specific you must write your CSS code.
// Anonymous // 6/03/2009

"And paragraphs for text,images and everything else"? Seriously? Yecch!

I admit this is cool, and proves you can tackle difficult layouts with a minimal amount of CSS, but why not use paragraph tags for paragraps, image tags for images (see where I'm going with this?), etc? God gave us those tags, let's use 'em!

Still, neat trick :)
// Vladimir // 6/03/2009

@Anonymous: I'm not sure what is your point? Are you suggesting one column web site with only use of paragraphs and images? No tables, no divs, no flash,no videos. Maybe I did Not understand your point.

If I did you definitely going to like this: One div and many paragraphs :)

Better Web Readability Project
// HoyaBaptiste // 6/04/2009

Genius!!
// Bung Iwan // 6/05/2009

you're genius!
// Mark Gardner // 6/05/2009

I think this is absolutely brilliant. I love Malo too...I will find a way to implement one them on my next newsflash sites. I've been dropping some cool newzy sites all over the place actually I have them rotating on my hosting with using a dynamic IP so it's pretty random. I dunno I just enjoy using the web in a different way. It's cool to be able to drop a newzy site with some cool info on it and then have it drop and change to another newzflash after a few clicks. This looks perfect for this. Thanx.
// SharePoint Guy // 6/07/2009

I don't know about it. Thanks
// Johns Beharry // 6/09/2009

Brilliant work man, very creative
// Color Printing // 6/20/2009

This is great man! I totally agree with you! I tried it myself and yeah CSS is indeed very easy to use. Thanks!
// Anonymous // 7/26/2009

Problem solving + imagination + simplicity = maths !
Great example Carrer ;)
// Eken Et // 10/24/2009

This is a real cool idea.
So nice to use your concept, I am working on modifying some codes to suit my purpose.
// grid // 2/26/2010

I also gotta admit, this is a quite innovative idea, I liked it.
// Caravan Guy // 6/20/2010

The best ideas are always the simplest. The main argument against other grid systems is bloat, they try to do too much. With Google WMT speed analysis pushing us to reduce all file size if we are to adopt a css grid it needs to be small. The only downside is now I want to go and redo my latest Blueprint based site using one of your small frameworks.

Many Thanks!
// Philippines Outsourcing // 7/30/2011

i love the simplicity ... great job on the framework!!!
// Anonymous // 12/03/2011

En France, nous disons "ce qui se concoit bien, s'exprime simplement." Nice job KISS
// Surya Adi Saputra // 12/14/2011

this is crazy, i never mind any body will create this.. you are briliant,..
// Adam Kochanowicz // 3/16/2012

There's also this, which uses a similar idea but allows for "thirding" and not just "halving"

http://adamkochanowicz.com/oneline.html

Although maybe I'll take some tips from this an incorporate it into mine :)
// Vladimir // 3/16/2012

@Adam: Nice one!