From 7071fe9c1ba90c2ab645b088a51eaf036a22edda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Jun 2016 21:18:23 -0700 Subject: Fixes #17089 a bit --- docs/layout/responsive-utilities.md | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 839aeeb24..2a44fd589 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport. Large or narrower + +
+
✔ Visible on small or wider @@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport. Extra large
+ +
+
-
+
✔ 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 From c2189876eefed8233ce2bbd0fe4ac96e4f85aa58 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 12 Jul 2016 22:27:06 +0300 Subject: Remove trailing space. [ci skip] --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 44a12aee6..81cdecf60 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -144,7 +144,7 @@ These media queries are also available via Sass mixins: And finally media that spans multiple breakpoint widths: {% highlight scss %} -// Example +// Example // Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up) @media (min-width: 768px) and (max-width: 1199px) { ... } {% endhighlight %} -- cgit v1.2.3 From d71c080ab52333e31af61558ba81b9ed04b3c593 Mon Sep 17 00:00:00 2001 From: Raphael Luba Date: Wed, 20 Jul 2016 17:37:54 +0200 Subject: Replace renamed classes in grid push/pull example (#20330) The example for column ordering still referenced the old push/pull class names. --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..b93f0d8b7 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -442,7 +442,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm ### Example: Column ordering -Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes. +Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
{% example html %} -- cgit v1.2.3 From a8879c8f82ec3debb8e225844dc4561e2900beda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 23 Jul 2016 17:12:43 -0700 Subject: Follow-up to #19099 for grid fixes - Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col') - Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding - Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports --- docs/layout/grid.md | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..4ce3c3beb 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -180,20 +180,21 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Make the element grid-ready (applying everything but the width) -@mixin make-col($gutter: $grid-gutter-width) { +@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; + min-height: 1px; // Prevent collapsing + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. @if $enable-flex { - flex: 1; - } @else { - float: left; + width: 100%; } - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); } -@mixin make-col-span($size, $columns: $grid-columns) { - // Set a width (to be used in or out of media queries) +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -201,6 +202,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // do not appear to require this. max-width: percentage($size / $columns); } @else { + float: left; width: percentage($size / $columns); } } @@ -232,23 +234,23 @@ See it in action in this rendered example @include make-row(); } .content-main { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(8); + @include make-col(8); } } .content-secondary { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(4); + @include make-col(4); } } {% endhighlight %} -- cgit v1.2.3