extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'responsive'
  - var parent = 'layout'
  - var title = 'Responsive - Layout - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

block docs-content
  +docs-heading('responsive', 'Responsive')
    include ../_layout/_ad-g.pug

    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

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug