Skyline uses a simple, but powerful responsive grid system.
- Grid layout is achieved by using a wrapping div called a 'grid-wrapper', and shortened to the classname
.gw
. - Within the grid-wrapper, grid units are added, and shortened to the classname
.g
. - These grid units then have responsive classnames added to them, which specify their widths at different viewports.
- Responsive width classes start with a two-letter prefix (xs, sm, md, lg, xl) and follow with the width, written in easy-to-read fractions (one-half, two-thirds, seven-elevenths, etc.).
NOTE: The HTML element on this page has the classes .dev--highlight-elements .dev--highlight-grids .dev--show-breakpoint
from base/_dev-helpers.scss
. These enable some helper classes that highlight elements at breakpoints
A basic grid example
Each grid unit below has the following classes: sm-one-half md-one-third lg-one-sixth xl-one-twelfth
. These classes determine the grid unit's width at these viewports:
- Default: grid units are 100%
- At SM: one-half
- At MD: one-third
- At LG: one-sixth
- At XL: one-twelfth
An example of a grid units with unique sizes
The grid units below use different combinations of responsive width classes for a more complex grid.
An example of a ludicrous grid
Just to illustrate the flexibility of this grid system, here's an example of a ludicrously complex grid.
Grid example using ups
For a grid wrap containing equally-sized grid units, like a gallery of thumbnails for instance, use the responsive ups classes from layout/_ups.scss
. With these classes applied to the .grid wrapper, you won't need to specify widths on each individual grid unit.
- Default: 100%
- At XS: two-up
- At SM: three-up
- At MD: four-up
- At LG: six-up
- At XL: twelve-up
A nested grid example
Grids can be nested within grids
A double-nested grid example
It's unusual, but sure - you can nest a nested grid.