From e651b48eb60344d307c58bcc24a75598640996ac Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 29 Dec 2014 19:59:10 -0800 Subject: update responsive utility docs post-overhaul --- docs/layout/media-queries.md | 76 +++++++----- docs/layout/responsive-utilities.md | 231 +++++++++++++++--------------------- 2 files changed, 144 insertions(+), 163 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/media-queries.md b/docs/layout/media-queries.md index f5d66a417..d628b4589 100644 --- a/docs/layout/media-queries.md +++ b/docs/layout/media-queries.md @@ -7,48 +7,64 @@ Since Bootstrap is designed to be mobile-first, we employ media queries in our C ### Common queries -Bootstrap uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components. +Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components. {% highlight scss %} -/* Extra small devices (phones, less than 768px) */ +/* Extra small devices (portrait phones, less than ???px) */ /* No media query since this is the default in Bootstrap */ -/* Small devices (tablets, 768px and up) */ -@media (min-width: @screen-sm-min) { ... } +/* Small devices (landscape phones, 34em and up) */ +@media (min-width: 34em) { ... } -/* Medium devices (desktops, 992px and up) */ -@media (min-width: @screen-md-min) { ... } +/* Medium devices (tablets, 48em and up) */ +@media (min-width: 48em) { ... } -/* Large devices (large desktops, 1200px and up) */ -@media (min-width: @screen-lg-min) { ... } -{% endhighlight %} +/* Large devices (desktops, 62em and up) */ +@media (min-width: 62em) { ... } -We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices. +/* Extra large devices (large desktops, 75em and up) */ +@media (min-width: 75em) { ... } +{% endhighlight %} +These media queries are available via Sass mixins: {% highlight scss %} -@media (max-width: @screen-xs-max) { ... } -@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } -@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } -@media (min-width: @screen-lg-min) { ... } +@include media-breakpoint-up(xs) { ... } +@include media-breakpoint-up(sm) { ... } +@include media-breakpoint-up(md) { ... } +@include media-breakpoint-up(lg) { ... } +@include media-breakpoint-up(lxl) { ... } + +// Example usage: +@include media-breakpoint-up(sm) { + .some-class { + display: block; + } +} {% endhighlight %} -### Sass mixins +We occasionally use media queries that go in the other direction (the given screen size *or smaller*): +{% highlight scss %} +/* Extra small devices (portrait phones, less than 34em) */ +@media (max-width: 33.9em) { ... } + +/* Small devices (landscape phones, less than 48em) */ +@media (max-width: 47.9em) { ... } + +/* Medium devices (tablets, less than 62em) */ +@media (max-width: 61.9em) { ... } -The above media queries are also available via Sass mixins: +/* Large devices (desktops, less than 75em) */ +@media (max-width: 74.9em) { ... } + +/* Extra large devices (large desktops) */ +/* No media query since the extra-large breakpoint has no upper bound on its width */ +{% endhighlight %} +These media queries are available via Sass mixins: {% highlight scss %} -// List of mixins -@include media-xs { ... } -@include media-sm { ... } -@include media-sm-max { ... } -@include media-md { ... } -@include media-md-max { ... } -@include media-lg { ... } - -// Usage -@include media-xs { - .element { - display: block; - } -} +@include media-breakpoint-down(xs) { ... } +@include media-breakpoint-down(sm) { ... } +@include media-breakpoint-down(md) { ... } +@include media-breakpoint-down(lg) { ... } +@include media-breakpoint-down(lxl) { ... } {% endhighlight %} diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 472682f6b..a9dd4cdb0 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -9,7 +9,11 @@ Try to use these on a limited basis and avoid creating entirely different versio ## Available classes -Use a single or combination of the available classes for toggling content across viewport breakpoints. +* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. +* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports). +* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size. +* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. +* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
@@ -18,112 +22,110 @@ Use a single or combination of the available classes for toggling content across + - - + + + + + + + + + + + - + - + + - + + - + - + + + - - - - + + + + + - - - - + - - + + + - + - + + - + - - -
Extra small devices - Phones (<768px) + Portrait phones (<34em) Small devices - Tablets (≥768px) + Landscape phones (≥34em) Medium devices - Desktops (≥992px) + Tablets (≥48em) Large devices - Desktops (≥1200px) + Desktops (≥62em) + + Extra large devices + Desktops (≥75em)
.visible-xs-*Visible.hidden-xs-down VisibleVisibleVisibleVisible
.hidden-sm-down VisibleVisibleVisible
.visible-sm-*.hidden-md-down Visible VisibleVisible
.visible-md-*.hidden-lg-down Visible Visible
.visible-lg-*.hidden-xl-down Visible
.hidden-xs.hidden-xs-up VisibleVisibleVisible
.hidden-sm.hidden-sm-up Visible VisibleVisible
.hidden-md.hidden-md-up Visible Visible Visible
.hidden-lg.hidden-lg-up Visible Visible Visible
-
- -As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS `display` property value listed below. - -
- - - - - - - - - - - - - - - + - - + + + + + +
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;.hidden-xl-upVisibleVisibleVisibleVisible
-

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

@@ -131,20 +133,26 @@ As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three varia - + - + - + + + + + + + + + + + @@ -159,106 +167,63 @@ As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three varia Resize your browser or load on different devices to test the responsive utility classes. -### Visible on... - Green checkmarks indicate the element **is visible** in your current viewport.
- - ✔ Visible on x-small + ✔ Visible on extra small + Extra small
- - ✔ Visible on small + ✔ Visible on small or narrower + Small or narrower
-
- Medium - ✔ Visible on medium + ✔ Visible on medium or narrower + Medium or narrower
- - ✔ Visible on large + ✔ Visible on large or narrower + Large or narrower
-
- - ✔ Visible on x-small and small -
-
- - ✔ Visible on medium and large -
-
-
- - ✔ Visible on x-small and medium -
-
- - ✔ Visible on small and large -
-
-
- - ✔ Visible on x-small and large -
-
- - ✔ Visible on small and medium -
-
- -### Hidden on... - -Here, green checkmarks also indicate the element **is hidden** in your current viewport. - -
- - ✔ Hidden on x-small + ✔ Visible on small or wider + Small or wider
- - ✔ Hidden on small + ✔ Visible on medium or wider + Medium or wider
-
- Medium - ✔ Hidden on medium + ✔ Visible on large or wider + Large or wider
- - ✔ Hidden on large + ✔ Visible on extra large + Extra large
-
-
- - ✔ Hidden on x-small and small -
-
- - ✔ Hidden on medium and large +
+
+ ✔ Your viewport is exactly extra small + Your viewport is NOT exactly extra small
-
-
- - ✔ Hidden on x-small and medium +
+ ✔ Your viewport is exactly small + Your viewport is NOT exactly small
-
- - ✔ Hidden on small and large +
+ ✔ Your viewport is exactly medium + Your viewport is NOT exactly medium
-
-
- - ✔ Hidden on x-small and large +
+ ✔ Your viewport is exactly large + Your viewport is NOT exactly large
-
- - ✔ Hidden on small and medium +
+ ✔ Your viewport is exactly extra large + Your viewport is NOT exactly extra large
-- cgit v1.2.3
ClassesClass Browser Print
- .visible-print-block
- .visible-print-inline
- .visible-print-inline-block - 		.visible-print-block VisibleVisible
(as display: block)
.visible-print-inlineVisible
(as display: inline)
.visible-print-inline-blockVisible
(as display: inline-block)
.hidden-print