From cec0c7c6d6c6926dd372a91172c0081bb09fcc09 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 10:54:34 -0600 Subject: Update docs to reflect new breakpoint naming convention --- docs/layout/flexbox-grid.md | 34 +++++++++++++-------------- docs/layout/grid.md | 46 ++++++++++++++++++------------------- docs/layout/responsive-utilities.md | 26 ++++++++++----------- 3 files changed, 53 insertions(+), 53 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index a26314cd6..eafe7b59c 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -76,7 +76,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
1 of 3
-
+
2 of 3 (wider)
@@ -87,7 +87,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
1 of 3
-
+
2 of 3 (wider)
@@ -109,7 +109,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
1 of 3
-
+
Variable width content
@@ -120,7 +120,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
1 of 3
-
+
Variable width content
@@ -133,16 +133,16 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the ## Responsive flexbox -Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. +Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
{% example html %}
-
+
1 of 2 (stacked on mobile)
-
+
1 of 2 (stacked on mobile)
@@ -220,42 +220,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 55607e464..ea0a9862b 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -335,21 +335,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small {% example html %}
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-12 .col-md-8
+
.col-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
-
.col-xs-6
-
.col-xs-6
+
.col-6
+
.col-6
{% endexample %}
@@ -361,15 +361,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-xs-6 .col-md-4
+
.col-12 .col-sm-6 .col-md-8
+
.col-6 .col-md-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col-6 .col-sm-4
{% endexample %}
@@ -381,9 +381,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
{% example html %}
-
.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.
+
.col-9
+
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col-6
Subsequent columns continue along the new line.
{% endexample %}
@@ -395,14 +395,14 @@ With the four tiers of grids available you're bound to run into issues where, at
{% example html %}
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
{% endexample %}
@@ -453,11 +453,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
Level 1: .col-sm-9
-
- Level 2: .col-xs-8 .col-sm-6 +
+ Level 2: .col-8 .col-sm-6
-
- Level 2: .col-xs-4 .col-sm-6 +
+ Level 2: .col-4 .col-sm-6
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 4334eb4d6..6a7a1bb09 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -172,19 +172,19 @@ Resize your browser or load on different devices to test the responsive utility Green checkmarks indicate the element **is visible** in your current viewport.
-
+
✔ Visible on extra small Extra small
-
+
✔ Visible on small or narrower Small or narrower
-
+
✔ Visible on medium or narrower Medium or narrower
-
+
✔ Visible on large or narrower Large or narrower
@@ -193,19 +193,19 @@ Green checkmarks indicate the element **is visible** in your current viewport.
-
+
✔ Visible on small or wider Small or wider
-
+
✔ Visible on medium or wider Medium or wider
-
+
✔ Visible on large or wider Large or wider
-
+
✔ Visible on extra large Extra large
@@ -214,26 +214,26 @@ Green checkmarks indicate the element **is visible** in your current viewport.
-
+
✔ Your viewport is exactly extra small Your viewport is NOT exactly extra small
-
+
✔ Your viewport is exactly small Your viewport is NOT exactly small
-
+
✔ Your viewport is exactly medium Your viewport is NOT exactly medium
-
+
✔ Your viewport is exactly large Your viewport is NOT exactly large
-
+
✔ Your viewport is exactly extra large Your viewport is NOT exactly extra large
-- cgit v1.2.3