diff options
Update the Docs completely
1 files changed, 269 insertions, 0 deletions
| -rw-r--r-- | docs/src/layout/responsive.pug | 269 |
diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug new file mode 100644 index 0000000..6516b26 --- /dev/null +++ b/docs/src/layout/responsive.pug @@ -0,0 +1,269 @@ +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
\ No newline at end of file |