Responsive

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

col-10
col-lg-8
col-lg-8
col-md-6
col-md-6
col-sm-4
col-sm-4
col-2
col-lg-4
col-lg-4
col-md-6
col-md-6
col-sm-8
col-sm-8

There are col-xs-<1-12>, col-sm-<1-12>, col-md-<1-12>, col-lg-<1-12> and col-xl-<1-12> available for flexible grid across mobile, tablet and desktop viewport usage.

  • col-xs-<1-12> apply to window width smaller than or equal to 480px.
  • col-sm-<1-12> apply to window width smaller than or equal to 600px.
  • col-md-<1-12> apply to window width smaller than or equal to 840px.
  • col-lg-<1-12> apply to window width smaller than or equal to 960px.
  • col-xl-<1-12> apply to window width smaller than or equal to 1280px.
  • col-<1-12> apply to all window width, including the width wider than 1280px.
<div class="container">
  <div class="columns">
    <div class="column col-xs-6">col-xs-6</div>
    <div class="column col-xs-3">col-xs-3</div>
    <div class="column col-xs-3">col-xs-3</div>
  </div>
</div>

Responsive container

The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm(600px), grid-md(840px), grid-lg(960px) or grid-xl(1280px) to the container for a fixed-width container with the specific max-width.

<!-- 100% width container with max-width set to grid-lg (960px) -->
<div class="container grid-lg">
  <div class="columns">
    ...
  </div>
</div>

Responsive visibility

The responsive visibility utilities help show and hide elements on specific viewport sizes.

size-xs size-sm size-md size-lg size-xl
hide-xs
hide-sm
hide-md
hide-lg
hide-xl

For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.

  • hide-xs hides elements when the window width is smaller than or equal to 480px.
  • hide-sm hides elements when the window width is smaller than or equal to 600px.
  • hide-md hides elements when the window width is smaller than or equal to 840px.
  • hide-lg hides elements when the window width is smaller than or equal to 960px.
  • hide-xl hides elements when the window width is smaller than or equal to 1280px.
size-xs size-sm size-md size-lg size-xl
show-xs
show-sm
show-md
show-lg
show-xl

For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.

  • show-xs shows elements when the window width is smaller than or equal to 480px.
  • show-sm shows elements when the window width is smaller than or equal to 600px.
  • show-md shows elements when the window width is smaller than or equal to 840px.
  • show-lg shows elements when the window width is smaller than or equal to 960px.
  • show-xl shows elements when the window width is smaller than or equal to 1280px.

Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.

Responsive Resizer