GitHub

Layout

Flexbox grid

Layout includes flexbox based responsive grid system with 12 columns.

col-12 (100%)
col-9 (75%)
col-6 (50%)
col-3 (25%)

Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

And you can add the col-gapless class to the columns to have gapless columns.

col-6 (gapless)
col-6 (gapless)

By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

col-8
col-8
<div class="container">
  <div class="columns">
    <div class="column col-6">col-6</div>
    <div class="column col-3">col-3</div>
    <div class="column col-2">col-2</div>
    <div class="column col-1">col-1</div>
  </div>

  <div class="columns col-gapless">
    <div class="column col-6">col-6</div>
    <div class="column col-6">col-6</div>
  </div>

  <div class="columns col-oneline">
    <div class="column col-8">col-8</div>
    <div class="column col-8">col-8</div>
  </div>
</div>

Grid offset

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

col-2
col-4 col-mx-auto
col-2
col-4 col-ml-auto
col-4 col-ml-auto
col-2
col-4 col-mx-auto
col-2
col-4 col-mr-auto
col-2
col-4 col-mx-auto
<div class="container">
  <div class="columns">
    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
    <div class="column col-2">col-2</div>
  </div>
</div>

Responsive

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

col-10
col-lg-8
col-md-6
col-sm-4
col-2
col-lg-4
col-md-6
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 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