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.
No floats, no clearfix; no worries.
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.
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
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
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?
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>
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.