{Carrer web log} ←

1 line CSS Grid Framework

Tuesday, June 02, 2009 { 41 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:

• Example 1


• Example 2


• Example 3

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.

41 Responses to “1 line CSS Grid Framework”

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

   This is brilliant. Cool idea.  

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

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

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

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

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

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

5. //  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. //  Cory // 6/02/2009

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

7. //  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. //  Netwala // 6/02/2009

   Awesome! Thanks for sharing!
   
   Cheers!  

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

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

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

    very very interesting, this is brilliant!  

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

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

12. //  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. //  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. //  Jan Järfalk // 6/02/2009

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

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

    really nice. thanks.  

16. //  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. //  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. //  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. //  delfuego // 6/02/2009

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

20. //  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 // 6/02/2009

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

22. //  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. //  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. //  mehigh // 6/02/2009

    Smart thinking :)  

25. //  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. //  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 // 6/03/2009

    The 2nd exmaple has layout problems with Chrome 2.0  

28. //  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. //  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. //  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. //  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 // 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. //  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. //  HoyaBaptiste // 6/04/2009

    Genius!!  

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

    you're genius!  

36. //  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. //  SharePoint Guy // 6/07/2009

    I don't know about it. Thanks  

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

    Brilliant work man, very creative  

39. //  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 // 7/26/2009

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

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

Post a Comment

<< Home