v4 #17021

Closed
wants to merge 6,124 commits into
from

Conversation

Projects
@mdo
Member

mdo commented Aug 19, 2015

Bootstrap 4

This is the primary pull request for developing and shipping Bootstrap 4. You should know a few things coming into this:

  • Everything here should be considered a work-in-progress (we're in the alpha release stage).
  • The list of todos will change as we get closer to shipping.
  • There is no specific ship date for the final v4 release at this time.
  • Nothing is guaranteed to be part of v4 until our first beta release.
  • Should you wish to contribute, please open small pull requests for specific open tasks to the v4-dev branch.
  • Have a feature request? Check here first, then open a new issue if it hasn't been addressed below.

Heads up! This thread has been locked to contributors. Please use issues for questions, comments, and feedback about particular changes. We'll cross reference them here as they come up.

Read the v4 alpha announcement blog post for more details on these changes and some of the open questions we still have to answer.

Big picture

We've got a number of big changes coming in v4. To name a few:

  • Move from Less to SCSS.
  • Refactor grid system to utilize five tiers (xs, sm, md, lg, and xl), adding a ~480px tier.
  • Remove all previously deprecated features, classes, and variables.
  • Drop IE8 support.
  • Replace wells, thumbnails, and panels with a new component, cards.
  • Drop Glyphicons.
  • Add flexbox variation for grid and components, flipping between them via variables.
  • Add some custom form controls (from http://wtfforms.com).
  • Replace media queries with media query mixins per #13014.
    • Replace standard width uses
    • Replace all @grid-float-breakpoint uses
  • Modularize all our global resets into a single SCSS file called Reboot.
  • Update build tools to create custom compiled builds of Bootstrap's CSS and JS instead of using a web-based Customizer.
    • Everything (default)
    • Everything with flexbox enabled
    • Just the grid
    • Just the Reboot
  • Find an easy-to-use, performant spinner to include with Bootstrap.

We also have some super ambitious nice to haves:

  • Add a script to publish individual components to individual repos?
  • Move to Gulp from Grunt?
  • Form validation polyfill?

What about v3?

We will continue to support Bootstrap 3, but only for critical bug fixes and documentation updates. No new features will be added, and nothing will be removed. If you need IE8 support, Bootstrap 3 has your back (or you can go out of your way to re-implement it in v4).

Be aware that we will set a reasonable date in the future to completely discontinue v3 support.


Feature breakdown

Here's the breakdown by feature/component of the updates we've made to v4, as well as some that are still todo.

CSS

Global

  • Drop all previously deprecated sizing variables.
  • Switch to rems as the main sizing unit.
  • Drop separate theme file for variable-mixin customization (e.g., set @border-radius: true and get rounded corners).
  • Rename all variables from @*-small to @*-sm, etc. (twbs/bootstrap#10352)
  • Reconsider vertical rhythm (twbs/bootstrap#11601)
  • Preface all @import-ed filenames with _ (e.g., _dropdown.scss)
  • Single tense (nearly) all filenames
  • Remove most > selectors and replace with un-nested classes.
    • Dropdowns
    • Nav (base, tabs, and pills)
    • Panels (done, since we dropped the component)
    • Carousel
  • Remove IE8 CSS hacks.
  • More flexibility when using .disabled on nav links, per #14291.
  • Move all element selectors and reset styles to a single "reboot" SCSS file, thereby creating our own extension of Normalize and improving modularity of our class-based components.
  • Use color variables consistently: #14840
  • Consider implementing a _custom.sccss for easier, built-in variable overrides?

Variables and mixins

  • Nuke box-shadow mixin: #12638
  • Rewrite the semantic grid mixins #13426
  • Make .sr-only a real mixin per #13583.
  • Clean up uses of @extends in favor of mixins in more places (namely clearfixes).

Grid system

Type

  • Rem units with auto-scaling type sizes
  • Fix heading interaction with emphasis classes (twbs/bootstrap#10202 , twbs/bootstrap#11515)
  • Grid-based horizontal dls (twbs/bootstrap#11639)
  • Rewrite the headings and small stuff to avoid specificity issues per #12782.
  • Drop .help-block for existing utility classes and more flexible HTML #13267
  • Text truncation class to go with mixin?
  • Responsive alignment classes? #14217
  • Rebuild the .dl-horizontal to use grid classes instead of it's fixed-width dimensions from v3.

Code

  • Remove the word-break and white-space stuff from <pre> elements per #13917.
  • Make <pre> elements relatively unstyled (no more gray background and stuff).

Utilities

  • Rename and/or remove !important from .show & .hide (twbs/bootstrap#9881)
  • Address hide vs. hidden naming inconsistency (twbs/bootstrap#11541)
  • Alternate responsive utility strategy with ranges: #12443
  • Rename skip nav classes: #13457
  • Finna fix that double clearfix bug: #13538.
  • Rename float and text alignment classes so they're more RTL-friendly: twbs/bootstrap#16419
  • Break out Utilities docs into separate sections. Use one page per family of utilities (e.g., text, spacer, etc).
  • Add some examples for spacing utility docs.
  • Refactor spacer utilities Sass to include a variable-based multiplier instead of a hard-coded one.
  • Move all text and background utility classes from _type.less to _utilities.less.
  • Move to the end of the @import stack to work with every component possible (instead of individual state classes)?

Tables

  • Rename .table-condensed to .table-sm (twbs/bootstrap#10987)
  • Rewrite table contextual classes to not be markup specific—e.g,. use .table-danger instead of td.danger
  • Table and alignment classes, per twbs/bootstrap#12237
  • Remove grid system sizing. Keep it for non-tabular, truly grid-based implementations. No more mixing.

Forms

Labels

Inputs

  • Remove FF4-18 placeholder per #12358.
  • Switch to min-height on inputs since we can drop IE8 (IE8 and box-sizing don't mix well)?
  • Support for (or completely custom) range inputs?

Validation and states

Layout

  • Height of radios and checkboxes? twbs/bootstrap#11456
  • Drop .form-horizontal class entirely in favor of just grid classes.
  • Alignment of checkboxes and radios #13936.

Misc

  • Remove most of the <legend> styling
  • Sync icons between custom forms and form validation states.

Buttons

  • Finalize new styles, especially for the secondary button class.
  • Consider replacing .active with > input:checked (etc.) in the Buttons plugin styles to address twbs/bootstrap#11535.
  • Add .btn-outline

Button groups

  • Add separate class for split button vs single button dropdowns—perhaps .btn-group-segmented? Hopefully to avoid shit like twbs/bootstrap#10876.

Glyphicons

  • Remove Glyhpicons
    • Add instructions for implementing Font Awesome
    • Add instructions for implementing Octicons
    • Add instructions for implementing a third option, if there is one?

Alerts

Breadcrumb

Carousel

  • Clean up carousel controls (twbs/bootstrap#10831)
  • Add carousel- prefix to Carousel's .next,.prev,.left,.right classes

Dropdown

  • Make carets from pseudo selectors (generated content). (Nullifies twbs/bootstrap#11142)
  • If dropdowns aren't getting autopositioning, add new dropdown alignment classes—left and right, and perhaps for top and bottom too?
  • Drop the deprecated .dropdown-menu.pull-right styles. We have .dropdown-menu-right/-left now.

Input groups

  • Dump input group's :first-child and :last-child for -of-type selectors: #12687.
  • Simpler rounded corners on input groups, possibly via class only: #13150.
  • Verify #13171 and #13254 post rem switch.

Jumbotron

  • Abstract some jumbotron styles-e.g. type sizes—to new utility classes (like .display-1).
  • Turn remaining Jumbotron styles—large gray background and large padding—into more utilities?

Labels

  • Move to inline-block again per #14081.
  • Make badges a variation labels.

Modal

  • Add additional animations
  • Modal dismissing on iOS flashes: #14032
  • Make modals centered vertically: #14617
  • Add option or event for more control over refocusing of trigger button after hiding a modal: #16604
  • Finally fix that shifting content bug by updating the modal.js to not adjust body padding, but rather the padding on a specific set of classes.

Nav

  • Rewrite nav components to use classes over > selectors.
  • Drop justified nav variations.
  • Rewrite tabs and pills to be mobile-first: #7540

Navbar

  • Remove the autocollapsing behavior of the v3 navbar.
  • Provide examples of using a custom hidden area with a configurable navbar toggler button.
  • Rewrite navbar alignment classes to avoid fubared navbar-right stuff: #12951.
  • Add drawer variation? twbs/bootstrap#9481
  • Expose proper API for "opening one closes all others" accordion behavior (twbs/bootstrap#16360)

Panels

  • Drop for cards.

Popover/tooltip

  • Fix inconsistency?: .tooltip-arrow vs. Popover's .arrow
  • Don't call content function twice: #12563
  • Document Tether dependency clearly in the docs.
  • Convert tooltip's arrows to generated CSS content via :before/:after.

Progress

  • Drop existing progress bars for mdo/wtf-forms#27.
  • Add a non-<progress> variation to ensure animated backgrounds can still be used.

List group

  • Rename a.list-group-item to .list-group-item-link

JS

Global

  • AMD? #13812
  • UMD? #13843
  • Support custom animations per #13622
  • Support for jQuery 2? Anything need doing here? Dropping old jQuery?
  • Fix event namespacing (hide.bs.tooltip -> bs.tooltip.hide, etc.) (twbs/bootstrap#10848)
  • Drop IE7 JS, per twbs/bootstrap#10858.
  • Add destroy method to all plugins per #13655
  • Accept jQuery objects in plugin options per #13489
  • Use .js- classes or data attributes for JS behavior only per #14431
  • Use external or new library for positioning content (tooltips, popovers, dropdowns) per #14327.
  • Defer loading per #14023
  • Add methods for determining if elements are shown. visible, expanded, etc #15573
  • More global keyboard access plugin (from twbs/bootstrap#14590)
  • Use a global namespace (BS or $.BS)
    • References to all plugins' classes (BS.Popover)
    • Common utility functions (BS.utils)
      • Generating UIDs
      • Escaping jQuery selector strings to allow for (valid) IDs like #foo.bar
      • URI-encoded hash fragments in IDs (#14740)
  • Better touch support throughout?
  • Have Bootstrap's custom events include the (e.g. click, keyboard) event that caused them as an originalEvent property: #15393
  • Either throw explicit error or add handling when both e.g. tooltip.js and all-bootstrap-plugins.min.js are loaded.
  • Try to find a way to avoid tooltips on button groups needing special-casing by the user (container: 'body' is currently required)
  • Consider using MutationObserver to improve tooltips (#15632) and modals (#16320)

Affix

  • Drop affix.
  • Replace with a position: sticky polyfill?

Alert

Buttons

  • Re-think button plugin
    1. Separate the checkbox and radio functionality from the rest and make esp. checkboxes not require .btn-groups to support my second point.
    2. Drop the single toggle functionality. Checkbox is exactly that but more advanced?
    3. Replace stateful functionality with only the loading state.
  • Have Button plugin listen for and react to change event of associated <input>s? #13261

Carousel

Collapse

  • Make accordion feature of collapse plugin independent of panels?: twbs/bootstrap#10966
  • Consider defaulting Collapse plugin's toggle option to false when initializing: #12254 (comment)
  • Horizontal collapsing? #14423
  • Configure event for collapse #13036

Dropdowns

Scrollspy

  • Generalize scrollspy selector to work on more than nav links: #13050.
  • Support multiple data targets on the same page, #14776

Tab

  • Generalize tab behavior perhaps so that it's not dependent on nav markup: #12391
  • Collapsing sections in vertical menus (is this just accordion?) per #14948

Tooltips

  • Consider making .tooltip('show') throw an error when the target is display: none per #14155
  • Support multiple delegated tooltip selectors on a single node. twbs/bootstrap#14167

Popovers

  • Add option to replace title and body per #12754
  • Binding and positioning for parents? #12799
  • Add argument data-target to popover #13029

Docs

  • Host previous version—perhaps we put v4 at getbootstrap.com/v4/ so URLs don't break?
    • Look into possible Jekyll plugins for redirect some old links
  • Revisit CSS and Components docs page split.
  • Combine JS and CSS versions of components (dropdowns, tabs, buttons, alerts)
  • Find a way to remove some of our callouts—way too many gotchas and notes and shit.
  • Further repo organization cleanup with consolidated tests directory? #12291
  • Add docs to educate folks about autoprefixer and mixins: #12670.
  • Improve and simplify getting started docs a la Pure
  • Improve docs for installing via npm, Bower, Git clone, CDN, and download
  • Nuke or revamp the variables and mixins docs to avoid duplication and staleness
  • Remove compatibility= 'ie8' from clean-css
  • Remove html5shiv and respond.js from docs?
  • Update minium Firefox version in autoprefixer to >= 31 (latest ESR). See #14981.
  • Write Best Practices docs.
  • Write a Learn & Extend or Approach section.
  • Replace basic Jekyll search with something more comprehensive.

Customizer

  • Drop it entirely since folks are building better community-led ones.

Examples

  • Update all examples to v4 changes
  • Move examples to separate GitHub repo and submodule or include them somehow? Intent is to create a more flexible, user-driven set of examples.
  • Google Earth, and perhaps Mapbox: #12820.
  • Justified navbar: #14598
  • Pricing tables

@twbs twbs locked and limited conversation to collaborators Aug 19, 2015

@mdo mdo added the v4 label Aug 19, 2015

gburton referenced this pull request in gburton/Responsive-osCommerce Sep 1, 2015

Glyphicon Removal
Remove Glyphicon in favour of FontAwesome

mdo and others added some commits Dec 29, 2017

Remove Entypo from "Preferred Icon Sets". (#25141)
The download link for Entypo (on its website) is invalid. It's a Dropbox link which now results in a 403 error. The website was last updated in 2015 (as seen in the footer).
Outline active focus (#25145)
* Base the outline button :active color on the background, fixing a contrast issue

* Only apply focus outline to active when it's focused
Allow nested structure for accordions (#25121)
This commit allows nested structures for accordions. Also a part of
the documentation about data-children is removed because this
functionality didn't work and it's not applicable anymore.

Tests with the collapse accordion are also a bit adjusted to the new
situation.
Textarea support for input groups
The append and prepend classes vertically aligned items in the center
For textareas this meant the addon would aling vertically instead of stretch and have it's contents vertically aligned
these changes fix that so everything is aligned how it should be
Remove incorrect roles from accordion, tweak/expand accessibility inf…
…o, use buttons for accordion

* Remove incorrect roles from accordion, tweak/expand accessibility info
* Use `<button>` elements rather than links for the accordion
Update pagination focus styles
- Drops the hover-focus mixin for standard :hover
- Adds explicit :focus styles to match button, input, etc with a box-shadow
- Adjusts z-index values to ensure the layers go initial, hover, active, focus

Fixes #24838.
Validation tooltip example (#25143)
* Add additional form validation examples

Fixes #24811.

This adds .valid-feedback to our custom styles and server side examples; previously we ommitted this to suggest you don't always need valid feedback. In addition, this adds examples of the .{valid|invalid}-tooltip classes with a new subsection in the Validation docs.

* Update validation tooltip styles to remove fixed width; instead should retain itself to the parent element

* update ids

* finish docs paragraph, mention position: relative

MikeRogers0 and others added some commits Mar 20, 2018

Making use of `prefers-reduced-motion` media query (#25641)
* Making use of `prefers-reduced-motion` media query

As discussed in #25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.

* Ignoring prefers reduced motion for CSS Linting
* Updating copy clarifying the reduce motion functionality in accessibility.md
Update all devDependencies.
Kept back karma-qunit and qunitjs because tests fail.
tests: load 3rd-party libs from the local node_modules folder.
This reduces duplication and the chances to forget to update something.
docs: Switch to StackPath's URL.
While the old one will keep working, better switch to the new one.
Close #25697
Removes the .justify-content-between from a navbar form example given it's the default style. Instead, mention how to adjust this and link to flex utils.
Fix Chrome's rendering of .card-columns
Uses orphans/widows trick from @fran-worley at #20925 (comment).

Fixes #20925.
Tiny grammar and punctuation tweaks to a comment.
1. It's == "it is"

2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it.

Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code.

@mdo mdo closed this Apr 1, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.