From 414997baa83858b43e9f45af90097f93ed2d6797 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 10:51:59 -0800 Subject: flip things around again, no more base class, try out some new stuff to keep responsive flex grid working --- docs/layout/flexbox-grid.md | 68 +++++++++++++++----------- docs/layout/grid.md | 116 ++++++++++++++++++++++---------------------- 2 files changed, 97 insertions(+), 87 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 2c78101d6..6faa2e78e 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -30,19 +30,29 @@ Chill? Awesome—keep reading for more information and some code snippets. ## Auto-layout columns -As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col`s and you're good to go. +As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col-*`s for each breakpoint you need and you're good to go.
{% example html %}
-
+
+ One of two columns +
+
+ One of two columns +
+
+
+
+
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -56,13 +66,13 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -78,35 +88,35 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -118,13 +128,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -140,42 +150,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt {% example html %}
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 547284635..75ee5d9c3 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -35,13 +35,13 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -268,31 +268,31 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
{% example html %}
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
-
md-8
-
md-4
+
md-8
+
md-4
-
md-4
-
md-4
-
md-4
+
md-4
+
md-4
+
md-4
-
md-6
-
md-6
+
md-6
+
md-6
{% endexample %}
@@ -305,21 +305,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small {% example html %}
-
.col .col-xs-12 .col-md-8
-
.col .col-xs-6 .col-md-4
+
.col-xs-12 .col-md-8
+
.col-xs-6 .col-md-4
-
.col .col-xs-6 .col-md-4
-
.col .col-xs-6 .col-md-4
-
.col .col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col .col-xs-6
-
.col .col-xs-6
+
.col-xs-6
+
.col-xs-6
{% endexample %}
@@ -331,15 +331,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
{% example html %}
-
.col-xs-12 .col-sm-6 .col-md-8
-
.col .col-xs-6 .col-md-4
+
.col-xs-12 .col-sm-6 .col-md-8
+
.col-xs-6 .col-md-4
-
.col .col-xs-6 .col-sm-4
-
.col .col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
-
.col .col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
{% endexample %}
@@ -351,9 +351,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
{% example html %}
-
.col .col-xs-9
-
.col .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
-
.col .col-xs-6
Subsequent columns continue along the new line.
+
.col-xs-9
+
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col-xs-6
Subsequent columns continue along the new line.
{% endexample %}
@@ -365,14 +365,14 @@ With the four tiers of grids available you're bound to run into issues where, at
{% example html %}
-
.col .col-xs-6 .col-sm-3
-
.col .col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
-
.col .col-xs-6 .col-sm-3
-
.col .col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
{% endexample %}
@@ -382,13 +382,13 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
{% example html %}
-
.col .col-sm-5 .col-md-6
-
.col .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+
.col-sm-5 .col-md-6
+
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-
.col.col-sm-6.col-md-5.col-lg-6
-
.col .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
+
.col.col-sm-6.col-md-5.col-lg-6
+
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
{% endexample %}
@@ -400,15 +400,15 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
{% example html %}
-
.col-md-4
-
.col-md-4 .offset-md-4
+
.col-md-4
+
.col-md-4 .offset-md-4
-
.col .col-md-3 .offset-md-3
-
.col .col-md-3 .offset-md-3
+
.col-md-3 .offset-md-3
+
.col-md-3 .offset-md-3
-
.col .col-md-6 .offset-md-3
+
.col-md-6 .offset-md-3
{% endexample %}
@@ -420,14 +420,14 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
{% example html %}
-
- Level 1: .col .col-sm-9 +
+ Level 1: .col-sm-9
-
- Level 2: .col .col-xs-8 .col-sm-6 +
+ Level 2: .col-xs-8 .col-sm-6
-
- Level 2: .col .col-xs-4 .col-sm-6 +
+ Level 2: .col-xs-4 .col-sm-6
@@ -442,8 +442,8 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
{% example html %}
-
.col .col-md-9 .push-md-3
-
.col .col-md-3 .pull-md-9
+
.col-md-9 .push-md-3
+
.col-md-3 .pull-md-9
{% endexample %}
-- cgit v1.2.3