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') 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/flexbox-grid.md | 1 + docs/layout/grid.md | 1 + docs/layout/media-object.md | 1 + docs/layout/overview.md | 1 + docs/layout/responsive-utilities.md | 1 + 5 files changed, 5 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index d15d6fb99..0eae713b3 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -1,6 +1,7 @@ --- layout: docs title: Flexbox grid system +description: Documentation and examples for using Bootstrap's optional flexbox grid system. group: layout --- 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 --- diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index fcb89a3b5..95dbceb40 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -1,6 +1,7 @@ --- layout: docs title: Media object +description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like. group: layout --- diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 81cdecf60..3e6c7e7e0 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -1,6 +1,7 @@ --- layout: docs title: Overview +description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. group: layout redirect_from: "/layout/" --- diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 2a44fd589..4334eb4d6 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -1,6 +1,7 @@ --- layout: docs title: Responsive utilities +description: Use responsive display utility classes for showing and hiding content by device, via media query. 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') 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