diff --git a/Gruntfile.js b/Gruntfile.js index 2b9c18899..bc7d009f0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -170,6 +170,7 @@ module.exports = function (grunt) { compatibility: 'ie9', keepSpecialComments: '*', sourceMap: true, + sourceMapInlineSources: true, advanced: false }, core: { diff --git a/_config.yml b/_config.yml index f3283b462..31c708ecd 100644 --- a/_config.yml +++ b/_config.yml @@ -14,7 +14,7 @@ destination: _gh_pages host: 0.0.0.0 port: 9001 baseurl: "" -url: http://getbootstrap.com +url: http://v4-alpha.getbootstrap.com encoding: UTF-8 exclude: [assets/scss/] @@ -22,6 +22,14 @@ gems: - jekyll-redirect-from - jekyll-sitemap +# Social +title: Bootstrap +description: The most popular HTML, CSS, and JS framework in the world. +twitter: getbootstrap +authors: Mark Otto, Jacob Thornton, and Bootstrap contributors +social_logo_path: /assets/brand/bootstrap-social-logo.png +social_image_path: /assets/brand/bootstrap-social.png + # Custom vars current_version: 4.0.0-alpha.4 repo: https://github.com/twbs/bootstrap diff --git a/docs/_data/browser-bugs.yml b/docs/_data/browser-bugs.yml index f69b93730..97c6d3d35 100644 --- a/docs/_data/browser-bugs.yml +++ b/docs/_data/browser-bugs.yml @@ -1,3 +1,13 @@ +- + browser: > + Microsoft Edge + summary: > + Visual artifacts in scrollable modal dialogs + upstream_bug: > + Edge#9011176 + origin: > + Bootstrap#20755 + - browser: > Microsoft Edge diff --git a/docs/_includes/header.html b/docs/_includes/header.html index 3fc75c058..54bfddf69 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -1,17 +1,17 @@ - - - {% if page.layout == "home" %} - {{ page.title }} + {% if page.title %} + {{ page.title }} · {{ site.title }} {% else %} - {{ page.title }} · Bootstrap + {{ site.title }} · {{ site.description }} {% endif %} +{% include social.html %} + {% if site.github %} diff --git a/docs/_includes/social.html b/docs/_includes/social.html new file mode 100644 index 000000000..c488ea610 --- /dev/null +++ b/docs/_includes/social.html @@ -0,0 +1,31 @@ + + + + +{% if page.title %} + + + + +{% else %} + + + + +{% endif %} + + +{% if page.title %} + + + +{% else %} + + + +{% endif %} + + + + + diff --git a/docs/about/brand.md b/docs/about/brand.md index fcb8804ae..546e9c154 100644 --- a/docs/about/brand.md +++ b/docs/about/brand.md @@ -1,6 +1,7 @@ --- layout: docs title: Brand guidelines +description: Documentation and examples for Bootstrap's logo and brand usage guidelines. group: about --- diff --git a/docs/about/history.md b/docs/about/history.md index ae4764ee7..590a99c35 100644 --- a/docs/about/history.md +++ b/docs/about/history.md @@ -1,6 +1,7 @@ --- layout: docs title: History +description: A brief overview of the history of Bootstrap. group: about redirect_from: "/about/" --- diff --git a/docs/about/license.md b/docs/about/license.md index 997b1c9ef..d614731bf 100644 --- a/docs/about/license.md +++ b/docs/about/license.md @@ -1,6 +1,7 @@ --- layout: docs title: License FAQs +description: Commonly asked questions about Bootstrap's open source license. group: about --- diff --git a/docs/about/team.md b/docs/about/team.md index 2492471cf..aa575f8f2 100644 --- a/docs/about/team.md +++ b/docs/about/team.md @@ -1,6 +1,7 @@ --- layout: docs title: Team +description: An overview of the founding team and core contributors to Bootstrap. group: about --- diff --git a/docs/about/translations.md b/docs/about/translations.md index de6519bb3..576259d35 100644 --- a/docs/about/translations.md +++ b/docs/about/translations.md @@ -1,6 +1,7 @@ --- layout: docs title: Translations +description: Links to community-translated Bootstrap documentation sites. group: about --- diff --git a/docs/assets/brand/bootstrap-social-logo.png b/docs/assets/brand/bootstrap-social-logo.png new file mode 100644 index 000000000..a2f0168c5 Binary files /dev/null and b/docs/assets/brand/bootstrap-social-logo.png differ diff --git a/docs/assets/brand/bootstrap-social.png b/docs/assets/brand/bootstrap-social.png new file mode 100644 index 000000000..cfac9c5fc Binary files /dev/null and b/docs/assets/brand/bootstrap-social.png differ diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 1ab49218c..a429b9aae 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -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) { diff --git a/docs/assets/scss/_featurettes.scss b/docs/assets/scss/_featurettes.scss index a74834387..03119ce50 100644 --- a/docs/assets/scss/_featurettes.scss +++ b/docs/assets/scss/_featurettes.scss @@ -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); } } } diff --git a/docs/assets/scss/_masthead.scss b/docs/assets/scss/_masthead.scss index f0ebe9363..aa59ffbfc 100644 --- a/docs/assets/scss/_masthead.scss +++ b/docs/assets/scss/_masthead.scss @@ -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%)); diff --git a/docs/assets/scss/_page-header.scss b/docs/assets/scss/_page-header.scss index 457d3fbef..e51459903 100644 --- a/docs/assets/scss/_page-header.scss +++ b/docs/assets/scss/_page-header.scss @@ -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; diff --git a/docs/components/alerts.md b/docs/components/alerts.md index 56e8b089c..54172a673 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -1,6 +1,7 @@ --- layout: docs title: Alerts +description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. group: components --- diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md index 40d407ddc..8beaa0ae4 100644 --- a/docs/components/breadcrumb.md +++ b/docs/components/breadcrumb.md @@ -1,6 +1,7 @@ --- layout: docs title: Breadcrumb +description: Indicate the current page's location within a navigational hierarchy. group: components --- diff --git a/docs/components/button-group.md b/docs/components/button-group.md index c14d3d63a..cff38e1b1 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -1,6 +1,7 @@ --- layout: docs title: Button group +description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. group: components --- diff --git a/docs/components/buttons.md b/docs/components/buttons.md index d5aa453d7..02b14f913 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -1,6 +1,7 @@ --- layout: docs title: Buttons +description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. group: components redirect_from: "/components/" --- diff --git a/docs/components/card.md b/docs/components/card.md index 1cf116d86..04f028189 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -1,6 +1,7 @@ --- layout: docs title: Cards +description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options. group: components --- diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 5f177432f..5bc299774 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -1,6 +1,7 @@ --- layout: docs title: Carousel +description: A slideshow component for cycling through elements—images or slides of text—like a carousel. group: components --- diff --git a/docs/components/collapse.md b/docs/components/collapse.md index ebbefeca4..aa82127ed 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -1,6 +1,7 @@ --- layout: docs title: Collapse +description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins. group: components --- diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index d43f5e17d..db26ffe87 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -1,6 +1,7 @@ --- layout: docs title: Dropdowns +description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. group: components --- diff --git a/docs/components/forms.md b/docs/components/forms.md index 09d0d4f8f..de66cde98 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -1,6 +1,7 @@ --- layout: docs title: Forms +description: Examples and usage guidelines for from controls, form layouts, and custom forms. group: components --- diff --git a/docs/components/input-group.md b/docs/components/input-group.md index 21f944d64..0082a62b6 100644 --- a/docs/components/input-group.md +++ b/docs/components/input-group.md @@ -1,6 +1,7 @@ --- layout: docs title: Input group +description: Extend form controls with the input group. group: components --- diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md index 9dd3c8294..e47becee9 100644 --- a/docs/components/jumbotron.md +++ b/docs/components/jumbotron.md @@ -1,6 +1,7 @@ --- layout: docs title: Jumbotron +description: Lightweight, flexible component for showcasing hero unit style content. group: components --- diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 8b3b9cd88..7b159bc79 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -1,6 +1,7 @@ --- layout: docs title: List group +description: Learn about Bootstrap's list group component for rendering series of related content. group: components --- diff --git a/docs/components/modal.md b/docs/components/modal.md index 55a0878b6..26676cacc 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -1,6 +1,7 @@ --- layout: docs title: Modal +description: Learn how to use Bootstrap's modals to add dialog prompts to your site. group: components --- diff --git a/docs/components/navbar.md b/docs/components/navbar.md index d3747a87f..c5ce0a259 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -1,6 +1,7 @@ --- layout: docs title: Navbar +description: Documentation and examples for Bootstrap's powerful, responsive navigation header. group: components --- diff --git a/docs/components/navs.md b/docs/components/navs.md index 78d476e1c..2b76f36e3 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -1,6 +1,7 @@ --- layout: docs title: Navs +description: Documentation and examples for how to use Bootstrap's included navigation components. group: components --- diff --git a/docs/components/pagination.md b/docs/components/pagination.md index 68c906c77..7a454a51f 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -1,6 +1,7 @@ --- layout: docs title: Pagination +description: Documentation and examples for showing pagination links. group: components --- diff --git a/docs/components/popovers.md b/docs/components/popovers.md index a723f33e3..bfaaf270e 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -1,6 +1,7 @@ --- layout: docs title: Popovers +description: Documentation and examples for adding Bootstrap popovers to your site. group: components --- diff --git a/docs/components/progress.md b/docs/components/progress.md index 5e0abc5fe..d604e9e7c 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -1,6 +1,7 @@ --- layout: docs title: Progress +description: Documentation and examples for using Bootstrap progress bars. group: components --- diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 622469aa1..52b7c29cd 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -1,6 +1,7 @@ --- layout: docs title: Scrollspy +description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components. group: components --- diff --git a/docs/components/tag.md b/docs/components/tag.md index 09608931a..d292cad22 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -1,6 +1,7 @@ --- layout: docs title: Tags +description: Documentation and examples for tags, our small label-badge component. group: components --- diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index e989307ca..10285701f 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -1,6 +1,7 @@ --- layout: docs title: Tooltips +description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript. group: components --- diff --git a/docs/content/code.md b/docs/content/code.md index 79059a1d1..a62e0845f 100644 --- a/docs/content/code.md +++ b/docs/content/code.md @@ -1,6 +1,7 @@ --- layout: docs title: Code +description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap. group: content --- diff --git a/docs/content/figures.md b/docs/content/figures.md index d57270518..c24b5b2c8 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -1,10 +1,11 @@ --- layout: docs title: Figures +description: Documentation and examples for displaying related images and text with the figure component in Bootstrap. group: content --- -Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `
`. +Anytime you need to display a piece of content—like an image with an optional caption, consider using a `
`. Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive. diff --git a/docs/content/images.md b/docs/content/images.md index f21010f0f..48a5dd3d4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -1,6 +1,7 @@ --- layout: docs title: Images +description: Documentation and examples for styling images with Bootstrap. group: content --- diff --git a/docs/content/reboot.md b/docs/content/reboot.md index a6815e9db..1d93cc9ce 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -1,6 +1,7 @@ --- layout: docs title: Reboot +description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css. group: content redirect_from: "/content/" --- diff --git a/docs/content/tables.md b/docs/content/tables.md index 3b4d58b36..f2741b734 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -1,6 +1,7 @@ --- layout: docs title: Tables +description: Documentation and examples for styling tables with Bootstrap. group: content --- @@ -13,7 +14,7 @@ Due to the widespread use of tables across third-party widgets like calendars an ## Examples -Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. {% example html %} diff --git a/docs/content/typography.md b/docs/content/typography.md index a59f50347..f9b5913d2 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -1,6 +1,7 @@ --- layout: docs title: Typography +description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more. group: content --- diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md index 43dee3569..19105b8ac 100644 --- a/docs/getting-started/accessibility.md +++ b/docs/getting-started/accessibility.md @@ -1,6 +1,7 @@ --- layout: docs title: Accessibility +description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology. group: getting-started --- diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md index 1e67a16e7..c030a5ac6 100644 --- a/docs/getting-started/best-practices.md +++ b/docs/getting-started/best-practices.md @@ -1,6 +1,7 @@ --- layout: docs title: Best practices +description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap. group: getting-started --- diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md index a73ec8982..4e0b0c78b 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -1,6 +1,7 @@ --- layout: docs title: Browsers and devices +description: Learn which browsers and devices are supported by Bootstrap. group: getting-started --- diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md index 2fe10088b..4d684f3ac 100644 --- a/docs/getting-started/build-tools.md +++ b/docs/getting-started/build-tools.md @@ -1,6 +1,7 @@ --- layout: docs title: Build tools +description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more. group: getting-started --- diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md index ab9c63325..c54cb5eba 100644 --- a/docs/getting-started/contents.md +++ b/docs/getting-started/contents.md @@ -1,6 +1,7 @@ --- layout: docs title: Contents +description: Learn about what's included in Bootstrap's precompiled and source code directories. group: getting-started --- diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index be46329be..183dd0abd 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -1,6 +1,7 @@ --- layout: docs title: Download +description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager. group: getting-started --- diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md index 9c0f1a876..b658001fe 100644 --- a/docs/getting-started/flexbox.md +++ b/docs/getting-started/flexbox.md @@ -1,6 +1,7 @@ --- layout: docs title: Flexbox +description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet. group: getting-started --- diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md index 8cec71fd6..716f6f349 100644 --- a/docs/getting-started/introduction.md +++ b/docs/getting-started/introduction.md @@ -1,6 +1,7 @@ --- layout: docs title: Introduction +description: Get started with Bootstrap using the Bootstrap CDN and a template starter page. group: getting-started redirect_from: "/getting-started/" --- diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md index debc4dcf5..b6a38fb7a 100644 --- a/docs/getting-started/javascript.md +++ b/docs/getting-started/javascript.md @@ -1,6 +1,7 @@ --- layout: docs title: JavaScript +description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more. group: getting-started --- diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index dd7f7fb3d..81c9c92fc 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -1,6 +1,7 @@ --- layout: docs title: Customization options +description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile. group: getting-started --- diff --git a/docs/index.html b/docs/index.html index 47c36ff2c..8039ab1ae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,6 +1,5 @@ --- layout: home -title: Bootstrap · The world's most popular mobile-first and responsive front-end framework. ---
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..0466fc7bf 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 --- @@ -139,7 +140,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 +177,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 +205,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 +484,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 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 --- diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 60e9f7a74..0e63ecc54 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -10,6 +10,7 @@ > .btn { position: relative; float: left; + margin-bottom: 0; // Bring the "active" button to the front &:focus, diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index e696d28be..47702e795 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -141,6 +141,7 @@ .dropdown-header { display: block; padding: $dropdown-padding-y $dropdown-item-padding-x; + margin-bottom: 0; // for use with heading elements font-size: $font-size-sm; color: $dropdown-header-color; white-space: nowrap; // as with > li > a diff --git a/scss/_forms.scss b/scss/_forms.scss index 263a8bc15..59465ee6c 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -18,8 +18,16 @@ background-image: none; background-clip: padding-box; border: $input-btn-border-width solid $input-border-color; + // Note: This has no effect on `s in CSS. - @include border-radius($input-border-radius); + @if $enable-rounded { + // Manually use the if/else instead of the mixin to account for iOS override + border-radius: $input-border-radius; + } @else { + // Otherwise undo the iOS default + border-radius: 0; + } + @include box-shadow($input-box-shadow); @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); @@ -239,6 +247,7 @@ select.form-control-lg { } &.disabled { + color: $text-muted; cursor: $cursor-disabled; } } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 1a1e4728b..a24c3d3fa 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -318,8 +318,6 @@ textarea { // properly inherited. However, `line-height` isn't addressed there. Using this // ensures we don't need to unnecessarily redeclare the global font stack. line-height: inherit; - // iOS adds rounded borders by default - border-radius: 0; } input[type="radio"], diff --git a/scss/_variables.scss b/scss/_variables.scss index e56912ded..08d372d80 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -150,9 +150,15 @@ $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-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; // Typography // @@ -375,13 +381,15 @@ $custom-control-active-indicator-bg: #84c6ff !default; $custom-control-active-indicator-box-shadow: none !default; $custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; +$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; + $custom-checkbox-indeterminate-bg: #0074d9 !default; -$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; +$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; +$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default; $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; -$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default; +$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default; $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; @@ -391,7 +399,8 @@ $custom-select-disabled-color: $gray-light !default; $custom-select-bg: #fff !default; $custom-select-disabled-bg: $gray-lighter !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; +$custom-select-indicator-color: #333 !default; +$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; @@ -428,23 +437,28 @@ $custom-file-text: ( // Form validation icons -$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; -$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; -$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; +$form-icon-success-color: $brand-success !default; +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='$form-icon-success-color' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; + +$form-icon-warning-color: $brand-warning !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; + +$form-icon-danger-color: $brand-danger !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 160px !default; -$dropdown-padding-y: 5px !default; -$dropdown-margin-top: 2px !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: .5rem !default; +$dropdown-margin-top: .125rem !default; $dropdown-bg: #fff !default; $dropdown-border-color: rgba(0,0,0,.15) !default; $dropdown-border-width: $border-width !default; $dropdown-divider-bg: #e5e5e5 !default; -$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default; $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default; @@ -455,7 +469,7 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; -$dropdown-item-padding-x: 20px !default; +$dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-light !default; diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 8b17d7843..0e3852e24 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -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); } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index fa9b3995b..b381ba900 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -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); - 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); + } + } } -@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) {