Responsive - Layout - Spectre.css CSS Framework
Author: Yan Zhu
Description: Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

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

Elements

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

Layout

- Flexbox grid
- Responsive
- Hero
- 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

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

### 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.

#### Responsive Resizer#

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

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

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