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

.docs-demo.columns
  .column.col-10.col-lg-8.col-md-6.col-sm-4
    .bg-gray.docs-block
      | col-10 
      br
      |  col-lg-8 
      br
      |  col-md-6 
      br
      |  col-sm-4
  .column.col-2.col-lg-4.col-md-6.col-sm-8
    .bg-gray.docs-block
      | col-2 
      br
      |  col-lg-4 
      br
      |  col-md-6 
      br
      |  col-sm-8

p
  | There are #[code col-xs-<1-12>], #[code col-sm-<1-12>], #[code col-md-<1-12>], #[code col-lg-<1-12>] and #[code col-xl-<1-12>] available for flexible grid across mobile, tablet and desktop viewport usage.

ul
  li
    | #[code col-xs-<1-12>] apply to window width smaller than or equal to #[strong 480px].
  li
    | #[code col-sm-<1-12>] apply to window width smaller than or equal to #[strong 600px].
  li
    | #[code col-md-<1-12>] apply to window width smaller than or equal to #[strong 840px].
  li
    | #[code col-lg-<1-12>] apply to window width smaller than or equal to #[strong 960px].
  li
    | #[code col-xl-<1-12>] apply to window width smaller than or equal to #[strong 1280px].
  li
    | #[code col-<1-12>] apply to all window width, including the width wider than #[strong 1280px].

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <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>

+docs-subheading('responsive-container', 'Responsive container')

p
  | The responsive layout also provides fixed-width containers.
  | Use #[code grid-xs](480px), #[code grid-sm](600px), #[code grid-md](840px), #[code grid-lg](960px) or #[code grid-xl](1280px) to the container for a fixed-width container with the specific max-width.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <!-- 100% width container with max-width set to grid-lg (960px) -->
      <div class="container grid-lg">
        <div class="columns">
          ...
        </div>
      </div>

+docs-subheading('responsive-visibility', 'Responsive visibility')

p The responsive visibility utilities help show and hide elements on specific viewport sizes.

.docs-demo.columns
  .column.col-12
    table.docs-table.table.table-striped.text-center
      thead
        tr
          th
          th size-xs
          th size-sm
          th size-md
          th size-lg
          th size-xl
      tbody
        tr
          td.text-left hide-xs
          td
            .bg-secondary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
        tr
          td.text-left hide-sm
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
        tr
          td.text-left hide-md
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
        tr
          td.text-left hide-lg
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-primary.docs-dot
        tr
          td.text-left hide-xl
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot

p
  | For hiding elements on specific viewport sizes, there are classes #[code hide-xs], #[code hide-sm], #[code hide-md], #[code hide-lg] and #[code hide-xl] available.

ul
  li
    | #[code hide-xs] hides elements when the window width is smaller than or equal to #[strong 480px].
  li
    | #[code hide-sm] hides elements when the window width is smaller than or equal to #[strong 600px].
  li
    | #[code hide-md] hides elements when the window width is smaller than or equal to #[strong 840px].
  li
    | #[code hide-lg] hides elements when the window width is smaller than or equal to #[strong 960px].
  li
    | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px].

.docs-demo.columns
  .column.col-12
    table.docs-table.table.table-striped.text-center
      thead
        tr
          th
          th size-xs
          th size-sm
          th size-md
          th size-lg
          th size-xl
      tbody
        tr
          td.text-left show-xs
          td
            .bg-primary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
        tr
          td.text-left show-sm
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
        tr
          td.text-left show-md
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-secondary.docs-dot
          td
            .bg-secondary.docs-dot
        tr
          td.text-left show-lg
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-secondary.docs-dot
        tr
          td.text-left show-xl
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot
          td
            .bg-primary.docs-dot

p
  | For showing elements on specific viewport sizes, there are classes #[code show-xs], #[code show-sm], #[code show-md], #[code show-lg] and #[code show-xl] available.

ul
  li
    | #[code show-xs] shows elements when the window width is smaller than or equal to #[strong 480px].
  li
    | #[code show-sm] shows elements when the window width is smaller than or equal to #[strong 600px].
  li
    | #[code show-md] shows elements when the window width is smaller than or equal to #[strong 840px].
  li
    | #[code show-lg] shows elements when the window width is smaller than or equal to #[strong 960px].
  li
    | #[code show-xl] shows elements when the window width is smaller than or equal to #[strong 1280px].

p
  | Spectre also has a responsive web test tool Responsive Resizer. 
  | You can clone the 
  a(href="https://github.com/picturepan2/responsive-resizer" target="_blank") GitHub Repo
  |  to use it locally or use it online.
p
  a.btn.btn-primary(href="https://picturepan2.github.io/responsive-resizer/" target="_blank") Responsive Resizer