v4 alpha 3 ship list
Didn't do one of this for the second alpha (which kinda sucked). Trying again this time with the highlight-worthy changes as we go.
Summary of changes
- Updated grid system with new mixins and predefined classes.
- Overhauled form controls, documentation, and more to fix bugs, reduce code bloat, improve layout options, improve validation styles, and more.
- New native font stack to replace the Helvetica-Arial one for improved text rendering across all operating systems and devices.
- More selector improvements that reduce HTML requirements by better utilizing classes.
- Added dozens of new variables for improved customization (more still to come).
- Updated lots of documentation to better explain components and more.
- Massive improvements to flexbox support throughout the project, most notably on the grid.
- Renamed
.label
to.tag
to disambiguate our custom component from the HTML element.
CSS
-
#17194 (closed): Ensure height of
select.form-control
matches textual inputs. - #17222: Replace base64 PNGs for form validation icons and custom form controls with smaller, slightly customizable inline SVGs.
-
#17498 (closed), #18130 (closed): Removed horizontal padding on
.form-control-label
so it avoids overriding grid-based form layouts and renders correctly in stacked forms. - #17756: Fix flexbox column wrapping in Firefox and IE10+ by adding a
max-width
that equals the column width. - #18398, #18921: Add new
_custom.scss
file to the import stack for easier variable overrides. -
#18390 (closed): Renamed
.radio
and.checkbox
to.form-check
, and.radio-inline
and.checkbox-inline
to.form-check-inline
. - #18488: Turn
.text-muted
into a full utility class with hover styles. - #18500: Allow multiple instances of
.input-group-addon
per input group. -
#18515 (closed): Added
.form-control-{sm/lg}
classes to match small and large input classes, namely for vertical alignment of label and input in horizontal form groups. -
#18573 (closed): Renamed
.form-control-label
to.col-form-label
for it's more contextual use case as a horizontal grid layout option. - #18695: Condition-alize the container classes around the
$enable-grid-classes
boolean option (joins the existing conditional.col-*
classes). - #18702 (closed): Updated form validation docs to include basic examples for situations in which you'd want to use each state.
-
#18703 (closed): Dropped
.text-help
for.form-control-feedback
, designed specifically to only display temporary form validation feedback text in addition to normal help text. - #18771: Rewrote custom form components (new classes, less nesting, disabled checkboxes and radios) along with some docs tweaks.
- #18772: Renamed
.btn-*-outline
classes to.btn-outline-*
to make it easier to style with attribute selectors. - #18774: Rename
.card-*-outline
classes to.card-outline-*
. - #18782: Dropped the
.pager
component since it's essentially a lightly customized version of v4's new outline buttons. - #18783: Revamp a ton of nav variables for easier customization and tweak some nav docs.
- #18789: Prevent breadcrumb separator from getting underlined on hover when not using
<ol>
markup in IE9-11 with a funky little CSS hack. - #18807: Overhaul dropdown docs and improve split button dropdowns with some fresh styles.
- #18814: Added Liberation Mono to the monospace font stack for the sake of Linux users.
- #18823: Add
$btn-active-box-shadow
variable for improved customization of button states. - #18848: Only round progress bar borders when
$enable-rounded
is true. - #18925: Added
:lang()
-based support for translating the text in the custom file input widget. - #18927: Apply
word-wrap:break-word
to tooltips and popovers. - #19000: Remove print-specific
max-width:100%;
on images so that Google Maps etc. print correctly. - #19064 (closed): Overhaul tables docs and use rgba() colors for inverse tables.
- #19098: Brand new "native font stack" that prioritizes the well-designed display fonts from each major OS and device over traditional web fonts.
- #19099, #20349, and #20361: Overhauled grid system to add docs for flexbox, add flexbox utility classes, improve flexbox responsive behavior, streamline mixins, and more.
- #19102, a0a157db: Drop
.center-block
for.m-x-auto
. - #19103: Revamp the
{a,button}.list-group-item
selector with a new class,.list-group-item-action
. Includes revised docs and more code comments. - #19105: Update modals to use
max-width
within their media queries to prevent horizontal scrollbars. - #19106: Added
$enable-print-styles
variable to control whether default styles for@media print
are included. - #19109: Integrated postcss-flexbugs-fixes into the build to workaround Flexbug #4 which affects IE10-11.
- #19121: Refactored button and input
padding
andline-height
for improved stability after changing rootfont-size
. - #19136: Change from hex border colors on
.form-control
torgba()
withbackground-clip: padding-box
so we have borders that blend in with their background elements. - #19139: Add support for validation states on custom forms.
- #19157: Rename
.label
class to.tag
to disambiguate between a custom component and<label>
s. - 955e0405: Added support for tab and pill navigations in card headers.
- #19234: Add
.w-100
aswidth: 100%
utility class - #19236: Extract $carousel-icon-width variable
- #19252: Add $card-img-overlay-padding variable
- #19277: new
.form-control-legend
class - #19370: Add
$input-bg-focus
and$input-color-focus
variables - #19411: Neutralize link styles for placeholder links/named anchors
-
1b351058: Add
display
utility classes -
#19563 (closed): Add variable for
background-color
of.bg-inverse
utility class - #19667: Use
border-radius
mixins and add$nav-tabs-border-radius
variable - #19714: Suppress IE/Edge additional white/blue colors for focused
<select>
- #19735: Add disabled styling for .custom-select
-
#19771 (closed): Fixed form control sizing not applying to
<select>
s. - #19862: Update Normalize to v4.0.0
- #19874: Make named anchor/placeholder link style reset more specific by targeting
<a>
s without anhref
andtabindex
. - #19885: Several card improvements for spacing, contextual variants, bug fixes, and more.
- #19889: Updated popovers to include a variable for the inner padding and restore CSS-powered hiding of empty popover titles with
.popover-title:empty
. - #20083: Add media rules to stack nav items in
navbar-toggleable-*
s.
JS
- #19894 Update jQuery to v2.2.4
Accessibility
- #19222 Focus (visually hidden) input radio/checkbox
- #19255 add/unify advice on contextual colors and accessibility
- #19705 Add
aria-label
and callout about labelling pagination components - #19879 Handle
aria-hidden
on modal container when showing/hiding
Docs
- Miscellaneous accessibility fixes.
- #17089 (closed): Improve responsive test examples.
-
#17248 (closed), #17266, #19277: Update docs to use
<div>
s over<fieldset>
s in form groups as fieldsets are more appropriate for groups of multiple inputs. - #18492 (closed): Add .h1 – .h6 example to docs
- #18545 (closed): Combined the "Dropdowns" and "Button dropdown" docs pages into one
- #18704: Updates form validation docs to include examples of validation feedback text alongside always-present form field help text.
- #18705 (closed): Improve Migration Doc for .help-block and .form-group
- #18768 (closed): Add migration guidance for Dropdowns
- #19277: better use of
fieldset
/legend
for grouped controls - #19408: Introduction for using table-reflow
- #19439 (closed): Include reasoning & suggested replacements for dropped widgets in migration docs
- #19459: Explicitly state the ordering of cards in card columns in the docs
- #19476: Added explicit commentary to .card-* classes
- #19567: Call out removal of
@screen-*
variables in v4 - #19710: Update 300ms click delay docs to reflect iOS 9.3 improvements
- #19789: Suggest alternative approaches for
.hidden
and.show
in migration docs - #19863: Add docs for inverse table "variants" using existing utilities
- #19892: Remove reference to
loaded.bs.modal
event - #20372: Enable flexbox CSS on flexbox grid page with custom override file for hosted docs
Examples
- #18741: Fix justified nav example by updating it to the new nav classes (note: it still exhibits the same bug on window resize as documented in v3).
Packaging
- #19427: Add jQuery and Tether to npm dependencies
- Fixed NuGet integration
- #19706: Add GitHub issue template
- #20141: Require Node.js >= v4 in
engines
inpackage.json