diff options
Update Flexbox grid to new Pug template
1 files changed, 172 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/grid.pug | 172 |
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 |