{Carrer web log}

Child Selector System - CSS Framework

Tuesday, March 01, 2011 { 1 Comments }

I love to make experiments with CSS Layouts. It is become my obsession to build CSS Frameworks and other CSS Architectural solutions. My latest experiment is the use of child selectors for building css layout systems.

Here is the code:

div{float:left;width:100%}
.right>div{float: right}
.one>div{ width:100%}
.two>div{ width:50%}
.three>div{ width:33.33%}
.four>div{ width:25%}
.five>div{ width:20%}
.six>div{ width:16.60%}
.seven>div{ width:14.28%}
.eight>div{ width:12.5%}
.nine>div{ width:11.11%}
.ten>div{ width:10%}
.twelve>div{ width:8.33%}

And the HTML will look something like this:

<div class="two">
<div>...</div>
<div>...</div>
</div>


Note: I build this framework just for teaching purposes. This is just experimental framework. There are many more elegant CSS Frameworks and CSS Systems.

How this system works?

Every div is "float:left" every class for one to twelve is used like container to contain the "child" divs. For example the .five div will hold 5 child divs. The system is simple and easy to use. This system will not work in IE6 and it will have pixel rounding issues in both IE6 and IE7. That is why I made parallel system for IE6/7.

That is something like this:
.five div{ width:20%} so we are not using the child selector ( > ).
For the pixel rounding problems I added margin-right:-1px;:
div{float:left; margin-right:-1px; width:100%}

So with IE fix and IE conditional comments the system can work even in IE 5.5.

Advantages of this system is that the CSS file is very small about 0.35 kb and also generates very small HTML output file. Also the framework supports nested div elements.

Disadvantages are you can't do something like 75% - 25% or 80% -20% columns. The Framework will just have one to twelve equal columns.

With just one line of CSS .four>div{width:25%; float:left;} from this Framework you will have four columns grid system and you can make for example image gallery or something.

Here are more examples:

The System
Example1
Example2


The project is hosted on Google Code Hosting

Download the Code