From 14552514e53b3ef5b5037caaa9bec43936c3c1cf Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 16 Dec 2018 18:43:09 +0800 Subject: Add Auto width column #541 --- docs/src/layout/grid.pug | 115 +++++++++++++++++++++++++++-------------- docs/src/layout/responsive.pug | 2 + 2 files changed, 77 insertions(+), 40 deletions(-) (limited to 'docs/src/layout') 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
col-8
- +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") + +
+
+
col-6 +
+
col-6
+
col-6
+
+
+
col-6
+
+
+ + +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 - +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") - +
-
col-6 -
-
col-6
-
col-6
-
-
-
col-6
+
col-auto
+
col
+
+
+ +
+
+
col-lg-auto
+
col
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 -- cgit v1.3.1-23-gd82d