From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/src/layout/grid.pug | 187 ++++++++++++++++++++++++++++ docs/src/layout/navbar.pug | 82 +++++++++++++ docs/src/layout/responsive.pug | 269 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 538 insertions(+) create mode 100644 docs/src/layout/grid.pug create mode 100644 docs/src/layout/navbar.pug create mode 100644 docs/src/layout/responsive.pug (limited to 'docs/src/layout') diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug new file mode 100644 index 0000000..f9725a4 --- /dev/null +++ b/docs/src/layout/grid.pug @@ -0,0 +1,187 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'grid' + - var parent = 'layout' + - var title = 'Flexbox grid - 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('grid', 'Flexbox grid') + include ../_layout/_ad-g.pug + + p + | Layout includes flexbox based responsive grid system with 12 columns. + + .docs-demo.columns + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .column + .bg-primary.text-secondary.docs-block + .columns + .column.col-12 + .bg-gray.docs-block col-12 (100%) + .columns + .column.col-9 + .bg-gray.docs-block col-9 (75%) + .columns + .column.col-6 + .bg-gray.docs-block col-6 (50%) + .columns + .column.col-3 + .bg-gray.docs-block col-3 (25%) + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
+
+
col-6
+
col-3
+
col-2
+
col-1
+
+
+ + p + | Add the #[code columns] class to a container with the #[code container] class. + | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally. + | You can specific the width of each column by adding class #[code col-<1-12>]. + p + | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns. + + .docs-demo.columns.col-gapless + .column.col-6 + .bg-gray.docs-block col-6 (gapless) + .column.col-6 + .bg-gray.docs-block col-6 (gapless) + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
+
col-6
+
col-6
+
+ + p + | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row. + + .docs-demo.columns.col-oneline + .column.col-8 + .bg-gray.docs-block col-8 + .column.col-8 + .bg-gray.docs-block col-8 + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
+
col-8
+
col-8
+
+ + +docs-subheading('grid-offset', 'Grid offset') + + p + | The Flexbox grid provides margin auto utilities to set offset. + | There are #[code col-mx-auto], #[code col-ml-auto] and #[code col-mr-auto] to set margins between columns without using empty columns. + + .columns + .column.col-2 + .bg-gray.docs-block col-2 + .column.col-4.col-mx-auto + .bg-gray.docs-block col-4 col-mx-auto + .columns + .column.col-2 + .bg-gray.docs-block col-2 + .column.col-4.col-ml-auto + .bg-gray.docs-block col-4 col-ml-auto + .columns + .column.col-4.col-ml-auto + .bg-gray.docs-block col-4 col-ml-auto + .column.col-2 + .bg-gray.docs-block col-2 + .columns + .column.col-4.col-mx-auto + .bg-gray.docs-block col-4 col-mx-auto + .column.col-2 + .bg-gray.docs-block col-2 + .columns + .column.col-4.col-mr-auto + .bg-gray.docs-block col-4 col-mr-auto + .column.col-2 + .bg-gray.docs-block col-2 + .columns + .column.col-4.col-mx-auto + .bg-gray.docs-block col-4 col-mx-auto + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
+
+
col-4 col-mr-auto
+
col-2
+
+
+ + +docs-subheading('grid-nesting', 'Grid nesting') + + p + | To nest grids, add the new #[code columns] and #[code column] structure within an existing column. + + .docs-demo.columns + .column.col-6 + .bg-gray.docs-block col-6 + .columns + .column.col-6 + .bg-primary.docs-block col-6 + .column.col-6 + .bg-primary.docs-block col-6 + .column.col-6 + .bg-gray.docs-block col-6 + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
+
+
col-6 +
+
col-6
+
col-6
+
+
+
col-6
+
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file diff --git a/docs/src/layout/navbar.pug b/docs/src/layout/navbar.pug new file mode 100644 index 0000000..45417aa --- /dev/null +++ b/docs/src/layout/navbar.pug @@ -0,0 +1,82 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'navbar' + - var parent = 'layout' + - var title = 'Navbar - 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('navbar', 'Navbar') + include ../_layout/_ad-g.pug + + p Navbar is a layout container that appears in the header of apps and websites. + + .docs-demo.columns + .column + .navbar + .navbar-section + a.navbar-brand.text-bold.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") +
+
+ Spectre.css + Docs + GitHub +
+
+
+ + +
+
+
+ + p + | You can use #[code navbar-center] class to have a centered section. + + .docs-demo.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") +
+
+ Docs + Examples +
+
+ +
+
+ Twitter + GitHub +
+
+ + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug \ No newline at end of file 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") +
+
+
col-xs-6
+
col-xs-3
+
col-xs-3
+
+
+ + +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") + +
+
+ ... +
+
+ + +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 -- cgit v1.3.1-23-gd82d