From d71c080ab52333e31af61558ba81b9ed04b3c593 Mon Sep 17 00:00:00 2001 From: Raphael Luba Date: Wed, 20 Jul 2016 17:37:54 +0200 Subject: Replace renamed classes in grid push/pull example (#20330) The example for column ordering still referenced the old push/pull class names. --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..b93f0d8b7 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -442,7 +442,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm ### Example: Column ordering -Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes. +Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
{% example html %} -- cgit v1.2.3 From a8879c8f82ec3debb8e225844dc4561e2900beda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 23 Jul 2016 17:12:43 -0700 Subject: Follow-up to #19099 for grid fixes - Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col') - Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding - Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports --- docs/layout/grid.md | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..4ce3c3beb 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -180,20 +180,21 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Make the element grid-ready (applying everything but the width) -@mixin make-col($gutter: $grid-gutter-width) { +@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { 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 + // later on to override this initial width. @if $enable-flex { - flex: 1; - } @else { - float: left; + width: 100%; } - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); } -@mixin make-col-span($size, $columns: $grid-columns) { - // Set a width (to be used in or out of media queries) +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -201,6 +202,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // do not appear to require this. max-width: percentage($size / $columns); } @else { + float: left; width: percentage($size / $columns); } } @@ -232,23 +234,23 @@ See it in action in this rendered example @include make-row(); } .content-main { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(8); + @include make-col(8); } } .content-secondary { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(4); + @include make-col(4); } } {% endhighlight %} -- cgit v1.2.3 From ded1bf98d796ed9efb5c22eb1cfd8870b336158a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:27:55 -0700 Subject: One more follow up to #19099, #20349, and #20361 Remove mention of base class and fix grid examples --- docs/layout/grid.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8e7c5225e..a69e10b84 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -270,36 +270,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu ### Example: Stacked-to-horizontal -Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`. +Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.
{% example html %}
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
-
md-8
-
md-4
+
col-md-8
+
col-md-4
-
md-4
-
md-4
-
md-4
+
col-md-4
+
col-md-4
+
col-md-4
-
md-6
-
md-6
+
col-md-6
+
col-md-6
{% endexample %}
-- cgit v1.2.3 From 55795e88450ad13fdcc581a31fa1697fd2f77145 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:36:30 -0700 Subject: Customizing grid docs updates to followup on #19099 - More details on columns and gutters - Break it into clear sections --- docs/layout/grid.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index a69e10b84..2dd86970e 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -459,7 +459,18 @@ Easily change the order of our built-in grid columns with `.push-md-*` and `.pul Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. -For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: +### 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. + +{% highlight scss %} +$grid-columns: 12; +$grid-gutter-width: 30px; +{% endhighlight %} + +### Grid tiers + +Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: {% highlight scss %} $grid-breakpoints: ( @@ -475,4 +486,4 @@ $container-max-widths: ( ); {% endhighlight %} -Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. -- cgit v1.2.3 From 39732a0023857a128df89dcbe898cc4fddb6435d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:39:19 -0700 Subject: 30px not 15px --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 2dd86970e..7114da4b7 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -139,7 +139,7 @@ Variables and maps determine the number of columns, the gutter width, and the me {% highlight scss %} $grid-columns: 12; -$grid-gutter-width: 15px; +$grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone -- cgit v1.2.3 From 3f01134031b15a934d5e233bb26a407a7e05492b Mon Sep 17 00:00:00 2001 From: Nick Date: Tue, 13 Sep 2016 07:31:05 +0200 Subject: Grid mixins docs should match source code (#20705) --- docs/layout/grid.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 7114da4b7..5b68053aa 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -180,7 +180,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Make the element grid-ready (applying everything but the width) -@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); @@ -194,7 +194,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col($size, $columns: $grid-columns) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -208,14 +208,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Get fancy by offsetting, or changing the sort order -@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); } {% endhighlight %} -- cgit v1.2.3 From 0ef64d89f7fbf7c4eb306569b050720e240dde6b Mon Sep 17 00:00:00 2001 From: Kovah Date: Fri, 9 Sep 2016 06:48:17 +0200 Subject: Add breakpoint-specific gutters. --- docs/layout/grid.md | 55 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 41 insertions(+), 14 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 5b68053aa..d64322dea 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -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 %} -
+
a
- One of three columns + One of three columnsa
One of three columns -
+
atom
One of three columns
@@ -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); - margin-right: ($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 -- cgit v1.2.3 From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/layout/grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 5b68053aa..ec80156a4 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,6 +1,7 @@ --- layout: docs title: Grid system +description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system. group: layout --- -- cgit v1.2.3 From 4699fd4b4076f325652a5f51cd0c734d900faac3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 19:23:10 -0700 Subject: fix typos --- docs/layout/grid.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 47e8f4470..0466fc7bf 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,4 +1,4 @@ -atom--- +--- layout: docs title: Grid system description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system. @@ -34,14 +34,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 %} -
a +
- One of three columnsa + One of three columns
One of three columns -
atom +
One of three columns
-- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 0466fc7bf..26ff36c41 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -246,7 +246,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. -See it in action in this rendered example. +See it in action in this rendered example. {% highlight scss %} .container { -- cgit v1.2.3 From 0ba05f4da9d5fc14c926cd1eeeed2119ba6c47a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 12:42:36 -0700 Subject: Update the grid table heading to clarify max width over width Fixes #20688 --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 26ff36c41..68e0d86ec 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -91,7 +91,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Collapsed to start, horizontal above breakpoints - Container width + Max container width None (auto) 576px 720px -- cgit v1.2.3 From 1d0d0dac769cccaa3df62bafb7fb999c2a086adb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 13:51:05 -0700 Subject: Update grid docs to use new values for grid breakpoints and containers --- docs/layout/grid.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 26ff36c41..0785093ea 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -64,11 +64,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Extra small
- <544px + <576px Small
- ≥544px + ≥576px Medium
@@ -93,9 +93,9 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Container width None (auto) - 576px + 540px 720px - 940px + 960px 1140px @@ -154,7 +154,7 @@ $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone - sm: 544px, + sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop @@ -164,9 +164,9 @@ $grid-breakpoints: ( ); $container-max-widths: ( - sm: 576px, + sm: 540px, md: 720px, - lg: 940px, + lg: 960px, xl: 1140px ); {% endhighlight %} @@ -512,7 +512,7 @@ $grid-breakpoints: ( $container-max-widths: ( sm: 420px, md: 720px, - lg: 940px + lg: 960px ); {% endhighlight %} -- cgit v1.2.3 From 13cc81c50c473c78e96dc8f5c815782afd81d3b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 13:51:59 -0700 Subject: Update grid docs mention of gutter width value (no more rems for awhile now) --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/grid.md') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 0785093ea..5d37880c0 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a Gutter width - 1.875rem / 30px (15px on each side of a column) + 30px (15px on each side of a column) Nestable -- cgit v1.2.3