diff options
2 files changed, 183 insertions, 31 deletions
| -rw-r--r-- | docs/src/contents/grid.pug | 172 | ||||
| -rw-r--r-- | docs/src/layout.pug | 42 |
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug index e69de29..d0172fb 100644 --- a/docs/src/contents/grid.pug +++ b/docs/src/contents/grid.pug @@ -0,0 +1,172 @@ +p + | Layout includes flexbox based responsive grid system with 12 columns. + +.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. + +.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. + +.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. + +.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>
\ No newline at end of file diff --git a/docs/src/layout.pug b/docs/src/layout.pug index 3f1e270..3adaf6e 100644 --- a/docs/src/layout.pug +++ b/docs/src/layout.pug @@ -1,39 +1,19 @@ extends _docs-layout.pug block variables - - var title = 'Elements - Spectre.css CSS Framework' + - var title = 'Layout - Spectre.css CSS Framework' - var description = '' - - var current = 'elements' + - var current = 'layout' block docs-content - //- Typography - +docs-heading('typography', 'Typography') - include contents/typography.pug + //- Flexbox grid + +docs-heading('grid', 'Flexbox grid') + include contents/grid.pug - //- Tables - +docs-heading('tables', 'Tables') - include contents/tables.pug + //- Responsive + +docs-heading('responsive', 'Responsive') + include contents/responsive.pug - //- Buttons - +docs-heading('buttons', 'Buttons') - include contents/buttons.pug - - //- Forms - +docs-heading('forms', 'Forms') - include contents/forms.pug - - //- Icons - +docs-heading('icons', 'Icons') - include contents/icons.pug - - //- Labels - +docs-heading('labels', 'Labels') - include contents/labels.pug - - //- Codes - +docs-heading('code', 'Code') - include contents/code.pug - - //- Media - +docs-heading('media', 'Media') - include contents/media.pug
\ No newline at end of file + //- Navbar + +docs-heading('navbar', 'Navbar') + include contents/navbar.pug
\ No newline at end of file |