diff options
Update responsive and navbar to new Pug templates
2 files changed, 320 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/navbar.pug | 66 | ||||
| -rw-r--r-- | docs/src/contents/responsive.pug | 254 |
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 + |