From d31f13c3b0e94691c11d6556049e5d372a4b9ad0 Mon Sep 17 00:00:00 2001 From: David De Sloovere Date: Mon, 16 Apr 2018 15:51:36 +0200 Subject: [PATCH 1/4] Doc update - remove media-breakpoint-up(xs) If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either. The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts). --- docs/4.1/layout/overview.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md index 0b2f44d33fb9..50dc456a80d1 100644 --- a/docs/4.1/layout/overview.md +++ b/docs/4.1/layout/overview.md @@ -70,13 +70,12 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in Since we write our source CSS in Sass, all our media queries are available via Sass mixins: {% highlight scss %} -@include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } -// Example usage: +// Example usage, small and up: @include media-breakpoint-up(sm) { .some-class { display: block; @@ -112,6 +111,13 @@ Once again, these media queries are also available via Sass mixins: @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } + +// Example usage, medium and down: +@include media-breakpoint-down(md) { + .some-class { + display: block; + } +} {% endhighlight %} There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. From 510be3dfbeb5d2cd4b6beda16ac2559c892cdf87 Mon Sep 17 00:00:00 2001 From: David De Sloovere Date: Wed, 18 Apr 2018 10:30:29 +0200 Subject: [PATCH 2/4] Improve media-breakpoint-up/down docs More explicit on not having media-breakpoint-up(xs) or media-breakpoint-down(xl) --- docs/4.1/layout/overview.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md index 50dc456a80d1..e9ec63c294dd 100644 --- a/docs/4.1/layout/overview.md +++ b/docs/4.1/layout/overview.md @@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in {% highlight scss %} // Extra small devices (portrait phones, less than 576px) -// No media query since this is the default in Bootstrap +// No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } @@ -70,12 +70,16 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in Since we write our source CSS in Sass, all our media queries are available via Sass mixins: {% highlight scss %} +// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } -// Example usage, small and up: +// Example usage, default extra small and mixin for small and up: +.some-class { + display: none; +} @include media-breakpoint-up(sm) { .some-class { display: block; @@ -111,6 +115,7 @@ Once again, these media queries are also available via Sass mixins: @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } +// No media query necessary for xl breakpoint as it has no upper bound on its width // Example usage, medium and down: @include media-breakpoint-down(md) { From 687506eec6da6ab98d10a007306c8c90723fbb52 Mon Sep 17 00:00:00 2001 From: David De Sloovere Date: Mon, 23 Apr 2018 08:48:08 +0200 Subject: [PATCH 3/4] Fix indenting --- docs/4.1/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md index e9ec63c294dd..e81288e25483 100644 --- a/docs/4.1/layout/overview.md +++ b/docs/4.1/layout/overview.md @@ -78,7 +78,7 @@ Since we write our source CSS in Sass, all our media queries are available via S // Example usage, default extra small and mixin for small and up: .some-class { - display: none; + display: none; } @include media-breakpoint-up(sm) { .some-class { From 3eae0cbefd6fdf877546aef0000b6f3498f54d13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Apr 2018 22:01:46 -0700 Subject: [PATCH 4/4] correct some docs text --- docs/4.1/layout/overview.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md index e81288e25483..102e25727dee 100644 --- a/docs/4.1/layout/overview.md +++ b/docs/4.1/layout/overview.md @@ -70,18 +70,18 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in Since we write our source CSS in Sass, all our media queries are available via Sass mixins: {% highlight scss %} -// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... } +// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } -// Example usage, default extra small and mixin for small and up: -.some-class { +// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint +.custom-class { display: none; } @include media-breakpoint-up(sm) { - .some-class { + .custom-class { display: block; } } @@ -117,9 +117,9 @@ Once again, these media queries are also available via Sass mixins: @include media-breakpoint-down(lg) { ... } // No media query necessary for xl breakpoint as it has no upper bound on its width -// Example usage, medium and down: +// Example: Style from medium breakpoint and down @include media-breakpoint-down(md) { - .some-class { + .custom-class { display: block; } }