From bdd7651e323a93a4e3d207463451dd374b0a70fa Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 13 Feb 2014 11:48:23 -0800 Subject: replace .visible-{size} with .visible-{size}-{display} ; fixes #8869 --- docs/css.html | 106 ++++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 69 insertions(+), 37 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 32204c4f4..7d646a2a8 100644 --- a/docs/css.html +++ b/docs/css.html @@ -302,7 +302,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
-
+
.col-xs-6 .col-sm-4
@@ -315,7 +315,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
-
+
.col-xs-6 .col-sm-4
{% endhighlight %} @@ -332,7 +332,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-3
-
+
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
@@ -344,7 +344,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
.col-xs-6 .col-sm-3
-
+
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
@@ -2569,7 +2569,7 @@ For example, <section> should be wrapped as inline.

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. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

+

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

@@ -2599,28 +2599,28 @@ For example, <section> should be wrapped as inline. - .visible-xs + .visible-xs-* Visible Hidden Hidden Hidden - .visible-sm + .visible-sm-* Hidden Visible Hidden Hidden - .visible-md + .visible-md-* Hidden Hidden Visible Hidden - .visible-lg + .visible-lg-* Hidden Hidden Hidden @@ -2660,6 +2660,33 @@ For example, <section> should be wrapped as inline. +

The .visible-*-* classes for each breakpoint come in 3 variations, depending on the CSS display property value applied when the element is visible:

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

+

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.1.0. They are approximately equivalent to .visible-*-block, except with additional special cases for <table>-related elements.

Print classes

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

@@ -2667,14 +2694,18 @@ For example, <section> should be wrapped as inline. - + - + @@ -2686,6 +2717,7 @@ For example, <section> should be wrapped as inline.
ClassClasses Browser Print
.visible-print + .visible-print-block
+ .visible-print-inline
+ .visible-print-inline-block + 		Visible
+

The class .visible-print also exists but is deprecated as of v3.1.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Test cases

@@ -2696,48 +2728,48 @@ For example, <section> should be wrapped as inline.
- ✔ Visible on x-small + ✔ Visible on x-small
- ✔ Visible on small + ✔ Visible on small
-
+
Medium - ✔ Visible on medium + ✔ Visible on medium
- ✔ Visible on large + ✔ Visible on large
- ✔ Visible on x-small and small + ✔ Visible on x-small and small
- ✔ Visible on medium and large + ✔ Visible on medium and large
-
+
- ✔ Visible on x-small and medium + ✔ Visible on x-small and medium
- ✔ Visible on small and large + ✔ Visible on small and large
-
+
- ✔ Visible on x-small and large + ✔ Visible on x-small and large
- ✔ Visible on small and medium + ✔ Visible on small and medium
@@ -2746,48 +2778,48 @@ For example, <section> should be wrapped as inline.
- ✔ Hidden on x-small + ✔ Hidden on x-small
- ✔ Hidden on small + ✔ Hidden on small
-
+
Medium - ✔ Hidden on medium + ✔ Hidden on medium
- ✔ Hidden on large + ✔ Hidden on large
- ✔ Hidden on x-small and small + ✔ Hidden on x-small and small
- ✔ Hidden on medium and large + ✔ Hidden on medium and large
-
+
- ✔ Hidden on x-small and medium + ✔ Hidden on x-small and medium
- ✔ Hidden on small and large + ✔ Hidden on small and large
-
+
- ✔ Hidden on x-small and large + ✔ Hidden on x-small and large
- ✔ Hidden on small and medium + ✔ Hidden on small and medium
-- cgit v1.2.3 From 76883ff9b478935369613db5b59bd07b615a8140 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 22:06:12 -0700 Subject: Copy change --- docs/css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 56d7deb4d..16aa26a21 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2743,7 +2743,7 @@ For example, <section> should be wrapped as inline. -

The .visible-*-* classes for each breakpoint come in 3 variations, depending on the CSS display property value applied when the element is visible:

+

As of v3.2, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below for visibility classes.

@@ -2769,7 +2769,7 @@ For example, <section> should be wrapped as inline.

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

-

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.1.0. They are approximately equivalent to .visible-*-block, except with additional special cases for <table>-related elements.

+

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Print classes

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

-- cgit v1.2.3 From 7bef778c48cd8e4dad69c4f843899ec7b7c64f93 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 22:06:51 -0700 Subject: http://www.youtube.com/watch?v=AJWtLf4-WWs --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 16aa26a21..8538425f3 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2769,7 +2769,7 @@ For example, <section> should be wrapped as inline.

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

-

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

+

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Print classes

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

-- cgit v1.2.3 From 72837b11e392d1cb9d6a478b6863cab716efd348 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Mar 2014 22:10:58 -0700 Subject: mo copy --- docs/css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 8538425f3..f8ebe8c3c 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2743,7 +2743,7 @@ For example, <section> should be wrapped as inline. -

As of v3.2, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below for visibility classes.

+

As of v3.2, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

-- cgit v1.2.3