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/components/responsive-utilities.md | 256 -------------------------------- 1 file changed, 256 deletions(-) delete mode 100644 docs/components/responsive-utilities.md (limited to 'docs/components') diff --git a/docs/components/responsive-utilities.md b/docs/components/responsive-utilities.md deleted file mode 100644 index 2e4c8b383..000000000 --- a/docs/components/responsive-utilities.md +++ /dev/null @@ -1,256 +0,0 @@ -
-

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