GitHub

## SPECTRE

Getting started

- Introduction
- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Flexbox grid#

Layout includes flexbox based responsive grid system with 12 columns.

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

    <!-- flexbox grid example -->
    <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>

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)

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

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

    <!-- one line columns -->
    <div class="columns col-oneline">
      <div class="column col-8">col-8</div>
      <div class="column col-8">col-8</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

    <!-- grid offset example -->
    <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>

#### Grid nesting#

To nest grids, add the new `columns` and `column` structure within an existing column.

col-6
col-6
col-6
col-6

    <!-- grid nesting example -->
    <div class="container">
      <div class="columns">
        <div class="column col-6">col-6
          <div class="columns">
            <div class="column col-6">col-6</div>
            <div class="column col-6">col-6</div>
          </div>
        </div>
        <div class="column col-6">col-6</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 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

### Navbar#

Navbar is a layout container that appears in the header of apps and websites.

Spectre.css Docs GitHub

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the `navbar-section` class will be evenly distributed in the container.

    <header class="navbar">
      <section class="navbar-section">
        <a href="..." class="navbar-brand mr-2">Spectre.css</a>
        <a href="..." class="btn btn-link">Docs</a>
        <a href="..." class="btn btn-link">GitHub</a>
      </section>
      <section class="navbar-section">
        <div class="input-group input-inline">
          <input class="form-input" type="text" placeholder="search">
          <button class="btn btn-primary input-group-btn">Search</button>
        </div>
      </section>
    </header>

You can use `navbar-center` class to have a centered section.

Docs Examples
Twitter GitHub

    <header class="navbar">
      <section class="navbar-section">
        <a href="#" class="btn btn-link">Docs</a>
        <a href="#" class="btn btn-link">Examples</a>
      </section>
      <section class="navbar-center">
        <!-- centered logo or brand -->
      </section>
      <section class="navbar-section">
        <a href="#" class="btn btn-link">Twitter</a>
        <a href="#" class="btn btn-link">GitHub</a>
      </section>
    </header>

Documents · GitHub · Twitter · PayPal Donate · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.