{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:

1 line css framework


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”

  1. // Anonymous Simple // 6/02/2009

    This is brilliant. Cool idea.  

  2. // Anonymous Pär Thernström // 6/02/2009

    Yes, I also like this idea. Keep it simple! :)  

  3. // Blogger jrosell // 6/02/2009

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

  4. // Blogger Vladimir // 6/02/2009

    @jrosell: You can use Malo the same css syntax but more options.  

  5. // Anonymous 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.  

  6. // Blogger Cory // 6/02/2009

    That's great! Nice use of your imagination. ;)  

  7. // Blogger 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?  

  8. // Blogger Netwala // 6/02/2009

    Awesome! Thanks for sharing!

    Cheers!  

  9. // Anonymous Anonymous // 6/02/2009

    This looks like a nice companion to http://unobtrusivecss.com/  

  10. // Anonymous Niceoutput // 6/02/2009

    very very interesting, this is brilliant!  

  11. // Anonymous Tyler Diaz // 6/02/2009

    Nice concept, I'm starting to notice more and more developers taking different approaches to grids.  

  12. // Blogger 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%)  

  13. // Blogger 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%  

  14. // Blogger Jan Järfalk // 6/02/2009

    Never been a fan of css frameworks, but this one I like!  

  15. // Blogger aApe // 6/02/2009

    really nice. thanks.  

  16. // Blogger Mark H. // 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.  

  17. // Blogger 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.  

  18. // Anonymous 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.  

  19. // Anonymous delfuego // 6/02/2009

    I love how even in a 1-line framework we still have to use hacks to fix IE6.  

  20. // Blogger 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  

  21. // Anonymous Anonymous // 6/02/2009

    You keep using that word. I do not think it means what you think it means. :-)  

  22. // OpenID MyID.php // 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.  

  23. // Blogger 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  

  24. // Blogger mehigh // 6/02/2009

    Smart thinking :)  

  25. // Blogger 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  

  26. // Anonymous 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.  

  27. // Anonymous Anonymous // 6/03/2009

    The 2nd exmaple has layout problems with Chrome 2.0  

  28. // Blogger 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.  

  29. // OpenID medikoo // 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" ;-)  

  30. // Blogger 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.  

  31. // Blogger 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.  

  32. // Anonymous 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 :)  

  33. // Blogger 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  

  34. // Blogger HoyaBaptiste // 6/04/2009

    Genius!!  

  35. // Blogger Xian Iwan Santoso // 6/05/2009

    you're genius!  

  36. // Anonymous 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.  

  37. // Anonymous SharePoint Guy // 6/07/2009

    I don't know about it. Thanks  

  38. // Blogger Johns Beharry // 6/09/2009

    Brilliant work man, very creative  

  39. // Anonymous 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!  

  40. // Anonymous Anonymous // 7/26/2009

    Problem solving + imagination + simplicity = maths !
    Great example Carrer ;)  

  41. // Anonymous 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.  

  42. // Anonymous grid // 2/26/2010

    I also gotta admit, this is a quite innovative idea, I liked it.  

  43. // Anonymous 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!  

  44. // Anonymous Philippines Outsourcing // 7/30/2011

    i love the simplicity ... great job on the framework!!!  

  45. // Anonymous Anonymous // 12/03/2011

    En France, nous disons "ce qui se concoit bien, s'exprime simplement." Nice job KISS  

  46. // Anonymous Surya Adi Saputra // 12/14/2011

    this is crazy, i never mind any body will create this.. you are briliant,..  

  47. // Blogger 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 :)  

  48. // Blogger Vladimir // 3/16/2012

    @Adam: Nice one!  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License