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 plain ol' English (one-half, two-thirds, seven-elevenths, etc.).

A Basic grid example

Each grid unit below has the following behavior:

  • At SM: one-half
  • At MD: one-third
  • At LG: one-sixth
  • At XL: one-twelfth

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.