From 72c0731ecfdf433047250c782ee4a56781f3adc6 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 28 Sep 2019 16:13:36 +0200 Subject: [PATCH 01/10] Bootstrap 5 grid --- scss/_forms.scss | 1 - scss/_grid.scss | 44 +++++++++++++++++----- scss/_variables.scss | 7 +--- scss/bootstrap-grid.scss | 1 + scss/forms/_layout.scss | 80 ---------------------------------------- scss/mixins/_grid.scss | 40 ++++---------------- 6 files changed, 46 insertions(+), 127 deletions(-) delete mode 100644 scss/forms/_layout.scss diff --git a/scss/_forms.scss b/scss/_forms.scss index ff9a016de780..fe95fd279726 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -4,6 +4,5 @@ @import "forms/form-check"; @import "forms/form-file"; @import "forms/form-range"; -@import "forms/layout"; @import "forms/input-group"; @import "forms/validation"; diff --git a/scss/_grid.scss b/scss/_grid.scss index 8bcb419e187e..e4e3c9796233 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -5,18 +5,44 @@ @if $enable-grid-classes { .row { @include make-row(); + + > * { + @include make-col-ready(); + } } +} + +// Gutters +// +// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. + +@if $enable-grid-classes { + @each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + + @each $key, $value in $gutters { + .g#{$infix}-#{$key}, + .gx#{$infix}-#{$key} { + margin-right: -$value / 2; + margin-left: -$value / 2; + + > * { + padding-right: $value / 2; + padding-left: $value / 2; + } + } - // Remove the negative margin from default .row, then the horizontal padding - // from all immediate children columns (to prevent runaway style inheritance). - .no-gutters { - margin-right: 0; - margin-left: 0; + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + margin-top: -$value; - > .col, - > [class*="col-"] { - padding-right: 0; - padding-left: 0; + > * { + margin-top: $value; + } + } + } } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index e4268c3f56cb..624cb2bd2235 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -301,9 +301,10 @@ $container-max-widths: ( // Set the number of columns and specify the width of the gutters. $grid-columns: 12 !default; -$grid-gutter-width: 30px !default; +$grid-gutter-width: 1.5rem !default; $grid-row-columns: 6 !default; +$gutters: $spacers !default; // Container padding @@ -659,10 +660,6 @@ $form-text-margin-top: .25rem !default; $form-check-inline-margin-right: 1rem !default; -$form-check-input-margin-x: .25rem !default; - -$form-grid-gutter-width: 10px !default; - $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index ff7905c90044..8a76c9956eed 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -18,6 +18,7 @@ html { @import "functions"; @import "variables"; +@import "mixins/lists"; @import "mixins/breakpoints"; @import "mixins/container"; @import "mixins/grid"; diff --git a/scss/forms/_layout.scss b/scss/forms/_layout.scss deleted file mode 100644 index eaef926b2dab..000000000000 --- a/scss/forms/_layout.scss +++ /dev/null @@ -1,80 +0,0 @@ -// Form grid -// -// Special replacement for our grid system's `.row` for tighter form layouts. - -@if $enable-grid-classes { - .form-row { - display: flex; - flex-wrap: wrap; - margin-right: -$form-grid-gutter-width / 2; - margin-left: -$form-grid-gutter-width / 2; - - > .col, - > [class*="col-"] { - padding-right: $form-grid-gutter-width / 2; - padding-left: $form-grid-gutter-width / 2; - } - } -} - -// Inline forms -// -// Make forms appear inline(-block) by adding the `.form-inline` class. Inline -// forms begin stacked on extra small (mobile) devices and then go inline when -// viewports reach <768px. - -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height) - - // Because we use flex, the initial sizing of checkboxes is collapsed and - // doesn't occupy the full-width (which is what we want for xs grid tier), - // so we force that here. - .form-check { - width: 100%; - } - - // Kick in the inline - @include media-breakpoint-up(sm) { - label { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - } - - .form-control { - display: inline-block; - width: auto; // Prevent labels from stacking above inputs - vertical-align: middle; - } - - // Make static controls behave like regular ones - .form-control-plaintext { - display: inline-block; - } - - .input-group, - .form-select { - width: auto; - } - - // Remove default margin on radios/checkboxes that were used for stacking, and - // then undo the floating of radios and checkboxes to match. - .form-check { - display: flex; - align-items: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-check-input { - position: relative; - flex-shrink: 0; - margin-top: 0; - margin-right: $form-check-input-margin-x; - margin-left: 0; - } - } -} diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index f89ff1e3ee39..ef97a61bfabd 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -10,27 +10,24 @@ } @mixin make-col-ready($gutter: $grid-gutter-width) { - position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by - // always setting `width: 100%;`. This works because we use `flex` values + // always setting `width: 100%;`. This works because we set the width // later on to override this initial width. + flex-shrink: 0; width: 100%; + max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid padding-right: $gutter / 2; padding-left: $gutter / 2; } @mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); - // Add a `max-width` to ensure content within each column does not blow out - // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari - // do not appear to require this. - max-width: percentage($size / $columns); + flex: 0 0 auto; + width: percentage($size / $columns); } @mixin make-col-auto() { flex: 0 0 auto; width: auto; - max-width: 100%; // Reset earlier grid tiers } @mixin make-col-offset($size, $columns: $grid-columns) { @@ -45,8 +42,8 @@ // style grid. @mixin row-cols($count) { & > * { - flex: 0 0 100% / $count; - max-width: 100% / $count; + flex: 0 0 auto; + width: 100% / $count; } } @@ -56,35 +53,14 @@ // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { - // Common properties for all breakpoints - %grid-column { - position: relative; - width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; - } - @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); - // Allow columns to stretch full width below their breakpoints - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @extend %grid-column; - } - } - .col#{$infix}, - .col#{$infix}-auto { - @extend %grid-column; - } - @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { - flex-basis: 0; - flex-grow: 1; + flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410 - max-width: 100%; } @for $i from 1 through $grid-row-columns { From 16918bff86f01f5ba5ce15272929a3b64fa31804 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 28 Sep 2019 16:14:33 +0200 Subject: [PATCH 02/10] Bootstrap 5 grid documentation Co-authored-by: Mark Otto --- site/assets/scss/_component-examples.scss | 4 +- site/content/docs/4.3/components/card.md | 147 +++----- site/content/docs/4.3/components/navbar.md | 107 +++--- site/content/docs/4.3/forms/form-control.md | 10 +- site/content/docs/4.3/forms/layout.md | 322 ++++++++-------- site/content/docs/4.3/forms/overview.md | 12 +- site/content/docs/4.3/forms/validation.md | 348 +++++++++--------- .../docs/4.3/helpers/stretched-link.md | 5 +- site/content/docs/4.3/layout/grid.md | 247 ++++++++++--- 9 files changed, 651 insertions(+), 551 deletions(-) diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 5a8679ec576c..672bcf503c5c 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -10,8 +10,8 @@ > [class^="col-"] { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(86, 61, 124, .15); - border: 1px solid rgba(86, 61, 124, .2); + background-color: rgba(39, 41, 43, .03); + border: 1px solid rgba(39, 41, 43, .1); } } diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index 14ec94e062cf..5fd1fce4591a 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -379,11 +379,11 @@ Note that content should not be larger than the height of the image. If content ## Horizontal -Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. +Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. {{< example >}}
-
+
{{< placeholder width="100%" height="250" text="Image" >}}
@@ -531,83 +531,13 @@ When using card groups with footers, their content will automatically line up.
{{< /example >}} -### Card decks - -Need a set of equal width and height cards that aren't attached to one another? Use card decks. - -{{< example >}} -
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This card has supporting text below as a natural lead-in to additional content.

