Skip to main content Skip to secondary navigation Accessibility Feedback

Kraken gets universal box-sizing and smarter grids

Last night, I released version 3.3 of Kraken. This latest version includes universal box-sizing, and along with it, a simpler, more flexible grid structure.

What is box-sizing? #

Quick quiz: what’s the rendered width of this element?

.element {
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
}

The correct answer is 220px. And it’s one of the most annoying things about CSS.

The ultimate width of an object isn’t just it’s width (as you’d expect), but it’s width plus it’s padding, margins, and border. Every time you adjust padding or add a border, you need to redo your math.

The one exception to this rule, amazingly is Internet Explorer 6. In IE 6, the rendered width of an object is its width. Period.

In CSS3, the box-sizing property causes elements to render width as the specified by the width value. Any padding or borders take away from space inside the element rather than add to its width.

Universal Box-Sizing #

To make life easier, folks like Paul Irish and Chris Coyier recommend just applying the box-sizing property to everything like so:

*, 
*:before, 
*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

I resisted this approach for a long time because I’d heard (often) that the universal selector (*) was bad for performance. Paul Irish is adamant that it’s not, and he’s a really smart dude!

A Better Grid #

The nicest thing about applying universal box-sizing in Kraken is that the math for the grids can get a lot simpler.

A quarter width column used to look like this:

.grid-fourth {
    width: 21.96969696969%;
    margin-left: 1.515151515152%;
    margin-right: 1.515151515152%;
}

Now it looks like this:

.grid-fourth {
    width: 25%;
    padding-left: 1.4%;
    padding-right: 1.4%;
}

And you can adjust the left and right padding to anything you want. Need to add columns that span a fifth of the page? Those aren’t included in Kraken, but it’s as simple as adding a class:

.grid-fifth {
    width: 20%;
}

And for Sass users, the config.scss file now includes a $grid-margins variable that let’s you set the grid margins to any value you want.

Get the latest version of Kraken on GitHub today.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get the Weekly Digest