Over a million developers have joined DZone.

Box: A New, Responsive, Very Lightweight CSS3 Framework

· Web Dev Zone

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Last week I stumbled upon ingrid - a CSS Framework 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 the 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.

 

Make the transition to Node.js if you are Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Vladimir Carrer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}