From 57154a65628857506057c063d9eb2fee13a9ff9c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 22 Jul 2019 00:23:54 +0300 Subject: [PATCH 001/132] Optimize the embedded SVGs. (#29075) --- scss/_variables.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 31fba8946be6..bc429a2d693f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -537,7 +537,7 @@ $form-check-input-checked-border-color: $form-check-input-checked-bg-color !de $form-check-input-checked-bg-repeat: no-repeat !default; $form-check-input-checked-bg-position: center center !default; $form-check-input-checked-bg-size: 1em !default; -$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-input-indeterminate-color: $component-active-color !default; @@ -546,7 +546,7 @@ $form-check-input-indeterminate-border-color: $form-check-input-indeterminate- $form-check-input-indeterminate-bg-repeat: no-repeat !default; $form-check-input-indeterminate-bg-position: center center !default; $form-check-input-indeterminate-bg-size: 1em !default; -$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; $form-switch-color: rgba(0, 0, 0, .25) !default; $form-switch-width: 2em !default; @@ -592,7 +592,7 @@ $form-select-bg: $input-bg !default; $form-select-disabled-bg: $gray-200 !default; $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions $form-select-indicator-color: $gray-800 !default; -$form-select-indicator: url("data:image/svg+xml,") !default; +$form-select-indicator: url("data:image/svg+xml,") !default; $form-select-background: no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) @@ -667,7 +667,7 @@ $form-feedback-invalid-color: theme-color("danger") !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; $form-validation-states: () !default; // stylelint-disable-next-line scss/dollar-variable-default @@ -743,14 +743,14 @@ $navbar-dark-color: rgba($white, .5) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .5) !default; $navbar-light-hover-color: rgba($black, .7) !default; $navbar-light-active-color: rgba($black, .9) !default; $navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default; $navbar-light-toggler-border-color: rgba($black, .1) !default; $navbar-light-brand-color: $navbar-light-active-color !default; @@ -1072,8 +1072,8 @@ $carousel-caption-color: $white !default; $carousel-control-icon-width: 20px !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) From 634344c003b4cf26f38d24993c54fc880bbd1e2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Jul 2019 17:38:36 -0700 Subject: [PATCH 002/132] v4/v5: Add responsive containers (#29095) * create responsive containers provide more flexibility and allow the user to determine when containers switch from fluid to fixed width. * fix the base container code this commit fixes the non-media portion of the generated CSS. I learned about the `@extends` directive and was able to put it to good use. I create a new temporary map that contains all the main `$container-max-widths` and join it to our 2 special cases of 'xs' and 'fluid'. Then we loop through that and, with the appropriate infixes, extend our placeholder * formatting for style forgot to run my tests before the last push, i think these are better. * finish incomplete comment * fix the responsive containers using the `@extend` directive I was able to clean up this code * fix responsive containers in the navbar mostly we just look through all of our breakpoints so we can include all of the responsive container classes in the tweaks we have to do for the navbar (redeclaring flex properties, don't double up on padding, etc) * Simplify container extends * Simplify navbar containers * Rearrange, add comments, ensure everything is nested in $enable-grid-classes * Reduce new CSS by using attribute selector We avoid using `@extend` whenever possible, and this is more readable * Update _grid.scss * Update _navbar.scss * Add docs for responsive containers, redesign the container layout page * Add to the Grid example --- scss/_grid.scss | 23 +++++++--- scss/_navbar.scss | 9 ++-- site/content/docs/4.3/examples/grid/grid.css | 7 +++ .../content/docs/4.3/examples/grid/index.html | 10 +++++ site/content/docs/4.3/layout/overview.md | 39 ++++++++++++----- .../4.3/assets/scss/_component-examples.scss | 43 ++++++------------- 6 files changed, 77 insertions(+), 54 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index a227515379c4..f70e849517cf 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -3,23 +3,32 @@ // Set the container width, and override it for fixed navbars in media queries. @if $enable-grid-classes { + // Single container class with breakpoint max-widths .container { @include make-container(); @include make-container-max-widths(); } -} - -// Fluid container -// -// Utilizes the mixin meant for fixed width containers, but with 100% width for -// fluid, full width layouts. -@if $enable-grid-classes { + // 100% wide container at all breakpoints .container-fluid { @include make-container(); } + + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @include make-container(); + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + .container-#{$breakpoint} { + max-width: $container-max-width; + } + } + } } + // Row // // Rows contain and clear the floats of your columns. diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 2b57ae53ac3e..beb6f2bf0009 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -25,8 +25,7 @@ // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. - > .container, - > .container-fluid { + > [class^="container"] { display: flex; flex-wrap: wrap; align-items: center; @@ -140,8 +139,7 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - > .container, - > .container-fluid { + > [class^=".container"] { padding-right: 0; padding-left: 0; } @@ -165,8 +163,7 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container, - > .container-fluid { + > [class^=".container"] { flex-wrap: nowrap; } diff --git a/site/content/docs/4.3/examples/grid/grid.css b/site/content/docs/4.3/examples/grid/grid.css index e726996d31b6..8032c31c3e2e 100644 --- a/site/content/docs/4.3/examples/grid/grid.css +++ b/site/content/docs/4.3/examples/grid/grid.css @@ -4,3 +4,10 @@ background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); } + +.themed-container { + padding: 15px; + margin-bottom: 30px; + background-color: rgba(0, 123, 255, .15); + border: 1px solid rgba(0, 123, 255, .2); +} diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html index 230fd6a57b06..24289cea52cc 100644 --- a/site/content/docs/4.3/examples/grid/index.html +++ b/site/content/docs/4.3/examples/grid/index.html @@ -125,3 +125,13 @@

Mixed: mobile, tablet, and desktop

+ +
+

Responsive containers

+

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.

+
+ +
.container-sm
+
.container-md
+
.container-lg
+
.container-xl
diff --git a/site/content/docs/4.3/layout/overview.md b/site/content/docs/4.3/layout/overview.md index dd2f34691512..79b799ca0dce 100644 --- a/site/content/docs/4.3/layout/overview.md +++ b/site/content/docs/4.3/layout/overview.md @@ -9,15 +9,15 @@ toc: true ## Containers -Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). +Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. While containers *can* be nested, most layouts do not require a nested container. -While containers *can* be nested, most layouts do not require a nested container. +### All-in-one + +Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.
-
-
-
-
+
+ .container
@@ -27,13 +27,13 @@ While containers *can* be nested, most layouts do not require a nested container
{{< /highlight >}} +### Fluid + Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
-
-
-
-
+
+ .container-fluid
@@ -43,6 +43,25 @@ Use `.container-fluid` for a full width container, spanning the entire width of
{{< /highlight >}} +### Responsive + +Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until particular breakpoint is reached and a `max-width` is applied. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will remain through the higher breakpoints. + +
+
+ .container-sm (100% wide until breakpoint) +
+
+ .container-sm (With max-width at breakpoint) +
+
+ +{{< highlight html >}} +
100% wide until small breakpoint
+
100% wide until medium breakpoint
+
100% wide until large breakpoint
+
100% wide until extra large breakpoint
+{{< /highlight >}} ## Responsive breakpoints diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss index 8b7a3bab85fc..60f59423212b 100644 --- a/site/static/docs/4.3/assets/scss/_component-examples.scss +++ b/site/static/docs/4.3/assets/scss/_component-examples.scss @@ -30,6 +30,15 @@ border: 1px solid rgba($bd-purple, .15); } +.bd-example-responsive-containers { + [class^="container"] { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); + } +} + // Grid mixins .example-container { width: 800px; @@ -69,37 +78,9 @@ // Container illustrations // -.bd-example-container { - min-width: 16rem; - max-width: 25rem; - margin-right: auto; - margin-left: auto; -} - -.bd-example-container-header { - height: 3rem; - margin-bottom: .5rem; - background-color: lighten($blue, 50%); - @include border-radius; -} - -.bd-example-container-sidebar { - float: right; - width: 4rem; - height: 8rem; - background-color: lighten($blue, 25%); - @include border-radius; -} - -.bd-example-container-body { - height: 8rem; - margin-right: 4.5rem; - background-color: lighten($bd-purple, 25%); - @include border-radius; -} - -.bd-example-container-fluid { - max-width: none; +.example-container-element { + background-color: rgba($blue, .25); + border: 1px solid rgba($blue, .25); } From 1cdba95c507fa06a99440b255f1057807504e6bb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 15 Jul 2019 09:31:50 -0700 Subject: [PATCH 003/132] Revert padding-right on ol and ul in Reboot, update migration doc --- scss/_reboot.scss | 1 - site/content/docs/4.3/content/reboot.md | 2 +- site/content/docs/4.3/migration.md | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 6ff66a022681..263829586c5e 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -157,7 +157,6 @@ address { ol, ul { - padding-right: 2rem; padding-left: 2rem; } diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md index fd7dcbd1eadb..41ff680db099 100644 --- a/site/content/docs/4.3/content/reboot.md +++ b/site/content/docs/4.3/content/reboot.md @@ -102,7 +102,7 @@ All heading elements—e.g., `

`—and `

` are reset to have their `margin- ## Lists -All lists—`