https://daneden.github.io/Toast/
🍞 A highly-customizable, responsive (S)CSS grid
https://daneden.github.io/Toast/
Last synced: 4 months ago
JSON representation
🍞 A highly-customizable, responsive (S)CSS grid
- Host: GitHub
- URL: https://daneden.github.io/Toast/
- Owner: daneden
- License: mit
- Created: 2011-11-21T13:22:45.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2018-12-15T20:22:20.000Z (about 7 years ago)
- Last Synced: 2025-10-22T16:28:20.198Z (5 months ago)
- Language: CSS
- Homepage: http://daneden.github.io/Toast
- Size: 75.2 KB
- Stars: 2,002
- Watchers: 92
- Forks: 264
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- web-development-resources - Toast - nonsense CSS grid. | (CSS library)
- awesome-sass - Toast - Flexible and lightweight grid framework from the creator of [animate.css](https://daneden.github.io/animate.css/). (Libraries and Mixins / Grid)
README
# Toast Framework
The Toast framework is a grid. That's it. Soon, it might have type styles and whatnot, but its power is in its highly customisable design.
Set any number of columns, any gutter size you want, and whatever classes you need. Just edit the `_grid.scss` file’s variables to your needs.
You should also know that you’d be insane to use Toast’s grid.
To learn more, go to http://daneden.github.io/Toast
## Quick-start guide
Using Toast is easy. First, link to grid.css in your HTML document's head:
``````
Then, to use the grid, you'll need a wrap (provided in your own CSS) and a `.grid` container.
```html
```
## Customising
`$toast-grid-namespace` and `$toast-grid-column-namespace` adjusts the class names for the grid. With default values, grid wrappers have a class of `.grid` and columns `.grid__col`.
`$toast-col-groups(n)` adjusts column divisions. For example, `$toast-col-groups(12)` will produce a 12-column grid. `$toast-col-groups(3,6,8)` will produce a 3-, 6-, and 8-column grid.
`$toast-gutter-width` is—you guessed it—the gutter
width. Accepts any unit.
`$toast-breakpoint-medium` and `$toast-breakpoint-small` are breakpoint placeholders. Columns have hooks to change their behaviour under these breakpoints. See the “Modifiers” section below.
## Modifiers
Toast has some modifiers to make different kinds of layouts easier. There are breakpoint hooks to have columns behave differently than their default behaviour under breakpoints:
```html
This column will behave like a 1-of-2 column under the medium breakpoint and the small breakpoint.
This column aligns to the bottom of its row.
This column aligns to the middle of its row.
This column is centered and alone in its row.
This column comes first in the DOM, but appears last in its row.
This column appears last in the DOM, but appears first in its row.
```
That’s it. Have fun.