{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.

8 Responses to “Box - CSS Framework”

1. //  Anonymous // 3/01/2012

   Nice work. I believe you can do without the negative margin if you remove the white space between the grid tags. Actually, I think its either or.  

2. //  Anonymous // 3/04/2012

   Or if you don't wonna remove space between elements nor uglify your markup with comments between them you can try setting font-size:0 on body and then reseting it to something more sane inside your grid elements.  

3. //  Anonymous // 3/05/2012

   Or if you speak russian, you can read about these and other cool solutions here http://habrahabr.ru/blogs/css/137582/  

4. //  Vladimir // 3/05/2012

   @Dzhav: I don't speak russian but I can understand the code :) What other solution can you suggest for this framework?  

5. //  Logo Design // 3/12/2012

   Like the work you have done here :)  

6. //  Anonymous // 5/30/2012

   Any pointers on how to get this working for IE7? Or could inline-block be replaced with floats for IE7 only?  

7. //  Vladimir // 5/31/2012

   @Anonymous: Unfortunately it doesn't work in IE7, you need classical floats and also box-sizing:border-box will not work. The possible solution is making separate CSS for IE7/6.  

8. //  Anonymous // 1/29/2013

   Great article!
   
   I just would like to know how did you get the % numbers? The px is quite logic 1.2.3.4... but for % i cannot figure out why you are using 10..12..17.  

Post a Comment

<< Home