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 +++++++++++++++++++++++++++++++++++++++++++++ docs/src/layout.pug | 42 +++-------- 2 files changed, 183 insertions(+), 31 deletions(-) (limited to 'docs/src') 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 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 -- cgit v1.3.1-23-gd82d