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