Responsive Grid

Designing to a Responsive Layout

The following breakpoints have been designed to guide the layout and the scaling of fonts across screen resolutions:

• xs (0px - 543px) - Extra small screen / mobile
• sm (544px - 795px) - Small screen / vertical tablet
• md (796px - 1047px) - Medium screen / horizontal tablet
• lg (1048px - 1799px) - Large screen / desktop
• xl (1800px - ∞px) - Extra large screen / wide desktop

Screen Size Templates

For designers working on responsive applications, download the Sketch or Photoshop template in the Resources section. This template includes several common screen sizes along with the corresponding 12-column responsive grid and baseline grid to guide your layout.

See Typography for more information about baseline grids and how font sizes increase and decrease according to screen resolution.

Responsive Grid and Spacing

• All screens have a 12-column structure guiding layout and font size.
• Each column has 12px padding or 1rem on either side.
• When two columns are next to each other, there is a total of 24px (2rem) of padding (called the “gutter”). At the small and xs breakpoints, this gutter decreases to 12px (1rem) to allow more space for content.
• This allows content to flex with the columns, while the gutters remain fixed (at 24px or 12px, depending on the screen size).
• Margins may flex for design in order to achieve whole-pixel widths on columns; however when coded they do adhere to the base unit as follows:

Small - XLarge

XSmall

Developer Notes

Spark’s responsive grid is based on a 12 column layout with five distinct breakpoints based on device width.

Breakpoints

There are five named breakpoints built into the Spark codebase. They are xs, sm, md, lg and xl. These names are used extensively by the grid system to define which breakpoints a style should apply to.

When writing your own styles using SASS you can use Spark’s breakpoint mixins to leverage our predefined set of breakpoints.

Grid Classes

The grid can be broken down into three pieces:

Containers

Any portion of your application utilizing the responsive grid should be wrapped in an element with the container content. This centers the content horizontally, provides padding and sets a maximum width to the container (1920px for xl, 1368px for lg, 1008px for md and 768px for sm).

A container element.

Rows

Rows contain many columns. They ensure your columns are properly aligned inside a container. A container will likely contain many rows.

A row element.

Columns

Columns contain the content. They are created by adding a class of col-*-* to an element. The first * should be replaced with the name of the breakpoint you would like to target, and the second with the number of columns you'd like your element to span.

Breakpoints targeted in a column class name are minimum widths. This means they target the given breakpoint any any above. For example, a class of col-md-8 would affect sizing on medium, large, and extra large (but not extra small or small) screens. Similarly, col-lg-2 would span 2 of the 12 columns on any breakpoint from large up. By using multiple column classes is is possible to create content which displays differently at various screen sizes.

Columns will wrap to a new line when their total width exceeds 100%.

A column element inside a row.

The grid in action

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="spark-panel spark-panel--card spark-nested">
        <div class="spark-panel__content">
          <h3>
            Panel 1 heading
          </h3>
          <p>
            Donec tincidunt vitae magna non ultricies.
          </p>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="spark-panel spark-panel--card spark-nested">
        <div class="spark-panel__content">
          <h3>
            Panel 2 heading
          </h3>
          <p>
            Donec tincidunt vitae magna non ultricies.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Column modifier classes

When positioning columns horizontally, sometimes their combined width may not equal 100%. It is possible to horizontally offset columns using the offset-*-* classes. For example, a class of offset-sm-6 would shift an element right six columns at and above the sm breakpoint.

The push-*-* and pull-*-* helpers allow for shifting the position of content. This is particularly useful for reordering content.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 offset-sm-6">
      <div class="spark-panel spark-panel--card spark-nested">
        <div class="spark-panel__content">
          <h3>
            Panel 1 heading
          </h3>
          <p>
            Offsets on small screens and up.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 push-sm-6 spark-mar-t-1">
      <div class="spark-panel spark-panel--card spark-nested">
        <div class="spark-panel__content">
          <h3>
            Panel 2 heading
          </h3>
          <p>
            Is first on extra small screens.
          </p>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 pull-sm-6 spark-mar-t-1">
      <div class="spark-panel spark-panel--card spark-nested">
        <div class="spark-panel__content">
          <h3>
            Panel 3 heading
          </h3>
          <p>
            Is first on small screens and up.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

SASS Mixins

Spark provides a set of SASS mixins for defining styles for specific breakpoints. These mixins can target all breakpoints above a given target, all breakpoints below a given target, all breakpoints between two given targets, or one specific breakpoint.

// Breakpoint mixins
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-between(md, lg) { ... }
@include media-breakpoint-only(sm) { ... }

// Example
@include media-breakpoint-up(sm) {
  .class-name {
    display: none;
  }
}

Additional CSS

Spark leverages a version of of the Twitter Bootstrap v4 grid, but Bootstrap is not a dependency of Spark.

Spark offers a set of CSS classes to solve small, common problems and enforce consistency when using the responsive grid.