{Carrer web log}

Box - CSS Framework

Thursday, March 01, 2012 { 8 Comments }

Last week I stumbled upon ingrid - CSS Frameworks that is based on display:inline-block; and box-sizing: border-box; principles. I felt like the display:inline-block; and box-sizing: border-box; are right principles for building easy to understand CSS Framework.

box-sizing:border-box includes the padding and the border inside the element width. You can learn more here, here and here.

display:inline-block; it similar to float:left but gives some extra powers like vertical-align:top; More here ..

My constraint obsession about CSS Frameworks forced me to build one more CSS Framework based on these principles.

Basically it is all about this code:

{
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box; 
 display:inline-block;
 margin-right: -4px; /* inline-block hack */

 /* You could and you should change these settings */

 border-left: 15px solid #eee; /* the border can also be used as  gutter */
 padding-left:10px; /* padding becomes margin */
 vertical-align:top;
} 

We have border-box model and inline-block with margin-right: -4px; for the extra spaces between the elements.

The classical CSS Frameworks usually have default gutter(margin) size like 10 or 20px and if you want to change that you need to rewrite all the framework logic. In this case only thing you need to do is change just one number.

I've used some components from my previous framework The Golden Grid and Malo.

The grid contains both pixel and percent grid, meaning endless grid combinations and possibilities and the best thing is (like I mentioned before) you can change instantly the gutter value. The percent grid works little different than px grid, you will probably do best by just using the padding like gutter.

Feel free to change the naming system of this framework and choose the semantic you prefer.

Change the default padding and the border.

The grid is also Responsive optimized for mobile devices.

All the CSS is around 1kb.

This framework does not work in IE6,7. You need additional CSS for that.

The PX Grid
The % Grid
Demo

Download this project on Github

I hope that you will take some time to understand how this system works, box-sizing: border-box can display:inline-block are really powerful layout building techniques that can help you build fast and easy CSS solutions.