1 Line CSS Grid Framework

Saicharan sent me this by mail :

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 experi

[source: Carrer Web Log ]

, , ,

  1. #1 by Lorene Said on February 28, 2011 - 10:16 pm

    Wow, I’m so thrilled I came across this, because in the beginning of my wedding planning it provides me with so many details in order to plan my event!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: