Skyline uses a simple, but powerful responsive grid system.

  1. Grid layout is achieved by using a wrapping div called a 'grid-wrapper', and shortened to the classname .gw.
  2. Within the grid-wrapper, grid units are added, and shortened to the classname .g.
  3. These grid units then have responsive classnames added to them, which specify their widths at different viewports.
  4. 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.