Sizes

Screen / Media Widths

The layout changes responsively at each of the following screen width steps, specified in app/_sizes.scss in $widths-by-size.

  • extra-small: 374 px
  • small 480 px (scss: $width-mobile)
  • medium 718 px (scss: $width-desktop)
  • large 1024 px (scss: $width-desktop-lg)
  • extra-large 1292 px (scss: $width-desktop-xl)

Content Widths

You can specify the width of the content class with the following classes

  • content-width-base 276 px
  • content-width-extra-small 324 px
  • content-width-small 424 px
  • content-medium 680 px
  • content-large 868 px
  • content-extra-large 1016 px

Spacing

There are six different types of white space options.

  • none 0 px
  • base 10 px (scss variable: $space-base)
  • line 20 px (scss variable: $space-line)
  • small 30 px (scss variable: $space-small)
  • medium 60 px (scss variable: $space-small)
  • large 80 px

Pad

You can add padding to any element by specifying the following. 

pad-<type>

This adds padding of <type> equally to all sides of an element. 

pad-none
pad-base
pad-line
pad-small
pad-medium
pad-large
pad-vert-<type>

This adds padding of <type> (none, base, etc) only to the top and bottom of an element. 

pad-horiz-<type>

This adds padding of <type> (none, base, etc) only to the left and right of an element. 

pad-<position>-<type>

This adds padding of <type> (none, base, etc) to the specified <position> (top, bottom, left, right) of an element.

Responsive Pad

You can change the padding on a given element based on the screen width (extra-small, small, medium, large, extra-large) by appending any of the classes above with -at-<screen-width>

For instance if you wanted pad-bottom-medium to apply to an element only at screen width sizes medium or wider, you would write the class as pad-bottom-medium-at-medium.

If you wanted the pad-top-base to apply only on all small screen sizes (even smaller than extra-small) and pad-top-line to apply on larger screen sizes greater than medium and pad-top-medium to apply to the largest screen size, you would specify an element's class as the following: 

pad-top-base pad-top-line-at-medium pad-top-medium-at-extra-large

With these classes the top padding will be base until the medium screen width. Then the padding will be line from the medium screen width until the extra-large screen width. Finally, the padding will be medium from extra-large screens and larger.

Gap

You can add gaps (margins) to any element by specifying the following. 

gap-<type>

This adds margin of <type> equally to all sides of an element. 

gap-none
gap-base
gap-line
gap-small
gap-medium
gap-large
gap-vert-<type>

This adds margin of <type> (none, base, etc) only to the top and bottom of an element. 

gap-horiz-<type>

This adds margin of <type> (none, base, etc) only to the left and right of an element. 

gap-<position>-<type>

This adds margin of <type> (none, base, etc) to the specified <position> (top, bottom, left, right) of an element.

Responsive Gaps

You can change the margin on a given element based on the screen width (extra-small, small, medium, large, extra-large) by appending any of the classes above with -at-<screen-width>

For instance if you wanted gap-bottom-medium to apply to an element only at screen width sizes medium or wider, you would write the class as gap-bottom-medium-at-medium.

If you wanted the gap-top-base to apply only on all small screen sizes (even smaller than extra-small) and gap-top-line to apply on larger screen sizes greater than medium and gap-top-medium to apply to the largest screen size, you would specify an element's class as the following: 

gap-top-base gap-top-line-at-medium gap-top-medium-at-extra-large

With these classes the top margin will be base until the medium screen width. Then the margin will be line from the medium screen width until the extra-large screen width. Finally, the margin will be medium from extra-large screens and larger.

Offset

You can offset an element, which adds a negative margin, by specifying the followign: 

offset-<type>

This adds a negative margin of <type> equally to all sides of an element. 

offset-base
offset-line
offset-small
offset-medium
offset-large
offset-horiz-<type>

This adds a negative margin of <type> (base, line, etc) only to the left and right of an element. 

offset-<position>-<type>

This adds a negative margin of <type> (base, line, etc) to the specified <position> (top, bottom, left, right) of an element.

Responsive Offsets

You can change the offset on a given element based on the screen width (extra-small, small, medium, large, extra-large) by appending any of the classes above with -at-<screen-width>

For instance if you wanted offset-bottom-medium to apply to an element only at screen width sizes medium or wider, you would write the class as offset-bottom-medium-at-medium.

If you wanted the offset-top-base to apply only on all small screen sizes (even smaller than extra-small) and offset-top-line to apply on larger screen sizes greater than medium and offset-top-medium to apply to the largest screen size, you would specify an element's class as the following: 

offset-top-base offset-top-line-at-medium offset-top-medium-at-extra-large

With these classes the top margin will be - base until the medium screen width. Then the margin will be - line from the medium screen width until the extra-large screen width. Finally, the margin will be - medium from extra-large screens and larger.