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

Change grid and container sizes from em/rem to px #17403

Merged
merged 1 commit into from
Sep 28, 2015
Merged

Change grid and container sizes from em/rem to px #17403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 19 additions & 15 deletions docs/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ The above example creates three equal-width columns on small, medium, large, and

## Grid options

While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths.
This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

<div class="table-responsive">
Expand All @@ -61,23 +64,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<th></th>
<th class="text-center">
Extra small<br>
<small>&lt;34em / 480px</small>
<small>&lt;544px</small>
</th>
<th class="text-center">
Small<br>
<small>&ge;34em / 480px</small>
<small>&ge;544px</small>
</th>
<th class="text-center">
Medium<br>
<small>&ge;45em / 720px</small>
<small>&ge;768px</small>
</th>
<th class="text-center">
Large<br>
<small>&ge;62em / 992px</small>
<small>&ge;992px</small>
</th>
<th class="text-center">
Extra large<br>
<small>&ge;75em / 1200px</small>
<small>&ge;1200px</small>
</th>
</tr>
</thead>
Expand All @@ -90,10 +93,10 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<tr>
<th class="text-nowrap" scope="row">Container width</th>
<td>None (auto)</td>
<td>34rem / 480px</td>
<td>45rem / 720px</td>
<td>60rem / 960px</td>
<td>72.25rem / 1156px</td>
<td>576px</td>
<td>720px</td>
<td>940px</td>
<td>1140px</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Class prefix</th>
Expand All @@ -109,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
</tr>
<tr>
<th class="text-nowrap" scope="row">Gutter width</th>
<td colspan="5">30px (15px on each side of a column)</td>
<td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Nestable</th>
Expand Down Expand Up @@ -140,17 +143,18 @@ $grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em, // 480px
sm: 544px,
// Medium screen / tablet
md: 48em, // 768px
md: 768px,
// Large screen / desktop
lg: 62em, // 992px
lg: 992px,
// Extra large screen / wide desktop
xl: 75em // 1200px
xl: 1200px
) !default;


$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-gutter-width: 1.875rem;
{% endhighlight %}

### Mixins
Expand Down
16 changes: 8 additions & 8 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@ $grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em,
sm: 544px,
// Medium screen / tablet
md: 48em,
md: 768px,
// Large screen / desktop
lg: 62em,
lg: 992px,
// Extra large screen / wide desktop
xl: 75em
xl: 1200px
) !default;


Expand All @@ -105,10 +105,10 @@ $grid-breakpoints: (
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
sm: 34rem, // 480
md: 45rem, // 720
lg: 60rem, // 960
xl: 72.25rem // 1140
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
) !default;


Expand Down
39 changes: 22 additions & 17 deletions scss/bootstrap-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,46 @@
// Variables
//

// Grid system

// Grid breakpoints
//
// Define your custom responsive grid.
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em,
sm: 544px,
// Medium screen / tablet
md: 48em,
md: 768px,
// Large screen / desktop
lg: 62em,
lg: 992px,
// Extra large screen / wide desktop
xl: 75em
xl: 1200px
) !default;

// Number of columns in the grid.
$grid-columns: 12 !default;

// Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 1.5rem !default;


// Container sizes
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
sm: 34rem, // 480
md: 45rem, // 720
lg: 60rem, // 960
xl: 72.25rem // 1140
sm: 576px,
Copy link

Choose a reason for hiding this comment

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

How can container width ever be wider than the breakpoint?

md: 720px,
lg: 940px,
Copy link

Choose a reason for hiding this comment

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

940 is not divisible by 12. Please change to 960.

xl: 1140px
) !default;


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 1.875rem !default; // 30px


//
// Grid mixins
//
Expand Down
14 changes: 7 additions & 7 deletions scss/mixins/_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 34rem, md: 45rem)
// (xs: 0, sm: 544px, md: 768px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md
Expand All @@ -21,8 +21,8 @@

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
// 34rem
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
// 544px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
Expand All @@ -31,11 +31,11 @@
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
// 44.9rem
// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
// 767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 0.1, null);
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
Expand Down