From 088b164a23b01b9f213235ce70931d44f49471d0 Mon Sep 17 00:00:00 2001 From: JPeer264 Date: Wed, 19 Oct 2016 10:17:55 +0200 Subject: [PATCH 01/14] updated sass variables table of contents --- scss/_variables.scss | 116 ++++++++++++++++++++++++++----------------- 1 file changed, 71 insertions(+), 45 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 13432f2f3..1dd3a1bfa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -6,16 +6,41 @@ // Table of Contents // -// Colors -// Options -// Spacing -// Body -// Links -// Grid breakpoints -// Grid containers -// Grid columns -// Fonts -// Components +// 1. Colors +// 2. Options +// 3. Spacing +// 4. Body +// 5. Links +// 6. Grid breakpoints +// 7. Grid containers +// 8. Grid columns +// 9. Fonts +// 10. Components +// 11. Tables +// 12. Buttons +// 13. Forms +// 14. Dropdowns +// 15. Z-index master list +// 16. Navbar +// 17. Navs +// 18. Pagination +// 19. Jumbotron +// 20. Form states and alerts +// 21. Cards +// 22. Tooltips +// 23. Popovers +// 24. Tags +// 25. Modals +// 26. Alerts +// 27. Progress bars +// 28. List group +// 29. Image thumbnails +// 30. Figures +// 31. Breadcrumbs +// 32. Media objects +// 33. Carousel +// 34. Close +// 35. Code @mixin _assert-ascending($map, $map-name) { $prev-key: null; @@ -38,7 +63,7 @@ // Variable format should follow the `$component-modifier-state-property` order. -// Colors +// 1. Colors // // Grayscale and brand colors for use across Bootstrap. @@ -56,7 +81,7 @@ $brand-danger: #d9534f !default; $brand-inverse: $gray-dark !default; -// Options +// 2. Options // // Quickly modify global styling by enabling or disabling optional features. @@ -70,7 +95,7 @@ $enable-grid-classes: true !default; $enable-print-styles: true !default; -// Spacing +// 3. Spacing // // Control the default styling of most Bootstrap elements by modifying these // variables. Mostly focused on spacing. @@ -100,7 +125,7 @@ $spacers: ( $border-width: 1px !default; -// Body +// 4. Body // // Settings for the `` element. @@ -108,7 +133,7 @@ $body-bg: #fff !default; $body-color: $gray-dark !default; -// Links +// 5. Links // // Style anchor elements. @@ -118,7 +143,7 @@ $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; -// Grid breakpoints +// 6. Grid breakpoints // // Define the minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries. @@ -133,7 +158,7 @@ $grid-breakpoints: ( @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -// Grid containers +// 7. Grid containers // // Define the maximum width of `.container` for different screen sizes. @@ -146,7 +171,7 @@ $container-max-widths: ( @include _assert-ascending($container-max-widths, "$container-max-widths"); -// Grid columns +// 8. Grid columns // // Set the number of columns and specify the width of the gutters. @@ -160,7 +185,7 @@ $grid-gutter-widths: ( xl: $grid-gutter-width-base ) !default; -// Typography +// 9. Fonts // // Font, line-height, and color for body text, headings, and more. @@ -229,7 +254,7 @@ $nested-kbd-font-weight: bold !default; $list-inline-padding: 5px !default; -// Components +// 10. Components // // Define common padding and border radius sizes and more. @@ -247,7 +272,7 @@ $caret-width: .3em !default; $caret-width-lg: $caret-width !default; -// Tables +// 11. Tables // // Customizes the `.table` component with basic values, each used across all table variations. @@ -263,7 +288,7 @@ $table-border-width: $border-width !default; $table-border-color: $gray-lighter !default; -// Buttons +// 12. Buttons // // For each of Bootstrap's buttons, define text, background and border color. @@ -315,7 +340,7 @@ $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !default; -// Forms +// 13. Forms $input-padding-x: .75rem !default; $input-padding-y: .5rem !default; @@ -447,7 +472,7 @@ $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 +// 14. Dropdowns // // Dropdown menu container and contents. @@ -474,7 +499,7 @@ $dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-light !default; -// Z-index master list +// 15. Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. @@ -490,7 +515,7 @@ $zindex-modal-bg: 1040 !default; $zindex-modal: 1050 !default; -// Navbar +// 16. Navbar $navbar-border-radius: $border-radius !default; $navbar-padding-x: $spacer !default; @@ -521,7 +546,7 @@ $navbar-light-disabled-color: rgba(0,0,0,.3) !default; $navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; $navbar-light-toggler-border: rgba(0,0,0,.1) !default; -// Navs +// 17. Navs $nav-item-margin: .2rem !default; $nav-item-inline-spacer: 1rem !default; @@ -546,7 +571,7 @@ $nav-pills-active-link-color: $component-active-color !default; $nav-pills-active-link-bg: $component-active-bg !default; -// Pagination +// 18. Pagination $pagination-padding-x: .75rem !default; $pagination-padding-y: .5rem !default; @@ -574,13 +599,13 @@ $pagination-disabled-bg: #fff !default; $pagination-disabled-border: #ddd !default; -// Jumbotron +// 19. Jumbotron $jumbotron-padding: 2rem !default; $jumbotron-bg: $gray-lighter !default; -// Form states and alerts +// 20. Form states and alerts // // Define colors for form feedback states and, by default, alerts. @@ -602,7 +627,7 @@ $state-danger-bg: #f2dede !default; $state-danger-border: darken($state-danger-bg, 5%) !default; -// Cards +// 21. Cards $card-spacer-x: 1.25rem !default; $card-spacer-y: .75rem !default; $card-border-width: 1px !default; @@ -621,7 +646,7 @@ $card-deck-margin: .625rem !default; $card-columns-sm-up-column-gap: 1.25rem !default; -// Tooltips +// 22. Tooltips $tooltip-max-width: 200px !default; $tooltip-color: #fff !default; @@ -635,7 +660,7 @@ $tooltip-arrow-width: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; -// Popovers +// 23. Popovers $popover-inner-padding: 1px !default; $popover-bg: #fff !default; @@ -658,7 +683,7 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -// Tags +// 24. Tags $tag-default-bg: $gray-light !default; $tag-primary-bg: $brand-primary !default; @@ -679,7 +704,8 @@ $tag-pill-padding-x: .6em !default; // customizing padding or font-size on labels. $tag-pill-border-radius: 10rem !default; -// Modals + +// 25. Modals // Padding applied to the modal body $modal-inner-padding: 15px !default; @@ -708,7 +734,7 @@ $modal-md: 600px !default; $modal-sm: 300px !default; -// Alerts +// 26. Alerts // // Define alert colors, border radius, and padding. @@ -735,7 +761,7 @@ $alert-danger-text: $state-danger-text !default; $alert-danger-border: $state-danger-border !default; -// Progress bars +// 27. Progress bars $progress-bg: #eee !default; $progress-bar-color: #0074d9 !default; @@ -749,7 +775,7 @@ $progress-bar-danger-bg: $brand-danger !default; $progress-bar-info-bg: $brand-info !default; -// List group +// 28. List group $list-group-bg: #fff !default; $list-group-border-color: #ddd !default; @@ -775,7 +801,7 @@ $list-group-item-padding-y: .75rem !default; $list-group-item-heading-margin-bottom: 5px !default; -// Image thumbnails +// 29. Image thumbnails $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; @@ -785,12 +811,12 @@ $thumbnail-border-radius: $border-radius !default; $thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; -// Figures +// 30. Figures $figure-caption-font-size: 90% !default; -// Breadcrumbs +// 31. Breadcrumbs $breadcrumb-padding-y: .75rem !default; $breadcrumb-padding-x: 1rem !default; @@ -802,14 +828,14 @@ $breadcrumb-active-color: $gray-light !default; $breadcrumb-divider: "/" !default; -// Media objects +// 32. Media objects $media-margin-top: 15px !default; $media-heading-margin-bottom: 5px !default; $media-alignment-padding-x: 10px !default; -// Carousel +// 33. Carousel $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; @@ -833,14 +859,14 @@ $carousel-caption-color: #fff !default; $carousel-icon-width: 20px !default; -// Close +// 34. Close $close-font-weight: bold !default; $close-color: #000 !default; $close-text-shadow: 0 1px 0 #fff !default; -// Code +// 35. Code $code-font-size: 90% !default; $code-padding-x: .4rem !default; From e22b0df8b22c0abf49782f19235b8894301bb8ce Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Thu, 20 Oct 2016 12:59:42 -0400 Subject: [PATCH 02/14] Create col class for auto flexbox columns .col-xs-auto, .col-sm-auto, etc. --- scss/mixins/_grid-framework.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 35ccd9221..5d7917489 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -40,6 +40,10 @@ flex-grow: 1; max-width: 100%; } + .col-#{$breakpoint}-auto { + flex: 0 0 auto; + width: auto; + } } @for $i from 1 through $columns { From 4538ac9b56e6390b4b4ca745dc749195859cb8f3 Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Mon, 24 Oct 2016 11:23:56 -0400 Subject: [PATCH 03/14] Add documentation for col-{breakpoint}-auto --- docs/layout/flexbox-grid.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..6fa04bf88 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -91,6 +91,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %} +Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. + +
+{% example html %} +
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+{% endexample %} +
+ ## Responsive flexbox Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. From 7cc086e2c1934fdf6dec5809f122f704e34e9892 Mon Sep 17 00:00:00 2001 From: judetucker Date: Wed, 26 Oct 2016 22:05:46 -0700 Subject: [PATCH 04/14] change the header nav description to include the new float --- docs/components/card.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/card.md b/docs/components/card.md index be9846a30..1bb0866fe 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -226,7 +226,7 @@ Card headers can be styled by adding `.card-header` to `` elements. ## Header nav -Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment. +Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment. {% example html %}
From 45cbbad87113053d6adb97e260c8689f77a3a8cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Einar=20Gangs=C3=B8?= Date: Thu, 27 Oct 2016 10:12:14 +0200 Subject: [PATCH 05/14] Docfix: Typo default -> secondary, and reorder --- docs/components/dropdowns.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 621b666f1..3e9948b3d 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -53,7 +53,7 @@ The best part is you can do this with any button variant, too:
- +
Action Another action @@ -63,7 +63,7 @@ The best part is you can do this with any button variant, too:
- +
Action Another action @@ -138,8 +138,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the
- - +
@@ -151,8 +151,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the
- - +
From ab49e3f7e69e7f10a1730a5d52ffd155b5b736de Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 08:58:12 -0700 Subject: [PATCH 06/14] fixes #21000: Remove margin from static form control example --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/forms.md b/docs/components/forms.md index 99f0d9a63..040f4f7e5 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -539,7 +539,7 @@ When you need to place plain text next to a form label within a form, use the `.
-

email@example.com

+

email@example.com

From abc9a526d525dad86e6fbe062161a66853227c78 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:03:45 -0700 Subject: [PATCH 07/14] Fixes #20498: Warn about flexbox bugs in our flex grid docs --- docs/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..4f456e273 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -27,6 +27,7 @@ The flexbox grid system behaves similar to our default grid system, but with a f - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. - Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. From 8ed7ebcd6344943edf68fd6d8a159190eb105a34 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:19:07 -0700 Subject: [PATCH 08/14] fixes #18565: mention carousel sizing in docs --- docs/components/carousel.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 64b012b0e..1e8d40113 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -14,6 +14,8 @@ A slideshow component for cycling through elements—images or slides of text— ## Example +When building carousels, be sure your slides are the same size as one another. The carousel doesn't automatically crop images to the same dimensions for you across slides. + {% example html %}