Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

.unit.one-of-four
.unit.one-of-four
.unit.one-of-four
.unit.one-of-four
.unit.one-of-three
.unit.one-of-three
.unit.one-of-three
.unit.one-of-three
.unit.two-of-three
.unit.one-of-two
.unit.one-of-two
.unit.span-grid
.unit.two-of-five
.unit.three-of-five

No floats, no clearfix; no worries.

By using display: inline-block, Toast saves the headache of clearing floats, and allows you to use floats what they were originally intended for - not for laying out websites.

Responsibly responsive.

Toast includes two main states - a single column layout for narrow screen and mobile devices, and a multi-column layout up to a default width of 960px. It's super easy to adjust Toast for your own needs - simply change the min-width in toast.css, or write your own media queries for the screen sizes you want.

IE7 is dead - long live IE8.

Using pain-free CSS properties like box-sizing and display: inline-block hasn't come without it's sacrifices; Toast only supports Internet Explorer 8 and up. But that's OK - you don't like old IE7 much anyway, do you?

Usage

Using Toast couldn’t be simpler. Just drop the CSS into your site’s <head>, and add create grids like so:

<div class="grid">
    <div class="unit one-of-two">
        Content
    </div>
    <div class="unit one-of-two">
        Content
    </div>
    <div class="unit span-grid">
        Content
    </div>
</div>

Notes

The main intention of Toast is to provide a barebones framework from which to build prototype layouts for websites. For best results, take Toast and adjust it for your needs.

There’s no plug-and-play solution for web design. No framework will be perfect, but hopefully Toast is simple enough to work as a starting point for a variety of projects.

Feel free to tweet me your suggestions or queries.