From dad3cab24f6dd02cefbf7a06617be8879483303d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Jul 2014 22:59:57 -0700 Subject: move responsive utils --- docs/layout/responsive-utilities.md | 256 ++++++++++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 docs/layout/responsive-utilities.md (limited to 'docs/layout') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md new file mode 100644 index 000000000..2e4c8b383 --- /dev/null +++ b/docs/layout/responsive-utilities.md @@ -0,0 +1,256 @@ +
+

Responsive utilities

+ +

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

+

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

+ + +

Available classes

+

Use a single or combination of the available classes for toggling content across viewport breakpoints.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small devices + Phones (<768px) + + Small devices + Tablets (≥768px) + + Medium devices + Desktops (≥992px) + + Large devices + Desktops (≥1200px) +
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible
+
+ +

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;
+
+

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.

+
+ + + + + + + + + + + + + + + + + + + + +
ClassesBrowserPrint
+ .visible-print-block
+ .visible-print-inline
+ .visible-print-inline-block + 		Visible
.hidden-printVisible
+
+ + +

Test cases

+

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 small +
+
+
+ Medium + ✔ Visible on medium +
+
+ + ✔ Visible on large +
+
+
+
+ + ✔ 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 +
+
+ + ✔ Hidden on small +
+
+
+ Medium + ✔ Hidden on medium +
+
+ + ✔ Hidden on large +
+
+
+
+ + ✔ Hidden on x-small and small +
+
+ + ✔ Hidden on medium and large +
+
+
+ + ✔ Hidden on x-small and medium +
+
+ + ✔ Hidden on small and large +
+
+
+ + ✔ Hidden on x-small and large +
+
+ + ✔ Hidden on small and medium +
+
+
-- cgit v1.2.3