diff options
Update the Docs completely
3 files changed, 538 insertions, 0 deletions
| -rw-r--r-- | docs/src/layout/grid.pug | 187 | ||||
| -rw-r--r-- | docs/src/layout/navbar.pug | 82 | ||||
| -rw-r--r-- | docs/src/layout/responsive.pug | 269 |
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") + <!-- flexbox grid example --> + <div class="container"> + <div class="columns"> + <div class="column col-6">col-6</div> + <div class="column col-3">col-3</div> + <div class="column col-2">col-2</div> + <div class="column col-1">col-1</div> + </div> + </div> + + 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") + <!-- gapless columns --> + <div class="columns col-gapless"> + <div class="column col-6">col-6</div> + <div class="column col-6">col-6</div> + </div> + + 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") + <!-- one line columns --> + <div class="columns col-oneline"> + <div class="column col-8">col-8</div> + <div class="column col-8">col-8</div> + </div> + + +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") + <!-- grid offset example --> + <div class="container"> + <div class="columns"> + <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div> + <div class="column col-2">col-2</div> + </div> + </div> + + +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") + <!-- grid nesting example --> + <div class="container"> + <div class="columns"> + <div class="column col-6">col-6 + <div class="columns"> + <div class="column col-6">col-6</div> + <div class="column col-6">col-6</div> + </div> + </div> + <div class="column col-6">col-6</div> + </div> + </div> + + 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") + <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. + + .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") + <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> + + 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") + <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 |