diff options
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/grid.md | 34 | ||||
| -rw-r--r-- | docs/layout/overview.md | 2 | ||||
| -rw-r--r-- | docs/layout/responsive-utilities.md | 19 |
3 files changed, 33 insertions, 22 deletions
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..8e7c5225e 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 <a href="http://jsbin.com/ruxona/edit">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 %} @@ -442,7 +444,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. <div class="bd-example-row"> {% example html %} 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 %} 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. <span class="hidden-lg-down not-visible">Large or narrower</span> </div> </div> + +<hr> + <div class="row responsive-utilities-test visible-on"> <div class="col-xs-6 col-sm-3"> <span class="hidden-xs-down visible">✔ Visible on small or wider</span> @@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport. <span class="hidden-xl-up not-visible">Extra large</span> </div> </div> + +<hr> + <div class="row responsive-utilities-test visible-on"> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span> <span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span> <span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span> <span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span> </div> - <div class="col-xs-6 col-sm-3"> + </div> + +<div class="row responsive-utilities-test visible-on"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span> <span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span> </div> - <div class="col-xs-6 col-sm-3"> + <div class="col-xs-6 col-sm-4"> <span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span> <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span> </div> |