From c8c8ec045ad7337e6cb6f7d6c07f6a0900e2cd54 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 18:44:10 +0800 Subject: Update Flexbox grid to new Pug template --- docs/src/contents/grid.pug | 172 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) (limited to 'docs/src/contents') 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") + +
+
+
col-6
+
col-3
+
col-2
+
col-1
+
+
+ +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") + +
+
col-6
+
col-6
+
+ +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") + +
+
col-8
+
col-8
+
+ ++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") + +
+
+
col-4 col-mr-auto
+
col-2
+
+
+ ++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") + +
+
+
col-6 +
+
col-6
+
col-6
+
+
+
col-6
+
+
\ No newline at end of file -- cgit v1.3.1-23-gd82d