diff options
Add Auto width column #541
2 files changed, 77 insertions, 40 deletions
| -rw-r--r-- | docs/src/layout/grid.pug | 115 | ||||
| -rw-r--r-- | docs/src/layout/responsive.pug | 2 |
diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug index 2c8b7b6..5c054a8 100644 --- a/docs/src/layout/grid.pug +++ b/docs/src/layout/grid.pug @@ -17,27 +17,27 @@ block docs-content .column .bg-primary.text-secondary.docs-block .column - .bg-primary.text-secondary.docs-block + .bg-secondary.text-primary.docs-block .column .bg-primary.text-secondary.docs-block .column - .bg-primary.text-secondary.docs-block + .bg-secondary.text-primar.docs-block .column .bg-primary.text-secondary.docs-block .column - .bg-primary.text-secondary.docs-block + .bg-secondary.text-primar.docs-block .column .bg-primary.text-secondary.docs-block .column - .bg-primary.text-secondary.docs-block + .bg-secondary.text-primar.docs-block .column .bg-primary.text-secondary.docs-block .column - .bg-primary.text-secondary.docs-block + .bg-secondary.text-primar.docs-block .column .bg-primary.text-secondary.docs-block .column - .bg-primary.text-secondary.docs-block + .bg-secondary.text-primar.docs-block .columns .column.col-12 .bg-gray.docs-block col-12 (100%) @@ -78,7 +78,7 @@ block docs-content .column.col-6 .bg-gray.docs-block col-6 (gapless) .column.col-6 - .bg-gray.docs-block col-6 (gapless) + .bg-secondary.text-primary.docs-block col-6 (gapless) pre.code(data-lang='HTML') code @@ -107,40 +107,72 @@ block docs-content <div class="column col-8">col-8</div> </div> - +docs-subheading('grid-offset', 'Grid offset') + +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-secondary.text-primary.docs-block col-6 + .column.col-6 + .bg-secondary.text-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> + + +docs-subheading('grid-offset', 'Column 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 + .columns.text-center .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 + .bg-secondary.text-primary.docs-block col-4 col-mx-auto + .columns.text-center .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 + .bg-secondary.text-primary.docs-block col-4 col-ml-auto + .columns.text-center .column.col-4.col-ml-auto - .bg-gray.docs-block col-4 col-ml-auto + .bg-secondary.text-primary.docs-block col-4 col-ml-auto .column.col-2 .bg-gray.docs-block col-2 - .columns + .columns.text-center .column.col-4.col-mx-auto - .bg-gray.docs-block col-4 col-mx-auto + .bg-secondary.text-primary.docs-block col-4 col-mx-auto .column.col-2 .bg-gray.docs-block col-2 - .columns + .columns.text-center .column.col-4.col-mr-auto - .bg-gray.docs-block col-4 col-mr-auto + .bg-secondary.text-primary.docs-block col-4 col-mr-auto .column.col-2 .bg-gray.docs-block col-2 - .columns + .columns.text-center .column.col-4.col-mx-auto - .bg-gray.docs-block col-4 col-mx-auto + .bg-secondary.text-primary.docs-block col-4 col-mx-auto pre.code(data-lang='HTML') code @@ -153,35 +185,38 @@ block docs-content </div> </div> - +docs-subheading('grid-nesting', 'Grid nesting') + +docs-subheading('column-auto', 'Auto width column') p - | To nest grids, add the new #[code columns] and #[code column] structure within an existing column. + | You can add the #[code col-auto] class to the #[code column] to have auto width columns. + | There are #[code col-xl-auto], #[code col-lg-auto], #[code col-md-auto], #[code col-sm-auto] and #[code col-xs-auto] to set auto width in different viewport sizes. - .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 + .columns + .column.col-auto + .bg-secondary.text-primary.docs-block col-auto + .column + .bg-gray.docs-block col + .columns + .column.col-lg-auto.col-6 + .bg-secondary.text-primary.docs-block col-lg-auto + .column + .bg-gray.docs-block col pre.code(data-lang='HTML') code :highlight(lang="html") - <!-- grid nesting example --> + <!-- auto width column 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 class="column col-auto">col-auto</div> + <div class="column">col</div> + </div> + </div> + + <div class="container"> + <div class="columns"> + <div class="column col-lg-auto col-6">col-lg-auto</div> + <div class="column">col</div> </div> </div> diff --git a/docs/src/layout/responsive.pug b/docs/src/layout/responsive.pug index 378bff2..74d284d 100644 --- a/docs/src/layout/responsive.pug +++ b/docs/src/layout/responsive.pug @@ -256,6 +256,8 @@ block docs-content li | #[code show-xl] shows elements when the window width is smaller than or equal to #[strong 1280px]. + +docs-subheading('responsive-resizer', 'Responsive Resizer') + p | Spectre also has a responsive web test tool Responsive Resizer. | You can clone the |