-

Last updated 3 mins ago

-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-

Last updated 3 mins ago

-
-
-
-{{< /example >}} - -Just like with card groups, card footers in decks will automatically line up. - -{{< example >}} -
-
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- Last updated 3 mins ago -
-
-
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This card has supporting text below as a natural lead-in to additional content.

-
-
- Last updated 3 mins ago -
-
-
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-
-
- Last updated 3 mins ago -
-
-
-{{< /example >}} - ### Grid cards Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up. {{< example >}} -
-
+
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -616,7 +546,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -625,7 +555,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -634,7 +564,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -649,8 +579,8 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout Change it to `.row-cols-3` and you'll see the fourth card wrap. {{< example >}} -
-
+
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -659,7 +589,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -668,7 +598,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -677,7 +607,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -692,8 +622,8 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap. When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass. {{< example >}} -
-
+
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -702,7 +632,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -711,7 +641,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -720,7 +650,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -732,6 +662,49 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
{{< /example >}} +Just like with card groups, card footers will automatically line up. + +{{< example >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+
+
+ Last updated 3 mins ago +
+
+
+
+{{< /example >}} + ### Masonry In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index 940510c9221b..bc3c606d7247 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -30,7 +30,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from - `.navbar-brand` for your company, product, or project name. - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors. -- `.form-inline` for any form controls and actions. +- Flex and spacing utilities for any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. @@ -43,9 +43,8 @@ Here's an example of all the sub-components included in a responsive light-theme -
@@ -217,14 +216,14 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap ### Forms -Place various form controls and components within a navbar with `.form-inline`. +Place various form controls and components within a navbar: {{< example >}} @@ -236,28 +235,26 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju {{< /example >}} -Input groups work, too: +Input groups work, too. If your navbar is an entire form, or mostly form, you can use the `
` element as the container and save some HTML. Applies to the option above and below this copy. {{< example >}}
{{< /example >}} @@ -265,12 +262,10 @@ Various buttons are supported as part of these navbar forms, too. This is also a {{< example >}} {{< /example >}} @@ -298,7 +293,7 @@ Mix and match with other components and utilities as needed. @@ -358,7 +353,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
@@ -387,7 +382,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl -
+
@@ -506,7 +501,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
@@ -535,9 +530,8 @@ With a brand name shown on the left and toggler on the right: -
@@ -566,9 +560,8 @@ With a toggler on the left and brand name on the right: Navbar -
diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md index fa27ebea4e59..30b569edf14b 100644 --- a/site/content/docs/4.3/forms/form-control.md +++ b/site/content/docs/4.3/forms/form-control.md @@ -61,16 +61,18 @@ If you want to have `` elements in your form styled as plain tex {{< /example >}} {{< example >}} -
-
+ +
-
+
- +
+ +
{{< /example >}} diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index cf5cf6c103f2..b580be6d3901 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -40,31 +40,27 @@ Feel free to build your forms however you like, with `
`s, `
`s, or More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). {{< example >}} -
-
-
- -
-
- -
+ +
+ +
+
+
{{< /example >}} -## Form row +## Gutters -You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). +By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). {{< example >}} -
-
-
- -
-
- -
+ +
+ +
+
+
{{< /example >}} @@ -72,43 +68,39 @@ You may also swap `.row` for `.form-row`, a variation of our standard grid row t More complex layouts can also be created with the grid system. {{< example >}} -
-
-
- - -
-
- - -
+ +
+ +
-
+
+ + +
+
-
+
-
-
- - -
-
- - -
-
- - -
+
+ +
-
+
+ + +
+
+ + +
+
- +
+ +
{{< /example >}} @@ -128,20 +122,20 @@ At times, you maybe need to use margin or padding utilities to create that perfe {{< example >}}
-
+
-
+
-
-
+
+
Radios
@@ -165,8 +159,8 @@ At times, you maybe need to use margin or padding utilities to create that perfe
-
-
Checkbox
+
+
Checkbox
@@ -176,11 +170,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
-
-
- -
-
+ {{< /example >}} @@ -190,19 +180,19 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `