Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bootstrap 5 grid #28517

Merged
merged 10 commits into from
Mar 10, 2020
Merged

Bootstrap 5 grid #28517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
72c0731
Bootstrap 5 grid
MartijnCuppens Sep 28, 2019
16918bf
Bootstrap 5 grid documentation
MartijnCuppens Sep 28, 2019
b96d906
Update examples to the Bootstrap 5 grid
MartijnCuppens Sep 28, 2019
86ef781
Bump bundlesizes
MartijnCuppens Sep 28, 2019
3c997c4
Bootstrap 5 migration guide
MartijnCuppens Sep 28, 2019
34706f1
Remove card decks in favor of the grid
MartijnCuppens Nov 16, 2019
8f9999b
bootstrap-grid.css: Only apply `box-sizing: border-box` to the column…
MartijnCuppens Dec 14, 2019
d475019
Add row-cols-auto and responsive variants
MartijnCuppens Dec 19, 2019
ca75476
fix indention
MartijnCuppens Feb 15, 2020
7cbd5ce
Change container padding to 1rem
MartijnCuppens Feb 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bundlesize.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"files": [
{
"path": "./dist/css/bootstrap-grid.css",
"maxSize": "6.5 kB"
"maxSize": "7.1 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
"maxSize": "6 kB"
"maxSize": "6.4 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
Expand Down
24 changes: 0 additions & 24 deletions scss/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,30 +150,6 @@
}


// Card deck

.card-deck {
.card {
margin-bottom: $card-deck-margin;
}

@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;

.card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}


//
// Card groups
//
Expand Down
1 change: 0 additions & 1 deletion scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
44 changes: 35 additions & 9 deletions scss/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
mdo marked this conversation as resolved.
Show resolved Hide resolved
margin-top: -$value;

> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
> * {
margin-top: $value;
}
}
}
}
}
}
Expand Down
10 changes: 3 additions & 7 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,13 +301,14 @@ $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;
MartijnCuppens marked this conversation as resolved.
Show resolved Hide resolved
$grid-row-columns: 6 !default;

$gutters: $spacers !default;

// Container padding

$container-padding-x: $grid-gutter-width / 2 !default;
$container-padding-x: 1rem !default;


// Components
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -932,7 +929,6 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;

$card-group-margin: $grid-gutter-width / 2 !default;
$card-deck-margin: $card-group-margin !default;


// Tooltips
Expand Down
11 changes: 2 additions & 9 deletions scss/bootstrap-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,12 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}
$include-column-box-sizing: true !default;

@import "functions";
@import "variables";

@import "mixins/lists";
@import "mixins/breakpoints";
@import "mixins/container";
@import "mixins/grid";
Expand Down
80 changes: 0 additions & 80 deletions scss/forms/_layout.scss
View file
Open in desktop

This file was deleted.

46 changes: 14 additions & 32 deletions scss/mixins/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,26 @@
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
// Add box sizing if only the grid is loaded
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
// 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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi all: while I understand the rational for dropping position: relative, can you comment on why you added flex-shrink: 0? If would be great if you could respond to the following discussion thread. Thanks!

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) {
Expand All @@ -45,8 +44,8 @@
// style grid.
@mixin row-cols($count) {
& > * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
flex: 0 0 auto;
width: 100% / $count;
}
}

Expand All @@ -56,35 +55,18 @@
// 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%;
}

.row-cols#{$infix}-auto > * {
@include make-col-auto();
}

@for $i from 1 through $grid-row-columns {
Expand Down
4 changes: 2 additions & 2 deletions site/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
Loading