From e8bd019a19a82b2796b77101cb43892138f4935e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 10 Jul 2014 20:02:47 -0700 Subject: move all css files over to components dir --- docs/_includes/css/responsive-utilities.html | 256 --------------------------- 1 file changed, 256 deletions(-) delete mode 100644 docs/_includes/css/responsive-utilities.html (limited to 'docs/_includes/css/responsive-utilities.html') diff --git a/docs/_includes/css/responsive-utilities.html b/docs/_includes/css/responsive-utilities.html deleted file mode 100644 index 2e4c8b383..000000000 --- a/docs/_includes/css/responsive-utilities.html +++ /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