Pure grid optimizations (especially helpful with forms)

[Daniel-Hug]

I just wanted to share a few CSS extras that I found work well together with the pure grids module to make layout easier, I hope someone else finds them helpful!:


Set box-sizing to border-box:

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

This makes layout easier by using old IE's box-sizing
method of including padding in the width of an element,
so setting width: 100%; won't make an element overflow.


Set width: 100%; on .pure-u-1 elements:

.pure-u-1 { width: 100% }

By default Pure just sets display: block; on .pure-u-1 elements -nothing more.
Setting display:block; on an <input> element will not make it take up 100% of its width. width: 100%; fixes this safely, because we have our box-sizing set to border-box.


Super simple gutters minus the wrapper <div>:

.gutter { padding-right: 1em }

Use it by adding the gutter class to any .pure-u-# element.
This too can be done safely because we have set box-sizing: border-box.

[msweeney]

@Daniel-Hug Thanks for contributing your ideas. Unfortunately we still support IE < 8, so we can't use box-sizing.

See: #20 for more discussion on the topic.