Last updated June 29, 2012. Created by KrisBulman on June 29, 2012.
Log in to edit this page.
Aether provides 5 fixed-width layouts out of the box. The best way to visualize this is to check out the demo and re-size your browser. These are provided by a Compass extension called Aether-Grids, which comes prepackaged with Aether in the sass-extensions directory.
Out of the Box Grid Settings
| Label | Columns | Fixed width | Column width | Gutter | Breakpoints | Grid calc |
|---|---|---|---|---|---|---|
| Handheld | 12 | 308px | 4px | 20px | 〈 479px | Example |
| Handheld Landscape |
12 | 428px | 14px | 20px | 〉 480px 〈 767px |
Example |
| Tablet | 12 | 752px | 41px | 20px | 〉 768px 〈 979px |
Example |
| Tablet Landscape |
12 | 968px | 59px | 20px | 〉 980px 〈 1159px |
Example |
| Desktop (default) |
12 | 1148px | 74px | 20px | 〉 1160px | Example |
Modifying the Grid & Breakpoints
If you wish to override the default grids, then there are two places you must modify:
- sass/_base.scss: All theme defaults are here and are easily modified
- YOURTHEMENAME.info: Keep these settings in sync with any modified variables is IMPORTANT
Changing the Layout
The layout used in Aether is grid based, use the theme-settings to define column widths per media size. Or, if you are an advanced user and want to get fancy, check out the child pages of this section of the handbook.