root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add breakpoint-specific gutters.

This commit is contained in:
Kovah 2016-09-09 06:48:17 +02:00 committed by Chris Garcia
parent 3f01134031
commit 0ef64d89f7
8 changed files with 87 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/scss/_component-examples.scss
View File

@ -324,7 +324,7 @@
.highlight {
padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2);
margin: 1rem (-$grid-gutter-width-base / 2);
background-color: #f7f7f9;
@include media-breakpoint-up(sm) {

4
docs/assets/scss/_featurettes.scss
View File

@ -26,10 +26,10 @@
@include media-breakpoint-up(md) {
.col-sm-6:first-child {
padding-right: ($grid-gutter-width * 1.5);
padding-right: ($grid-gutter-width-base * 1.5);
};
.col-sm-6:last-child {
padding-left: ($grid-gutter-width * 1.5);
padding-left: ($grid-gutter-width-base * 1.5);
}
}
}

2
docs/assets/scss/_masthead.scss
View File

@ -2,7 +2,7 @@
.bd-masthead {
position: relative;
padding: 3rem ($grid-gutter-width / 2) 2rem;
padding: 3rem ($grid-gutter-width-base / 2) 2rem;
color: $bd-purple-light;
text-align: center;
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));

2
docs/assets/scss/_page-header.scss
View File

@ -1,7 +1,7 @@
// scss-lint:disable ImportantRule
.bd-pageheader {
padding: 2rem ($grid-gutter-width / 2);
padding: 2rem ($grid-gutter-width-base / 2);
margin-bottom: 1.5rem;
color: $bd-purple-light;
text-align: center;

53
docs/layout/grid.md
View File

@ -1,4 +1,4 @@
---
atom---
layout: docs
title: Grid system
group: layout
@ -33,14 +33,14 @@ Sounds good? Great, let's move on to seeing all that in an example.
If you're using Bootstrap's compiled CSS, this the example you'll want to start with.
{% example html %}
<div class="container">
<div class="container">a
<div class="row">
<div class="col-sm-4">
One of three columns
One of three columnsa
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>atom
<div class="col-sm-4">
One of three columns
</div>
@ -139,7 +139,15 @@ Variables and maps determine the number of columns, the gutter width, and the me
{% highlight scss %}
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-gutter-width-base: 30px;
$grid-gutter-widths: (
xs: $grid-gutter-width-base, // 30px
sm: $grid-gutter-width-base, // 30px
md: $grid-gutter-width-base, // 30px
lg: $grid-gutter-width-base, // 30px
xl: $grid-gutter-width-base // 30px
)
$grid-breakpoints: (
// Extra small screen / phone
@ -168,23 +176,27 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
{% highlight scss %}
// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
@mixin make-row($gutters: $grid-gutter-widths) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2);
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}
// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutter: $grid-gutter-width) {
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
@ -192,6 +204,14 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
@if $enable-flex {
width: 100%;
}
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-col($size, $columns: $grid-columns) {
@ -463,11 +483,18 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
### Columns and gutters
The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters.
The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
{% highlight scss %}
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
{% endhighlight %}
### Grid tiers

10
scss/_variables.scss
View File

@ -151,8 +151,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-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
// Typography
//

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

@ -3,20 +3,18 @@
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $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-right: ($gutter / 2);
padding-left: ($gutter / 2);
@if $enable-flex {
width: 100%;
}
@include make-gutters($gutters);
}
$breakpoint-counter: 0;
@ -38,8 +36,6 @@
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}

34
scss/mixins/_grid.scss
View File

@ -2,7 +2,7 @@
//
// Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
@mixin make-container($gutter: $grid-gutter-width-base) {
margin-left: auto;
margin-right: auto;
padding-left: ($gutter / 2);
@ -22,22 +22,36 @@
}
}
@mixin make-row($gutter: $grid-gutter-width) {
@mixin make-gutters($gutters: $grid-gutter-widths) {
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-row($gutters: $grid-gutter-widths) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2);
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
@ -45,6 +59,14 @@
@if $enable-flex {
width: 100%;
}
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-col($size, $columns: $grid-columns) {