Layout

Design layouts for mobile screen sizes first.

Usage

The .sta-wrapper class can be used to specify a centrally positioned container with a maximum width. This can be used alongside other layout methods to construct sophisticated design layouts.

Layouts are handled by two complimentary methods:

Responsive breakpoints

The following named breakpoints are used as a set of starting points to adapt layouts around:

  • xs up to 575px.
  • sm from 576px.
  • md from 768px.
  • lg from 992px.
  • xl from 1200px.
  • xxl from 1400px.

Spacing helpers

The following set of classes can be used to add specific margin and padding values to an element. These specify both the size and type of spacing to use along with an optional direction.

Size values

Fixed to base so wont scale with font sizes.

  • small 0.5rem
  • medium 1rem
  • large 1.5rem
  • xlarge 2rem

Relative to font size.

  • small-rel 0.5em
  • medium-rel 1em
  • large-rel 1.5em
  • xlarge-rel 2em

Varies depending on the width of browser.

  • small-var calc(1vw + 0.5rem)
  • medium-var calc(1vw + 1rem)
  • large-var calc(2vw + 1rem)
  • xlarge-var calc(3vw + 1rem)

The following table demonstrates the helper classes available for the 'small' size. To use a different size just replace the small part of the class for a different size value.

Size Margin Padding
Small (all directions) .sta-margin--small .sta-padding--small
Small (top and bottom) .sta-margin--small-v .sta-padding--small-v
Small (left and right) .sta-margin--small-h .sta-padding--small-h
Small (top only) .sta-margin--small-top .sta-padding--small-top
Small (bottom only) .sta-margin--small-bottom .sta-padding--small-bottom
Small (left only) .sta-margin--small-left .sta-padding--small-left
Small (right only) .sta-margin--small-right .sta-padding--small-right