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 class columns to a container with the class container. And add any element you want with classname column 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 class col-gapless to have gapless columns.

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

By default, Spectre grid has multi-line flexbox enabled. You can add the class col-oneline 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>

Responsive grid

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

col-lg-6
col-md-6
col-sm-6
col-xs-6

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.

  • For window width less than 480px, all columns will show as a single row.
  • 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. 
<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 visibility

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

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 use it locally in the directory /tools/resizer.

Empty states / blank slates

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

You have no new messages

Click the button to start a conversation

You've successfully signed up

Click the button to invite your friends

You are not following anyone

Start to meet new friends

An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-meta or empty-action to the elements. HTML structure is exampled below. 

<div class="empty">
  <div class="empty-icon">
    <i class="icon icon-people"></i>
  </div>
  <h4 class="empty-title">You have no new messages</h4>
  <p class="empty-meta">Click the button to start a conversation.</p>
  <div class="empty-action">
    <button class="btn btn-primary">Send a message</button>
  </div>
</div>