diff options
Update responsive and navbar to new Pug templates
3 files changed, 652 insertions, 0 deletions
| -rw-r--r-- | docs/layout.html | 332 | ||||
| -rw-r--r-- | docs/src/contents/navbar.pug | 66 | ||||
| -rw-r--r-- | docs/src/contents/responsive.pug | 254 |
diff --git a/docs/layout.html b/docs/layout.html index 7878690..95f95f2 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -327,9 +327,341 @@ </div> <div class="container" id="responsive"> <h3 class="s-title"><a class="anchor" href="#responsive" aria-hidden="true">#</a>Responsive</h3> + <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p> + <div class="columns"> + <div class="column col-10 col-lg-8 col-md-6 col-sm-4"> + <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div> + </div> + <div class="column col-2 col-lg-4 col-md-6 col-sm-8"> + <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div> + </div> + </div> + <p>There are <code>col-xs-<1-12></code>, <code>col-sm-<1-12></code>, <code>col-md-<1-12></code>, <code>col-lg-<1-12></code> and <code>col-xl-<1-12></code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> + <ul> + <li><code>col-xs-<1-12></code> apply to window width smaller than or equal to <strong>480px</strong>.</li> + <li><code>col-sm-<1-12></code> apply to window width smaller than or equal to <strong>600px</strong>.</li> + <li><code>col-md-<1-12></code> apply to window width smaller than or equal to <strong>840px</strong>.</li> + <li><code>col-lg-<1-12></code> apply to window width smaller than or equal to <strong>960px</strong>.</li> + <li><code>col-xl-<1-12></code> apply to window width smaller than or equal to <strong>1280px</strong>.</li> + <li><code>col-<1-12></code> apply to all window width, including the width wider than <strong>1280px</strong>.</li> + </ul> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-6"</span>></span>col-xs-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>></span>col-xs-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>></span>col-xs-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="responsive-container"><a class="anchor" href="#responsive-container" aria-hidden="true">#</a>Responsive container</h4> + <p> + The responsive layout also provides fixed-width containers. + Use <code>grid-xs</code>(480px), <code>grid-sm</code>(600px), <code>grid-md</code>(840px), <code>grid-lg</code>(960px) or <code>grid-xl</code>(1280px) to the container for a fixed-width container with the specific max-width. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- 100% width container with max-width set to grid-lg (960px) --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container grid-lg"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> + ... + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="responsive-visibility"><a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a>Responsive visibility</h4> + <p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p> + <div class="columns"> + <div class="column col-12"> + <table class="docs-table table table-striped text-center"> + <thead> + <tr> + <th></th> + <th>size-xs</th> + <th>size-sm</th> + <th>size-md</th> + <th>size-lg</th> + <th>size-xl</th> + </tr> + </thead> + <tbody> + <tr> + <td class="text-left">hide-xs</td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">hide-sm</td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">hide-md</td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">hide-lg</td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">hide-xl</td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p> + <ul> + <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>.</li> + <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>.</li> + <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>.</li> + <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>.</li> + <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>.</li> + </ul> + <div class="columns"> + <div class="column col-12"> + <table class="docs-table table table-striped text-center"> + <thead> + <tr> + <th></th> + <th>size-xs</th> + <th>size-sm</th> + <th>size-md</th> + <th>size-lg</th> + <th>size-xl</th> + </tr> + </thead> + <tbody> + <tr> + <td class="text-left">show-xs</td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">show-sm</td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">show-md</td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">show-lg</td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-secondary docs-dot"></div> + </td> + </tr> + <tr> + <td class="text-left">show-xl</td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + <td> + <div class="bg-primary docs-dot"></div> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p> + <ul> + <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>.</li> + <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>.</li> + <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>.</li> + <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>.</li> + <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>.</li> + </ul> + <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</a> to use it locally or use it online. + </p> + <p><a class="btn btn-primary" href="https://picturepan2.github.io/responsive-resizer/" target="_blank">Responsive Resizer</a></p> </div> <div class="container" id="navbar"> <h3 class="s-title"><a class="anchor" href="#navbar" aria-hidden="true">#</a>Navbar</h3> + <p>Navbar is a layout container that appears in the header of apps and websites.</p> + <div class="columns"> + <div class="column"> + <div class="navbar"> + <div class="navbar-section"><a class="navbar-brand mr-2" href="#navbar">Spectre.css</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div> + <div 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> + </div> + </div> + </div> + </div> + <p> + The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. + Each section with the <code>navbar-section</code> class will be evenly distributed in the container. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-brand mr-2"</span>></span>Spectre.css<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Docs<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>GitHub<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">section</span>></span> + <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"search"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">section</span>></span> +<span class="hljs-tag"></<span class="hljs-name">header</span>></span> +</code></pre> + <p>You can use <code>navbar-center</code> class to have a centered section.</p> + <div class="columns"> + <div class="column col-12"> + <div class="navbar"> + <div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div> + <div class="navbar-center"><img src="img/spectre-logo.svg" alt="Spectre.css"></div> + <div class="navbar-section"><a class="btn btn-link" href="https://twitter.com/spectrecss">Twitter</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Docs<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Examples<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">section</span>></span> + <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-center"</span>></span> + <span class="hljs-comment"><!-- centered logo or brand --></span> + <span class="hljs-tag"></<span class="hljs-name">section</span>></span> + <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Twitter<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>GitHub<span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"></<span class="hljs-name">section</span>></span> +<span class="hljs-tag"></<span class="hljs-name">header</span>></span></code></pre> </div> </div> </div> diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug index e69de29..21d13e4 100644 --- a/docs/src/contents/navbar.pug +++ b/docs/src/contents/navbar.pug @@ -0,0 +1,66 @@ +p Navbar is a layout container that appears in the header of apps and websites. + +.columns + .column + .navbar + .navbar-section + a.navbar-brand.mr-2(href="#navbar") Spectre.css + a.btn.btn-link(href="#navbar") Docs + a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub + .navbar-section + .input-group.input-inline + input.form-input(type="text" placeholder="search") + button.btn.btn-primary.input-group-btn Search + +p + | The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. + | Each section with the #[code navbar-section] class will be evenly distributed in the container. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <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> + +p + | You can use #[code navbar-center] class to have a centered section. + +.columns + .column.col-12 + .navbar + .navbar-section + a.btn.btn-link(href="#navbar") Docs + a.btn.btn-link(href="#navbar") Examples + .navbar-center + img(src="img/spectre-logo.svg" alt="Spectre.css") + .navbar-section + a.btn.btn-link(href="https://twitter.com/spectrecss") Twitter + a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <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>
\ No newline at end of file diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug index e69de29..8898958 100644 --- a/docs/src/contents/responsive.pug +++ b/docs/src/contents/responsive.pug @@ -0,0 +1,254 @@ +p Spectre provides a neat responsive layout grid system and responsive visibility utilities. + +.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. + +.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]. + +.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 + |