Spectre CSS

Responsive ​

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

Modifiers ​

The following class name modifiers can be applied to some class names:

  • xs - 480px
  • sm - 600px
  • md - 840px
  • lg - 960px
  • xl - 1280px

On this page, the classes which will be affected by these modifiers are:

  • col-<size>-<1-12> - columns
  • grid-<size> - containers
  • hide-<size> - hide below
  • show-<size> - show below

Demo ​

The following markup combines columns and showing/hiding for different breakpoints.

Resize the window to see:

col-10 (show)
col-lg-8 (hide)
col-lg-8 (show)
col-md-6 (hide)
col-md-6 (show)
col-sm-4 (hide)
col-sm-4 (show)
col-2 (show)
col-lg-4 (hide)
col-lg-4 (show)
col-md-6 (hide)
col-md-6 (show)
col-sm-8 (hide)
col-sm-8 (show)

Spectre also has a responsive testing tool which you can use online or locally by cloning the repo.

Columns ​

The column and col-*-* classes create responsive columns for various breakpoints:

html
<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>

The base classes apply to columns for any window width:

  • col-<1-12> all windows

The following 5 variants apply to columns when the window width is less than or equal to:

  • col-xs-<1-12> - 480px
  • col-sm-<1-12> - 600px
  • col-md-<1-12> - 840px
  • col-lg-<1-12> - 960px
  • col-xl-<1-12> - 1280px

Container ​

The responsive layout also provides fixed-width containers:

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

Add the following classes to the .container for a fixed-width container limited to specific max-widths:

  • grid-xs - 480px
  • grid-sm - 600px
  • grid-md - 840px
  • grid-lg - 960px
  • grid-xl - 1280px

Visibility ​

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

Hiding content ​

Resize the window to see the table headings turn on as the window gets narrower:

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

The following 5 variants hide elements when the window width is less than or equal to:

  • hide-xs - 480px
  • hide-sm - 600px
  • hide-md - 840px
  • hide-lg - 960px
  • hide-xl - 1280px

Showing content ​

Resize the window to see the table headings turn on as the window gets wider:

size-xs size-sm size-md size-lg size-xl
show-xs show-xs
show-sm show-sm
show-md show-md
show-lg show-lg
show-xl show-xl

The following 5 variants show elements when the window width is less than or equal to:

  • show-xs - 480px
  • show-sm - 600px
  • show-md - 840px
  • show-lg - 960px
  • show-xl - 1280px