{Carrer web log}


Blog about web design & development

Two Lines CSS Framework

Tuesday, October 26, 2010 { 17 Comments }

I love to experiment with CSS layouts. One year ago I made 1 line CSS Framework now here is two lines CSS Framework. Both are mainly build for teaching purposes. Avoid using them in production.

Last week I spotted the article "Announcing The Oxymoron CSS Framework" and I decided to "shrink it" preserving only display:table; and display:table-cell;

Here is the code:

.row { display:table; width:960px; margin:0 auto }
.cell { display:table-cell; vertical-align:top; padding-left:10px }


With this two lines of CSS you can build n. column grid system.

Five column system will look like:

<div class="row">

<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>

</div>

You can add as many "cells" as you like.

Here is the demo.
Two Lines CSS Framework

How this system works?

By combining display:table and display:table-cell you have the container(.row) and the columns(.cell), any row can contain many cells.

All cells by default are fluid. There is no need of Float and clearing. The width of all cells can be additionally defined. So there are literally endless combination of columns. You can mix px,em,% and fluid colmns.

Example 1

Code explanation:

.row {
display:table; /* The container */
width:960px; /* Any width, you can also use % and ems */
margin:0 auto /* Centered */
}
.cell {
display:table-cell; /* column */
vertical-align:top; /* align to top */
padding-left:10px /* the default gutter, you can personalize your gutter size */
}

Here are also two more examples:

Example 2

Example 3

So you can personalize your main width, columns size, gutter size, you can use %, ems or default fluid width and choose to center or not your main layout . Pretty powerful don’t you think?

Unfortunately this system will not work in IE 6/7 and some older browsers.
You probably noticed the similarities with classical tables coding approach (table, td, tr) and someone will think that this method is trying to reinvent the tables. What changes?

When the CSS is used for styling layouts the main goal is to separate the content from presentation. So in this case we have the CSS who is controlling the content without the use of table tags.

Today we are playing with the new CSS3 "make up" tricks forgetting that the main problem in CSS is the layout and we still don’t have good layout model who will satisfy all our designer needs.

This Framework is just an experiment that can help you understand different CSS layout models and coding approaches.

The code and the examples are also available on GitHub.



17 Responses to “Two Lines CSS Framework”

  1. // Anonymous droope // 10/26/2010

    smart!  

  2. // Anonymous Anonymous // 10/26/2010

    intuitif  

  3. // Anonymous Annonces Immobilières // 10/27/2010

    Very clever. Although I don't like working with grids, this is a very good idea :)  

  4. // Anonymous Anonymous // 10/27/2010

    I can't understand the point of this experiment: if you need a table structure why don't you use a table?

    The code won't be 'smarter' only because you used div instead of a table...  

  5. // Anonymous Matteo Balocco // 10/27/2010

    @Anonymous (the last one): actually it does act as a table only with this stylesheet. With CSS3 you still have the whole control over the float or display of every single div. @vlad: really brilliant. Kudos!  

  6. // Blogger Vladimir // 10/27/2010

    @Anonymous: From my answer on reddit:

    "Do this approach is reinventing the tables? Unfortunately the "float" method has many limits. Example making fluid columns with float is super complex (http://www.alistapart.com/articles/holygrail/). CSS3 doesn't offer the solution for better layout model. So we do our best with the tools we have. With this model you can build almost any kind of layout. Why is different from the classic tables? Because it is the CSS who is controlling the layout. Insert different CSS and the layout will behave differently. The goal is to separate the content from presentation. "

    @Matteo: Thanks!  

  7. // Anonymous Matteo Balocco // 10/28/2010

    I think I'm gonna use some derived css in ebook design. Absolutely brilliant!  

  8. // Blogger Vladimir // 10/28/2010

    @Matteo: This project is perfect for iPad or any browser who is not IE6/7.  

  9. // Blogger Beben // 10/29/2010

    wow, its intersting...
    btw wheres example2?
    hihihi...
    cheers :)  

  10. // Blogger Vladimir // 10/29/2010

    @Beben : I updated the post :) Now there is example 2.  

  11. // Anonymous Anonymous // 10/29/2010

    This totally goes against what CSS is for. CSS is for leaving the presentation out of the markup. Using this, the markup is determining the layout and presentation. Yes you could use other classes and id's, but that kinda nullifies the whole point of this "framework". Sorry, not impressed.  

  12. // Blogger Vladimir // 10/29/2010

    @Anonymous: This Framework starts with all fluid columns. After you can decide to add px,em,% columns and use id or class for additional naming and size determination. I use the word Framework because even without additional (id and class) it behaves like structural layer.  

  13. // Anonymous Alex Burr // 10/29/2010

    I disagree with Anonymous. Using class="row" and class="cell" in this example are non-semantic, but there's no reason you can't find a semantic justification for grouping that content that is reflected in your class names.

    The layout should reflect some semantics, in that related information is positioned accordingly (ie "article" or "sidebar"). From there it's easy to use the same CSS properties Carrer has defined in ".cell".  

  14. // Anonymous Anonymous // 1/16/2012

    Holy crap, thanks! I used to develop basic websites back in the late 1990's early 2000's on the side. I used tables exclusively, but it became such a headache for compatibility between browsers. Just trying to make a simple site for a side business I'm starting and this looks brilliant and easy to get started. Kudos and thanks. Sometimes the simplest things are the hardest to start. lol.  

  15. // Anonymous Fatan // 1/28/2012

    unluckily not good in ie 6 and older but Really impressed with your brilliant point.  

  16. // Anonymous Soul Sanctuary // 12/13/2012

    @Fatan It's 2012 People should stop coding for browser that are so outdated and so bad at following web standards. If web designers didn't bother to accommodate people using such outdated crap they would be forced to change their habits and upgrade. I don;t know why many businesses insist on trying to work with people so stuck in the stone age anyway, their so unlikely to buy anything new it seems like a complete waste of time and money.  

  17. // Blogger self deprecating // 4/06/2013

    .row { display:table; width:960px; margin:0 auto }
    .cell { display:table-cell; vertical-align:top; padding-left:10px }

    How do you add backgroung color to either the css row or cell code?

    I tried editing the .row css code:

    .row { display:table; width:960px;background-color:red; margin:0 auto }

    but it does not display the background color.  

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