diff options
1 files changed, 0 insertions, 254 deletions
| -rw-r--r-- | docs/src/contents/responsive.pug | 254 |
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug deleted file mode 100644 index 9737755..0000000 --- a/docs/src/contents/responsive.pug +++ /dev/null @@ -1,254 +0,0 @@ -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 - |