From 41ec3e49d63ea45d8aee4f26eeccfedaa20a7f7d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 17 Aug 2017 18:54:07 +0800 Subject: Add Grid offset, more margin and padding utilities --- docs/layout.html | 88 +++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 68 insertions(+), 20 deletions(-) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index cb4d7c7..d4c99da 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -251,8 +251,8 @@
-
-

Flexbox grid

+
+

Flexbox grid

Layout includes flexbox based responsive grid system with 12 columns.

@@ -318,7 +318,7 @@

Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

-

And you can add the col-gapless class to have gapless columns.

+

And you can add the col-gapless class to the columns to have gapless columns.

@@ -356,34 +356,82 @@ <div class="column col-6">col-6</div> <div class="column col-6">col-6</div> </div> + + <div class="columns col-oneline"> + <div class="column col-8">col-8</div> + <div class="column col-8">col-8</div> + </div> </div> -
- -
-

Responsive grid

+

Grid offset

-

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

+

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

+
+ +
+
+
col-2
+
+
+
col-4 col-mx-auto
+
+
+
+
+
col-2
+
+
+
col-4 col-ml-auto
+
-
-
col-lg-6
+
+
col-4 col-ml-auto
+
+
+
col-2
-
-
col-md-6
+
+
col-4 col-mx-auto
+
+
+
col-2
-
-
col-sm-6
+
+
col-4 col-mr-auto
+
+
col-2
+
+
+ + +
<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>
+
+ +
+ +
+

Responsive

+
+

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

-
-
col-xs-6
+
+
col-10
col-lg-8
col-md-6
col-sm-4
+
+
+
col-2
col-lg-4
col-md-6
col-sm-8
@@ -426,7 +474,7 @@

The responsive visibility utilities help show and hide elements on specific viewport sizes.

- +
@@ -492,7 +540,7 @@ -
+
@@ -561,8 +609,8 @@ -
- +