From 44684a60e55406a1e918ebcadfe49368fe425ad3 Mon Sep 17 00:00:00 2001 From: Amy Gori Date: Mon, 16 Jan 2017 00:37:06 -0500 Subject: Correct xs and sm breakpoint values in responsive utilities docs (#21664) --- docs/layout/responsive-utilities.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/layout/responsive-utilities.md') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index e207737d1..c3f0c0090 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -28,11 +28,11 @@ Try to use these on a limited basis and avoid creating entirely different versio Extra small devices - Portrait phones (<544px) + Portrait phones (<576px) Small devices - Landscape phones (≥544px - <768px) + Landscape phones (≥576px - <768px) Medium devices -- cgit v1.2.3 From 091f3b8c246a8e4923f3f156ffbf3e359058d1d5 Mon Sep 17 00:00:00 2001 From: Quy Date: Sun, 22 Jan 2017 11:17:17 -0800 Subject: Change header to use markdown (#21809) Header will now display in the Contents section. --- docs/layout/responsive-utilities.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/layout/responsive-utilities.md') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index c3f0c0090..fdea34bd9 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -132,7 +132,8 @@ Try to use these on a limited basis and avoid creating entirely different versio -

Print classes

+## Print classes +

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

-- cgit v1.2.3 From 563926717cbc1420218796396fac06c1005447bf Mon Sep 17 00:00:00 2001 From: Quy Date: Sun, 22 Jan 2017 20:37:14 -0800 Subject: Change to markdown (#21815) --- docs/layout/responsive-utilities.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/layout/responsive-utilities.md') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index fdea34bd9..d1522e558 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -134,7 +134,8 @@ Try to use these on a limited basis and avoid creating entirely different versio ## Print classes -

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

+Similar to the regular responsive classes, use these for toggling content for print. +
-- cgit v1.2.3 From ebe405a01b721b667a37ae5c249077f4cdb3b8bd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 3 Mar 2017 12:57:16 -0800 Subject: Start rearranging the docs for a utilities update MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit — Rename display docs page — Move print display utils to display utils page — Drop remaining of responsive utils page as it's being replaced with display utils — Update nav to reflect changes --- docs/layout/responsive-utilities.md | 243 ------------------------------------ 1 file changed, 243 deletions(-) delete mode 100644 docs/layout/responsive-utilities.md (limited to 'docs/layout/responsive-utilities.md') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md deleted file mode 100644 index d1522e558..000000000 --- a/docs/layout/responsive-utilities.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -layout: docs -title: Responsive utilities -description: Use responsive display utility classes for showing and hiding content by device, via media query. -group: layout ---- - -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. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Available classes - -* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. -* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports. -* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size. -* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. -* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Extra small devices - Portrait phones (<576px) - - Small devices - Landscape phones (≥576px - <768px) - - Medium devices - Tablets (≥768px - <992px) - - Large devices - Desktops (≥992px - <1200px) - - Extra large devices - Desktops (≥1200px) -
.hidden-xs-downVisibleVisibleVisibleVisible
.hidden-sm-downVisibleVisibleVisible
.hidden-md-downVisibleVisible
.hidden-lg-downVisible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-upVisible
.hidden-md-upVisibleVisible
.hidden-lg-upVisibleVisibleVisible
.hidden-xl-upVisibleVisibleVisibleVisible
- -## Print classes - -Similar to the regular responsive classes, use these for toggling content for print. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassBrowserPrint
.visible-print-blockVisible
(as display: block)
.visible-print-inlineVisible
(as display: inline)
.visible-print-inline-blockVisible
(as display: inline-block)
.hidden-printVisible
- -## Test cases - -Resize your browser or load on different devices to test the responsive utility classes. - -Green checkmarks indicate the element **is visible** in your current viewport. - -
-
- ✔ Visible on extra small - Extra small -
-
- ✔ Visible on small or narrower - Small or narrower -
-
- ✔ Visible on medium or narrower - Medium or narrower -
-
- ✔ Visible on large or narrower - Large or narrower -
-
- -
- -
-
- ✔ Visible on small or wider - Small or wider -
-
- ✔ Visible on medium or wider - Medium or wider -
-
- ✔ Visible on large or wider - Large or wider -
-
- ✔ Visible on extra large - Extra large -
-
- -
- -
-
- ✔ Your viewport is exactly extra small - Your viewport is NOT exactly extra small -
-
- ✔ Your viewport is exactly small - Your viewport is NOT exactly small -
-
- ✔ Your viewport is exactly medium - Your viewport is NOT exactly medium -
-
- -
-
- ✔ Your viewport is exactly large - Your viewport is NOT exactly large -
-
- ✔ Your viewport is exactly extra large - Your viewport is NOT exactly extra large -
-
-- cgit v1.2.3