From f4bf0542d78018a31c0ae07d5dee1aacfd20182e Mon Sep 17 00:00:00 2001 From: ysds Date: Sat, 13 Jan 2018 16:40:55 +0900 Subject: [PATCH 1/5] Add direct children selectors to avoid cascading styles into a menu form (#25279) --- scss/_input-group.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/scss/_input-group.scss b/scss/_input-group.scss index fcf7c3c432..2f7b05d5d8 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -11,9 +11,9 @@ align-items: stretch; width: 100%; - .form-control, - .custom-select, - .custom-file { + > .form-control, + > .custom-select, + > .custom-file { position: relative; // For focus state's z-index flex: 1 1 auto; // Add width 1% and flex-basis auto to ensure that button will not wrap out @@ -33,15 +33,15 @@ } } - .form-control, - .custom-select { + > .form-control, + > .custom-select { &:not(:last-child) { @include border-right-radius(0); } &:not(:first-child) { @include border-left-radius(0); } } // Custom file inputs have more complex markup, thus requiring different // border-radius overrides. - .custom-file { + > .custom-file { display: flex; align-items: center; From 216c7ea20f9a96ece061fe2391b8a5d7740153c0 Mon Sep 17 00:00:00 2001 From: Sander Melnikov Date: Sat, 13 Jan 2018 10:45:21 +0300 Subject: [PATCH 2/5] Fix breakpoint mixins for custom breakpoint maps (#25264) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When using the `media-breakpoint-between` or `media-breakpoint-only` mixins with a custom breakpoint map – not defined as `$grid-breakpoints` – the mixin incorrectly defaults back to the global `$grid-breakpoints` map in certain situations. This commit correctly passes on the `$breakpoints` argument to the other mixins called within the block. --- scss/mixins/_breakpoints.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 85ce72f6b6..d1ad684cc7 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -90,11 +90,11 @@ @content; } } @else if $max == null { - @include media-breakpoint-up($lower) { + @include media-breakpoint-up($lower, $breakpoints) { @content; } } @else if $min == null { - @include media-breakpoint-down($upper) { + @include media-breakpoint-down($upper, $breakpoints) { @content; } } @@ -112,11 +112,11 @@ @content; } } @else if $max == null { - @include media-breakpoint-up($name) { + @include media-breakpoint-up($name, $breakpoints) { @content; } } @else if $min == null { - @include media-breakpoint-down($name) { + @include media-breakpoint-down($name, $breakpoints) { @content; } } From 588227f97f53f537da2bba5af6cb0619a0f91cfb Mon Sep 17 00:00:00 2001 From: Wolfgang Goedel Date: Sat, 13 Jan 2018 08:50:25 +0100 Subject: [PATCH 3/5] Fixed color for disabled buttons (#25167) --- scss/mixins/_buttons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 23a27f6b90..c2ab602ef7 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -28,6 +28,7 @@ // Disabled comes first so active can properly restyle &.disabled, &:disabled { + color: color-yiq($background); background-color: $background; border-color: $border; } From 17b0472b12915dd413b50a41d6975529b04b0a6e Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 12 Jan 2018 23:56:31 -0800 Subject: [PATCH 4/5] $component-active-bg and $component-active-color are partially useful (#24710) * Use `$component-active-bg`, `$component-active-color` in custom-control-indicators and pagination for checked, indeterminate, and active states * Button and Forms focus colors should be based on `$component-active-bg` --- scss/_variables.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 3e47a1d1e9..300b1a7f08 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -323,7 +323,7 @@ $input-btn-padding-x: .75rem !default; $input-btn-line-height: $line-height-base !default; $input-btn-focus-width: .2rem !default; -$input-btn-focus-color: rgba(theme-color("primary"), .25) !default; +$input-btn-focus-color: rgba($component-active-bg, .25) !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; $input-btn-padding-y-sm: .25rem !default; @@ -401,7 +401,7 @@ $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten(theme-color("primary"), 25%) !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; $input-focus-color: $input-color !default; $input-focus-width: $input-btn-focus-width !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; @@ -447,20 +447,20 @@ $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) ! $custom-control-indicator-disabled-bg: $gray-200 !default; $custom-control-label-disabled-color: $gray-600 !default; -$custom-control-indicator-checked-color: $white !default; -$custom-control-indicator-checked-bg: theme-color("primary") !default; +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-control-indicator-active-color: $white !default; -$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: none !default; $custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-icon-checked: str-replace(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-indicator-checked-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"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(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-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indicator-indeterminate-box-shadow: none !default; @@ -485,7 +485,7 @@ $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; $custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; @@ -633,9 +633,9 @@ $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; $pagination-hover-border-color: $gray-300 !default; -$pagination-active-color: $white !default; -$pagination-active-bg: theme-color("primary") !default; -$pagination-active-border-color: theme-color("primary") !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: $gray-600 !default; $pagination-disabled-bg: $white !default; From 71550d3c9c22252204622ea40054ed5b262d8e3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 13 Jan 2018 16:34:31 -0800 Subject: [PATCH 5/5] Add new Approach docs page (#25165) --- docs/4.0/extend/approach.md | 71 +++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/docs/4.0/extend/approach.md b/docs/4.0/extend/approach.md index 1427e7a164..3d4451071f 100644 --- a/docs/4.0/extend/approach.md +++ b/docs/4.0/extend/approach.md @@ -1,5 +1,76 @@ --- layout: docs title: Approach +description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself. +group: extend --- +While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve. + +See something that doesn't sound right, or perhaps could be done better? [Open an issue](https://github.com/twbs/bootstrap/issues/new)—we'd love to discuss it with you. + +## Summary + +We'll dive into each of these more throughout, but at a high level, here's what guides our approach. + +- Components should be responsive and mobile-first +- Components should be built with a base class and extended via modifier classes +- Component states should obey a common z-index scale +- Whenever possible, prefer a HTML and CSS implementation over JavaScript +- Whenever possible, use utilities over custom styles +- Whenever possible, avoid enforcing strict HTML requirements (children selectors) + +## Responsive + +Bootstrap's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger. + +Across Bootstrap, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up. + +At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time. + +## Classes + +Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type="text"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override. + +As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc. + +Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you're actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants. + +## z-index scales + +There are two `z-index` scales in Bootstrap—elements within a component and overlay components. + +### Component elements + +- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination. +- These components share a standard `z-index` scale of `0` through `3`. +- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and , `3` is `:focus`. +- This approach matches our expectations of highest user priority. If an element is focused, it's in view and at the user's attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered. + +### Overlay components + +Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number is random and serves as a small buffer between our styles and your project's custom styles. + +Each overlay component increases it's `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars. + +Learn more about this in our [`z-index` layout page](/docs/4.0/layout/overview/#z-index). + +## HTML and CSS over JS + +Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser general provides a great deal of functionality for you. + +This principle is our first-class JavaScript API is `data` attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page](). + +Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use `