rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Automate breakpoints

Browse Source 
Breakpoints and container widths are now defined as maps.
This commit is contained in:
Gleb Mazovetskiy 2014-12-20 15:03:30 +00:00
parent 4d9aa90c8e
commit 93f51eb0e9
9 changed files with 163 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_forms.scss
View File

@ -541,14 +541,14 @@ input[type="checkbox"] {
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: $screen-sm-min) {
@include media-sm {
.control-label {
padding-top: $padding-lg-vertical;
}
}
}
.form-group-sm {
@media (min-width: $screen-sm-min) {
@include media-sm {
.control-label {
padding-top: ($padding-sm-vertical + .1);
}

57
scss/_grid.scss
View File

@ -10,14 +10,11 @@
.container {
@include make-container();
@media (min-width: $screen-sm-min) {
max-width: $container-sm;
}
@media (min-width: $screen-md-min) {
max-width: $container-md;
}
@media (min-width: $screen-lg-min) {
max-width: $container-lg;
// For each breakpoint, define the maximum width of the container in a media query
@each $breakpoint, $container-max-width in $container-max-widths {
@include media-breakpoint-min($breakpoint) {
max-width: $container-max-width;
}
}
}
@ -47,47 +44,3 @@
@include make-grid-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@include media-sm {
@include make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@include media-md {
@include make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@include media-lg {
@include make-grid(lg);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@include media-lg {
@include make-grid(xl);
}

1
scss/_mixins.scss
View File

@ -24,6 +24,7 @@
}
// Utilities
@import "mixins/breakpoints";
@import "mixins/media-queries";
@import "mixins/hide-text";
@import "mixins/image";

4
scss/_modal.scss
View File

@ -126,7 +126,7 @@
}
// Scale up the modal
@media (min-width: $screen-sm-min) {
@include media-sm {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: $modal-md;
@ -140,6 +140,6 @@
.modal-sm { width: $modal-sm; }
}
@media (min-width: $screen-md-min) {
@include media-md {
.modal-lg { width: $modal-lg; }
}

50
scss/_variables.scss
View File

@ -272,29 +272,22 @@ $zindex-modal: 1040 !default;
//
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Extra large screen / wide desktop
$screen-xl-min: 75em !default;
// Large screen / desktop
$screen-lg-max: ($screen-xl-min - .1) !default;
$screen-lg-min: 62em !default;
// Medium screen / tablet
$screen-md-max: ($screen-lg-min - .1) !default;
$screen-md-min: 48em !default;
// Small screen / phone
$screen-sm-max: ($screen-md-min - .1) !default;
$screen-sm-min: 34em !default;
// Extra small screen / phone
$screen-xs-max: ($screen-sm-min - .1) !default;
//== Grid system
//
//## Define your custom responsive grid.
$grid-breakpoints: (xs sm md lg xl);
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em,
// Medium screen / tablet
md: 48em,
// Large screen / desktop
lg: 62em,
// Extra large screen / wide desktop
xl: 75em
) !default;
//** Number of columns in the grid.
$grid-columns: 12 !default;
//** Padding between columns. Gets divided in half for the left and right.
@ -305,17 +298,12 @@ $grid-gutter-width: 1.5rem !default;
//
//## Define the maximum width of `.container` for different screen sizes.
//** For `$screen-xs-min` and up.
$container-sm: 34em !default; // 480
//** For `$screen-sm-min` and up.
$container-md: 45rem !default; // 720
//** For `$screen-md-min` and up.
$container-lg: 60rem !default; // 960
//** For `$screen-lg-min` and up.
$container-xl: 72.25rem !default; // 1140
$container-max-widths: (
sm: 34rem, // 480
md: 45rem, // 720
lg: 60rem, // 960
xl: 72.25rem // 1140
) !default;
//== Navbar

85
scss/mixins/_breakpoints.scss Normal file
View File

@ -0,0 +1,85 @@
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 34rem, md: 45rem)
//
// 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))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
// 34rem
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// 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
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 0.1, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
@mixin media-breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
@mixin media-breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
// Nested media query combination does not work in libsass yet
// https://github.com/sass/libsass/issues/185
// Work around until the issue is resolved:
$min: breakpoint-min($name, $breakpoints);
$max: breakpoint-max($name, $breakpoints);
@if $min and $max {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else {
// One of min or max is a no-op, so this branch is not affected by libsass#185
@include media-breakpoint-min($name, $breakpoints) {
@include media-breakpoint-max($name, $breakpoints) {
@content;
}
}
}
}

75
scss/mixins/_grid-framework.scss
View File

@ -3,69 +3,40 @@
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
// Common properties for all breakpoints
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@for $i from 1 through $columns {
@each $breakpoint in $breakpoints {
@each $breakpoint in map-keys($breakpoints) {
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
}
}
// Breakpoint-specific properties
@mixin make-grid($breakpoint, $columns: $grid-columns) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} {
float: left;
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column-float-#{$breakpoint};
@include grid-column-width($i, $columns);
}
}
@each $modifier in (pull, push, offset) {
@for $i from 0 through $columns {
.col-#{$breakpoint}-#{$modifier}-#{$i} {
@include grid-column-modifier($modifier, $i, $columns)
@include media-breakpoint-min($breakpoint) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} {
float: left;
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column-float-#{$breakpoint};
@include make-col-span($i, $columns);
}
}
@each $modifier in (pull, push, offset) {
@for $i from 0 through $columns {
.col-#{$breakpoint}-#{$modifier}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
}
}
}
}
@mixin grid-column-width($index, $columns) {
width: percentage($index / $columns);
}
@mixin grid-column-push($index, $columns) {
left: if($index > 0, percentage($index / $columns), auto);
}
@mixin grid-column-pull($index, $columns) {
right: if($index > 0, percentage($index / $columns), auto);
}
@mixin grid-column-offset($index, $columns) {
margin-left: percentage($index / $columns);
}
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
@mixin grid-column-modifier($type, $index, $columns) {
@if $type == push {
@include grid-column-push($index, $columns);
} @else if $type == pull {
@include grid-column-pull($index, $columns);
} @else if $type == offset {
@include grid-column-offset($index, $columns);
}
}

27
scss/mixins/_grid.scss
View File

@ -24,18 +24,29 @@
padding-right: ($gutter / 2);
}
@mixin make-col-span($columns) {
width: percentage(($columns / $grid-columns));
@mixin make-col-span($size, $columns: $grid-columns) {
width: percentage($size / $columns);
}
@mixin make-col-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}
@mixin make-col-push($columns) {
left: percentage(($columns / $grid-columns));
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-pull($columns) {
right: percentage(($columns / $grid-columns));
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-modifier($type, $size, $columns) {
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
@if $type == push {
@include make-col-push($size, $columns);
} @else if $type == pull {
@include make-col-pull($size, $columns);
} @else if $type == offset {
@include make-col-offset($size, $columns);
}
}

14
scss/mixins/_media-queries.scss
View File

@ -1,25 +1,25 @@
// Media query mixins
// Media query mixins for default breakpoints
@mixin media-xs() {
@media (max-width: $screen-xs-max) { @content }
@include media-breakpoint-max(xs) { @content }
}
@mixin media-sm() {
@media (min-width: $screen-sm-min) { @content }
@include media-breakpoint-min(sm) { @content }
}
@mixin media-sm-max() {
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @content }
@include media-breakpoint-only(sm) { @content }
}
@mixin media-md() {
@media (min-width: $screen-md-min) { @content }
@include media-breakpoint-min(md) { @content }
}
@mixin media-md-max() {
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @content }
@include media-breakpoint-only(md) { @content }
}
@mixin media-lg() {
@media (min-width: $screen-lg-min) { @content }
@include media-breakpoint-min(lg) { @content }
}