Monthly Archives: March 2014

Box Sizing – Make width = width

Box-sizing solves a problem that has been making front-end development more confusing for years. The problem is when you add padding and borders to elements on your page, the layouts will often break or in general cause things to look different than you expected. If you change the box-sizing value to be border-box the padding and width of the element will be contained inside of the specified element’s width, instead of adding it to the width like the default behavior of content-box.

The box-sizing property is such a great little solution Chris Coyier decided to declare February 1st as International box-sizing awareness day. I’m a little bit late for that, but I do want to include this little snippet here and do my part to help promote the usefulness of this property.

Here is a video that demos the issue and how useful box-sizing can be.

Useful Links

Paul Irish on Box Sizing
The MDN Reference

The Next Step with Sass and Compass (Intermediate Sass Course)

I have a new Sass course that will be published soon. It covers Sass and Compass and shows you how to use some of the programming techniques that are available to you with Sass.

The course includes about 2.5 hours of video content. This is one of the lessons where I explain how Sass Lists work. I use the Sassmeister website in this video, which is a great place to play with Sass code and see immediately the CSS that is produces.

If you would like to follow along with the video, you can use this link: Lesson Gist