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/_data/nav.yml | 15 +- docs/components/responsive-utilities.md | 256 -------------------------------- docs/layout/responsive-utilities.md | 256 ++++++++++++++++++++++++++++++++ 3 files changed, 261 insertions(+), 266 deletions(-) delete mode 100644 docs/components/responsive-utilities.md create mode 100644 docs/layout/responsive-utilities.md (limited to 'docs') diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index 6308b53ba..9feec87a5 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -20,14 +20,15 @@ pages: - title: Grid - title: Media - - title: Utilities + - title: Responsive utilities + sections: + - title: Viewports + - title: Print + - title: Test cases - title: Components pages: - title: Scaffolding - # - title: Grid - # sections: - # - title: Overview - title: Typography sections: - title: Scale @@ -55,15 +56,9 @@ - title: Pagination - title: Alerts - title: Progress - - title: Media - title: List - title: Responsive embed - title: Helpers - - title: Responsive utilities - sections: - - title: Viewports - - title: Print - - title: Test cases - title: JavaScript pages: 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 -
-
-
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