v3.0.2

Major Updates:

• The Dropdown widget now have an option for changing the container where the menu is placed upon show. The menu moves back to its original location on hide. This is useful when a dropdown is used inside an element with an overflow: hidden;.
• Modals have an optional vertically centered layout. Note: do not use with long content, otherwise the top of the modal will be clipped off. When in doubt, use the default layout.
• Build process has moved over to using stylelint for the Sass linter. This drops out scss-lint from the Ruby requirement. Now only node/npm resources should be needed to build the source. Ruby is still required (because of Jekyll) to build the documentation.

CSS

• 47f8b9a: Card Group: fix no border-radius when only a single card in group.
• e7b4b12: Card: Reduce nested rules for list-group following a card-header.
• 54dd147: Reboot: Add style for non-overlapping scrollbar in IE for <pre>.
• 7d05ac2: Reboot: Reset border-radius for button elements
• d8bcec3: Alert: Adjust close button semantics, placement, and sizing
• b12ad39: Modal: Adjust close button sizing and placement
• e1a9d9f: Card: Fix <hr> not showing when direct child of a card
• 40c2880: Navbar: Handle links inside .navbar-text
• 0f97541: Input Group: Add support for .custom-select and adjust some sizing/alignment
• d396fbc: Utilities-Display: Add .d-table-row
• 35dac29: Modal: Add inner border-radius to header and footer
• 9ec5896: Utilities-Caret: Convert to use mixins, apply to all dropdown carets, add example to docs
• 2c3baf5: Forms: Fix .custom-select when using attribute 'multiple'
• 448ec53: Fix media-breakpoint-between() mixin
• 6e11447: Reboot: Use variable for margin bottom on headings
• 78d3d44: Caret: remove print override
• 8e5c4ef: make-col-offset: Remove percentage if it's zero
• 1c5bc07: Add comment where explicitly use of flex: 1 0 0%;
• a703b4e: Navbar: more tweaks for IE and collapsing navbars
• cbaccf8: Custom file browser: Make sure there is default text shown even when no lang attribute, expand example
• 8b8e6e8, e01b0ad, 45ede69: Buttons: Don't apply active visuals to disable buttons, remove use of .dropdown-toggle since it is sometimes optional
• 427ba4d: Tables: Consolidate table-hover contextual color rules
• 81cdd54: Button Group: Remove redundant shadow items
• 84de8a3: Increase heading line-height to deal with descender truncation
• 0bb9801: Add custom file input to input group and adjust z-index for button group, input group, pagination, and custom file input
• 32fdd60: Remove background-image: none; on .form-control
• 9403065: Remove duplicated margin rues from pre since it's already set in reboot
• fe185b7: Card: Fix header and footer border radius for card group
• 3d76a65: Forms: Ajust width of .form-control-static to match .form-control
• 549a25d: Button: Add color to transition
• 39fe800: Cards: Use border-radius mixins consistently
• 3f05f1a: Button Group: Update .dropdown-toggle-split
• 2270e1d: Buttons: Add fallback border-radius
• dfe39ea: Modal: Add optional vertically centered layout option
• dff8688: Custom Forms: Update focus shadow on custom checkbox/radio to match form control

JS

• a44e162: Dropdown: Add container option

Docs

• ed7106e, f46071a, b09c0c1: Get Started-Options: Clarify settings overrides with Sass and the !default flag.
• 4f87e69: Utilities-Spacing: Add auto designation.
• 9ff1e0f: Example plugin: add data-example-id only if it's been supplied.
• cf9cee1: Grid clarifications and additional flexbox resource
• e7d6e4f: Typography: Add note about using rem units on $font-size-base
• 18f9ad1: Make sure buttons have a type attribute defined
• 6207c07: Dropdown: Add Info about using toggle indicators
• 49dd5a2: Quick Start: Exapnd CDN section a bit
• dcee855: Grid: Expand on column resets
• d4eda0c: Image: Add item about using <picture>
• fbc9a88: Caret: update directional notes
• ff7d13c: Examples: Add fixed bottom navbar, tweak fixed top, update links
• 86767f9: Get Started-Options: Expand on how importing Sass works
• 940b974: Grid: Revise Safari bug wording a bit
• 3715846: Layout-Overview: correct z-index items
• e5b42fd: Cards: additional list-group example
• 5eeb51c: Forms: Remove containers and add label/static sizing example
• c1d5cef: Navbar: Expand on placement details
• 1b97663: Popover: Clarify regarding multi-line anchors
• b8f769c: Update some JS/Javascript consistency
• 52db8bc: Tables: Reorder some sections
• 778b1df: Widgets-Button: Add examples for vertical button groups
• 41ac97e: Utilities-Display: Add missing .d-table-row util
• 23267e2: Utilities-Flexbox: Update auto margin section with IE 10-11 issue

Build

• b859f03: Specify node support for minimum active (v6) and correct naming
• be23b27: Switch to using stylelint for Sass linter

v3.0.1

Major Updates:

• Breadcrumb now uses flexbox layout instead of floats.
• Equalize was overhauled a bit with updated logic and handling for nesting, but should work mostly the same. The biggest change was where the mutation handler hooks in. Instead of being the top level item getting the attribute for data-cfw-mutate and calling down, the mutation attribute is now attached on the lowest items and invokes upwards in the DOM.

CSS

• 6a85128: Reboot: Don't use touch-action:manipulation on input type="range"
• a174f57: Component-Breadcrumb: convert to flexbox layout
• c6a31a7: Utilities: add .border-x{-0} and .border-y{-0} classes for adding and removing border on horizontal and vertical sides
• 2383db5: Utilities-Border radius: add missing !important
• cc27a9e, 641e7b4: Navbar fix for IE10

JS

• fa51cab: Modal: fix typo and add sizing adjustment for sticky elements
• 5666882, b7f1967: Modal: work around some of the iOS body scrolling issue
• 201783a: Fix for potential XSS
• 099e7d8: Modal: Take margins into account when determining if body is overflowing
• 42a1ea4: Utils: Add imageLoaded utility function, use in Equalize and Lazy
• f2b0885: Use instance value with CFW_imageLoaded, reduce duplication in equalize
• f698cc0: Equalize: fix calling nested equalize items from an ancestor
• 8db45d8: Utils: Fix mutate triggerHandler to call on each target
• 71645a1: Modal: stop infinite loop of updates
• 825e8b6: Modal: use .modal-dialog for transition delay when showing and hiding
• d64bffc: Equalize: rework logic and nesting handling
• 7b61a80: Tabs: Remove incorrect use of aria-expanded

Docs

• b0a497a: Remove .d-flex from images in media object examples
• 5b3a5d5: Remove speculation about jQuery support
• 2bddf3d: Component-Breadcrumb: use accessibility markup recommended by WAI-ARIA
• 5714692: Content-Table: add WAI-ARIA updates and caption example
• 5298c8e: Add <title> to quick start templates
• ca2fcc6: Don't use short jQuery method names in docs
• 726e683: Use CSS3 pseudo elements in docs for correct use of ::before and ::after (not :before and :after)

v3.0.0

For previous changes see #161, #207, #219, #223, and #224.

Major Updates:

• 3615af8, 8680e6c: Specified the files for NPM package. Cuts down on the package size from over 6MB to about 315KB. Basically just the dist, along with the source js and scss files, and just enough to build the dist. If you need the docs and all the tests for local dev, then download the source version, or clone the repo.
• More right-to-left support added. Missed some of the utility classes last release. Now, instead of using left/right or l/r designation, we now use a start/end or s/e naming system.
  • The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css uses the ltr mode, where figuration-rtl.*.css uses the rtl mode.
    • For left-to-right mode (ltr - default);
      • start refers to the left side
      • end refers to the right side
    • For right-to-left mode (rtl);
      • start refers to the right side
      • end refers to the left side

CSS

• 3900dd5: Utilities: Spacing - simplify settings and optimize generated output
• 49e18fe: Fix .form-group layout when used with inline form
• 2ba4244: Navbar container override no longer needed due to c4b8d0c
• 5f38d64: Adjust alignment in navbar
• e649b6c: Additional positioning utilities
• e988e2f: Adjust caret dimension
• 72d7510: Add .font-weight-light utility
• 524d410: Adjust button transitions
• c5cd7eb, 7942725: Add paragraph spacing setting variable
• 0ed0c1d: Add input group addon color setting variable
• e6395f7, a21f7db: Use align-items: center; on input-group, not children, to keep from growing in height when next to tall element
• 56188bf: Forms: Move margin to right side for inline radio/checkbox to fix alignment when vertical
• 004024f: Mixins: Add missing content inclusions to media-breakpoint-only mixin
• 1384d71: Utilities-Border: Add border addition util
  e5a1718- Utilities-Border: update to be rtl friendly
• 21374a3: Utilities-Spacing: update to be rtl friendly
• 676e1c1: Fix double border when .list-group just after .card-header

JS

• b0d9be3: Tooltip: Adjust handling for fixed/absolute elements
• f29cef5: Relax jQuery version check
• 632f5fb, f9a550a: Popover: improve resize handling and location updates when draggable
• 93804fd: Make sure to unset mutate.cfw.mutate event when no longer needed
• 682083b: Dropdown: allow ESC key to propagate when menu is closed

Docs

• 8aac2a9: Update download content path and file list to include rtl versions. Removed .map files from list.
• 5496b60: Widgets-Modal: Fix placement options
• 6bbee2f: Use position utils with unlabelled .form-check-input
  items
• 8072c35: Add missing input group size examples
• a629397: Use type="search" for search inputs

Build

• 6ac61c5: Fix default grunt task so it also builds doc assets

v3.0.0-beta.2

For previous changes see #161, #207, #219, and #223.

Major Updates:

• Minimum supported version of jQuery is now v3.0.0
• #225 - Right-to-left support has been added There is now a rtl version of the CSS figuration-rtl.css (and a .min version) generated during the build process, and will be included with each release.
  • Add RTLCSS to grunt process
  • Update float utils
    • .float-*-start replaces .float-*-left
    • .float-*-end replaces .float-*-right
  • Update text alignment utils
    • .text-*-start replaces .text-*-left
    • .text-*-end replaces .text-*-right
  • Update tooltip/popover position options
    • reverse/forward replaces the left/right options
  • Update dropdown alignment classes
    • dropdown now uses .dropdown-menu-forward and .dropdown-menu-reverse classes for alignment.
    • following examples apply to ltr mode, horizontal directions are opposite in rtl mode
      • *-forward aligns root menu on left edge of parent, sub-menus open to right
      • *-reverse aligns root menu on right edge of parent, sub-menus open to left
  • Update modal padding handling
• Card groups, decks, and columns are now responsive allowing for greater flexibility. This means that that previous Sass settings for the minimum breakpoint trigger for each of these layouts no longer exists. You will need to update your HTML to use the sm responsive variant to achieve the previous behavior, as shown below:
  • .card-group-sm replaces the previous .card-group
  • .card-deck-sm replaces the previous .card-deck
  • .card-columns-sm replaces the previous .card-columns
• Player widget now has basic support for a custom caption container. Add a container with the attribute data-cfw-player="caption-display" to the player markup to suppress the default browser captions and have them display within the designated container. This will allow for a bit more control when skinning the player, since you can style or place the captions as needed.
• Player widget has better support for HTML within captions, descriptions, and transcripts than previous releases.

CSS

• 66ab088: Utiliies: Flexbox order - extend with additional classes that match up with the column count
• 4ff4388, 04040fa: Blockquote: drop border and reverse variant - use text utils
• 69d6519: Utility - color: Extend border and background color utility classes
• 5eaf011: Add SFMono-Regular to monospace font stack
• 108b1ac: Dropown: add non-interactive text item
• 14070b9: Reboot: remove tap highlight color override
• d6d2071: Card: make .card-group, .card-deck, and .card-columns responsive
• 8202fe5: Drop :first-line and :first-letter from print styles
• ef9eaaf: Fix box-sizing inheritance issue with Chrome
• c4b8d0c: Stop .container from collapsing with minimal content and display: flex; parent
• 3cb9680: Adjust overlapping margins for sibling .form-control and .input-group-btn items in .input-group

JS

• f4c8bf1: Tabs: add 'in transition' check
• 5f59774: Slideshow: add loop option
• 7a3e7eb: Collapse: fix setting initial state for flexbox items
• d598818: Player: add basic support for custom caption container
• 1bb8b18: Modal: add back missing scrollbarReset.cfw.modal event callback
• bfeac8e: Player - use getCueAsHTML() with transcript, descriptions, and custom captions
• 5bcf50a: Add missing buttons to widget list- needed for CFW_Init() and CFW_Dipose() methods
  -6799dd179c680cd7a8e7b4c52d161cd4f247c369: Restore preventDefault to tootlip toggle() method- ---

Docs

• ba3e180: Clarify .text-truncate util usage
• 32a6603: Adjust header for md and down screens
• 6c45939: Layout-Grid: content updates
• 2fbe936: Badges: more examples

Build

• c640141: Reduce Android Browser support from >= v4 to >= v4.4
• 4dfcec1: Update QUnit 2.3.3 -> 2.4.0
• 298ba38: Update minimum supported jQuery version to v3.0.0

v3.0.0-beta.1

For previous changes see #161, #207, and #219.

Yes, this one is a barrage of commits instead of using PR's. I know bad dev, bad. ☹️

Major Updates:

• New Component - Switches - available in standard input and rounded shapes. Color and size variants are also included. Switches can also be reversed to 'toggle' in the opposite direction.
• .table now supports <tfoot> and has a few more border options. Also .table-scroll now has responsive variants in the form of .table-scroll-*-down.
• Reworked the .btn focus border and added it to .form-control and some custom form control items. This also fixes the box-shadow transitions not working when $enable-shadows is true.
• Overhauled the doc layout to try and increase usability and add some visual interest.
  • Added new branding.
  • Use more available width.
  • Add search to be available in localhost modes as well.
  • xl screens show a modified TOC to right hand-column
• Dropped _custom.scss as it causes more problems than it solves. Either it is in the wrong place in load order where settings cannot be overridden, or default settings cannot be used in new variables.
• Dropped the use of Normalize.css and move to updated version of Bootstrap's Reboot. Adjusted a few items at the same time:
  • .form-control-legend no longer adds padding, just adjusts font size and added sizing variants.
  • Base text-align:left on <body> now
  • <th> now inherits the text-align property of its ancestor

CSS

• 0e5b687: Popover: Allow customizing header font size
• 6ec6cc7: Grid: Revert simplified grid back to flex-basis widths
• 39996ce: Modal: Add pointer-event rules to help with custom close handlers
• 9ebddf0: Input Group: When using validation colors, don't z-index button above input
• 5991758: Progress: update how heights and labels are handled
• 771a6b5: Cards: fix for overflowing text
• c7cbed4: Custom File Input: hide choose text, not control when empty
• 63faee3: Normalize naming for 'inner' settings
• 9131f18: Cards: Extend .card-inverse settings
• b4dc24b: Normalize var name for input border-color
• fe0c79a, 4daea25, df411d2, adbebf6: Add new Switch component
• 59cfb17: Table: Add <tfoot> support and extend border options
• b6fa8b4: Table: Added responsive .table-scroll variants, and give inertial scrolling to WebKit browsers
• 1fdc561: Tweak padding on <code> elements, now gives a bit of space between them when stacked.
• 70b829a: Rework focus border for buttons, form controls, and some custom form controls.
• 5b197d4, b448633, b9f2029: Move _assert-*() from _settings.scss to functions, this keeps them in proper load order, and gets them out of the way.
• 9dcf520, 329f5cd: Drop problematic _custom.scss
• 740d7fd: Add support query for position: sticky and update doc
• d092596: Make media-breakpoint-only() mixin more robust
• 952640b: Fix shorthand flex-basis for those non postcss-flexbugs-fixes users - (going to leave it activated for now though)
  -1adf73ba968848b6b2df105e6a8425b690ae13bf: Make responsive variants for .text-hide
• 711b7bf: Make .card-deck and .card-group always display: flex;
• c6b44d1: Add emoji fonts to base font stack
• ff4cfc8: Drop Normalize.css and move to updated Reboot

JS

• 7b535a4: Dropdown: improve spacebar handling for <button>s and role="button"
• 4abc188: Drag: update event handling with instances and stop killing element drag listeners
• a696379: Tooltip/Popover: Reset focus to trigger on hide via ESC or close item
• 4956a30: Collapse: Add basic flexbox handling
• 8cf638e: Scrollspy: read settings from the calling element
• 316eb48: Affix: dipose events on target element, remove unused var
• 6b7e2fd: CFW_API: rework CFW_Init(), create CFW_Dispose()

Docs

• c31683f, 5de82b4: Additional image replacement/.text-hide examples
• ed5cf12: Add branding, overhaul layout, give homepage more info
• b985fb3: Tweak new heading for IE 11, still off a bit in IE 10
• d55d826: Input groups - mention labels should go outside of the group
• de4cfe6: Navbar: Update some spacing in examples

Build

• 3faa135: Update QUnit 2.3.2 -> 2.3.3
• b2e8095: Travis/Sauce: Use localhost due to MS Edge loopback blocking

v3.0.0-alpha.3

For previous changes see #161 and #207.

Major Updates:

• Added support for button, input, and textarea items in Dropdowns. Keyboard navigation will be altered where needed, and will override the default dropdown tab and arrow key behavior when focus is in a textual input when within a .dropdown or the new .dropdown-item.
• Added support for Audio and Text descriptions to the Player widget. Audio is done by swapping the source media. Text is done with an additional track that will appear in the interactive transcript. Renamed .player-scripttxt to .player-transcript.
• MutationObserver support has been been added to some of the Widgets, check out #222 for more details. The goal of adding mutation handling is to make the widgets a bit automated in their functionality without developers needing to manually hook up various pieces, such a showing a lazy loaded image inside of a popover. This will now automatically happen without having to implement a additional callback.

CSS

• 9489ca2, 7d324e5: Update to Normalize.css v6.0.0
• 3238407, 9f8b245: Fix .navbar-divider
• 52aead7: Pagination: use var for margin adjustment
• 8b63c80: Some rework to .form-control-static
• 9b9d483: Fixed location of _custom.scss import
• 62c0f0b: Fix bouncing border for input-group buttons when first child
• 5c4b01c: Popover: update variable name for .popover-body font color, from $popover-content-color to $popover-body-color
• c64757a: Popover: allow setting font size
• 0643998: Popover: add inner border-radius for header
• 45c57f9: Adjust border coloring for .input-group, .custom-select, and .custom-file-control components
• bbeaea4: Buttons: Adjust default .btn border colors
• 767688e: Utilities-Flexbox: add basic sizing utilities

JS

• e105c21: Moved touch detection to utils
• 79bd806: Revised tooltip/popover
  • Fixed variable inheritance
  • tweaked target data setting
  • broke out insert routine
• 9100347: Revised iOS touch support
  • altered Dropdown selectors
  • added support to Tooltip
• 066f210: Tooltip: Add basic resize handler
• #220: Dropdown: Add support for button, input, and textarea items
• 2b61247: Rework some util methods
• #221, 7b87e82: Player: add audio and text description
• #222: Add MutationObserver support for some widgets
• a03ba1e: Tooltip/Popover: Rename option from activate to show
• f622a39: Tooltip/Popover: close item should always hide
• 6169546: Tooltip/Popover: allow manual trigger pass-through with auto show

Docs

• 75a3cfe: Make 'copy' example buttons into real ones
• 3e8030c: Add some tab related a11y notes
• 67a2379: Add role="main" to <main> for IE 10/11 accessibility

Build

• d32f4f0: Consolidate assets, tests now use doc assets

v3.0.0-alpha.2

Major Updates:

• Moving to flexbox all the time, and dropping IE 9 support. Many components (not all) will now use flexbox for their layout. This allows for some greater flexibility through the use of utilities to control layout and spacing.
• Cards have some support for flexbox, mosty for groups and decks. The base card is going to remain as display: block; for now, due to issues with Flexbug #5, mostly seen with images.
• Media object component has been simplified down to a little more than bare minimum. other than some margin handling for nested use-cases, most of the layout and spacing should now be handled through the utilities.
• Renamed some of the '-responsive' class names over to '-fluid`, as it is a better fit for what these classes accomplish. They don't work on or use responsive breakpoints, but operate fluidly across all widths.
  • .img-responsive is now .img-fluid
  • .embed-responsive-* utilities are now .embed-fluid-*
  • .table-responsive is now .table-scroll, and no longer used as a wrapper. Apply to .table now.
• Removed the funky data-cfw--toggle and data-cfw--target pairing from the JS widgets. Options now use target instead of toggle for all widgets. Also added new utilities to handle target selectors through the use of data-cfw-*-target and href.

CSS

• #208, 6d178a6, 43827f8: Flexbox the nav and navbar components
• #209, 39cecf7: Flexbox the grid layout
• d5e5aba: Flexbox the button group and button toolbar components
• #210: Flexbox the card, card deck, and card group components
• f733988: Flexbox the grid line component
• c7cf32e: Flexbox the inline forms layout
• b3581f5: Flexbox the input group component
• f738e33: Flexbox the pagination component
• d747dfa: Flexbox and simplify the media object component
• f00faba: Flexbox the list group
• Remove flexbox related setting options
• Popover: Add header and body text color variables
• #211: Rename .img-responsive to .img-fluid
• #212: Rename .embed-responsive-*utilities to .embed-fluid-*
• #213: Update print rules - remove overrides for color, and stop url output.
• #214: Rename .table-responsive to .table-scroll
• a99532a: Add transition to Progress bar
• d862d55: Adjust margins for .caret and .dropdown-toggle
• 92cf8a3: Update card-outline mixin for proper header/footer background and border colors
• 762056d: Reorder z-index stack so fixed items can go above sticky ones

JS

• 31186d0: Collapse - Don't block/prevent events on input and textarea controls. - Will alllow for checkbox/radio to toggle collapse targets.
• 8552775: Tooltip - Fix forced focus issue for non-event show/hide
• Dropdown - Fix forced focus issue when clearing dropdown menu
• 8778890: Fix Scrollspy use of data-cfw-scrollspy-target for 'non-link' active indicator
• #217: Update toggle and target options
• f9ba92e: Tooltip - move state reset to also catch forced hide
• 9e510ab, 3c8bf70: Alert - rework target handling, and move invocation to trigger
• a76aaad: Prevent default for Esc keypress in tooltip and modal
• 33a8526: Button - stop using aria-pressed for checkbox/radio inputs
• ac7b45a: Button - don't toggle .disabled or :disabled items
• c0e7fdc: Dropdown - remove backdrop and use empty mouseover listener for iOS workaround
• Added some additional unit tests

Docs

• #216: Remove IE9 related material
• Added more examples,

Build

• Update to Qunit 2.3.2
• Drop IE9 in Autopredixer config
• Stop testing on IE9 for Windows 7
• #218: Re-add iOS test for Sauce

v3.0.0-alpha.1

The living worklog is here: v3.0.0 - ship list

Major Updates:

• Added a new 'high' visibility focus ring. It bridges the gap between accessibility and usability rather well. The focus ring has been extended to hit a large portion of the components (and some default HTML elements), but there might be places where it does not trigger for non-Figuration classed elements.
• Simplified many control and component sates with consolidation and decoupling -- from the inactive, inactive hover+focus, active, active hover+focus, disabled, disabled hover+focus states to inactive, hover, focus, active, disabled -- significantly reduces the generated CSS by ~10%, which is huge.
• The Dropdown have been reworked to simplify the menu alignment CSS by moving the logic into the JS to reduce the convoluted (and sometimes incorrect) appearance rules. The divider now uses the .dropdown-divider class instead of the outdated .divider.
• Reworked color throughout to remove the use of lighten() and darken() Sass functions. Most colors are now generated using the Palette system. This will most likely be very confusing in general, but for the most part seems to allow for a bit more flexibility and control over recoloring, and keeping colors consistent.
• Overhauled a large portion of the JavaScript to normalize some of the variable names, and move towards utility functions to reduce code redundancy. Fixed a bunch of other stuff while this was going on. Refer to #183 to see the large amount of changes done in the first pass over the widget code.
• Added dispose methods for all widgets. This should allow for dynamic based site to reduce impact on client memory use if removing/adding large amounts of widget functionality.
• Stripping out the IE 8 support. Since the player widget is included, IE8 support is broken anyway. We don't officially support IE 8, helpers and doc mentions are being removed.
• Reworked the Flexbox utilities to add more functionality, this has resulted in renaming some of the rules, see this commit for changes: 6d1c806
• Dropped hide-*-up utils in favor of .d-*-none. Now use .d-md-none in place of .hide-md-up.
• Dropped .hide-*-down and replaced with .d-*-down-none. Now use .d-md-down-none in place of .hide-md-down.
  • Nullified the creation of the largest 'down' variant, .d-xl-down-none, since it is equivalent to .d-none.
  • Went with this option due to the possibility of confusion regarding components and layout when trying to hide at smaller breakpoints, and then restore again for the larger ones. This will allow components to keep proper layout without developers trying to figure out which display property should be used.
• Dropped the -up portion from the .sr-only-*-up utilities, so .sr-only-md-up is now just .sr-only-md. This keeps in line with the mobile-first idea, and the -up seemed redundant.
  • Also dropped the smallest 'up', and largest 'down' variants since they are equivalent to .sr-only. This means no more .sr-only-xs-up and .sr-only-xl-down.
• Dropped the use of <progress> for the progress bars. Moved to using <div>s for layout. Allows for greater flexibility and more supported features, such as, labels, stacked bars, recoloring, and flexbox layout.
• Made consistent use of *-header, *-body, and *-footer content sections for tooltip, popovers, cards, and modals , see #206. This makes the following changes:
  • .card-block => .card-body
  • .popover-title => .popover-header
  • .popover-content => .popover-body
  • .tooltip-inner => .tooltip-body

CSS

• #163: Layout-Grid: Add gutter padding to .col-*-auto
• #164: Widget-Tooltip/Popover- Convert max-widths to calculated rem
• #166: Reboot: Add 'system-ui' to font stack
• #169: Widget-Dropdown: Rework alignment, add additional variables
• #170: Move _custom.scss down in load order so base settings and mixins can be used
• #171: Control state overhaul (and a ton of other random stuff)
• #178: Component-List Group: Drop list-group-item-heading and list-group-item-text in favor of utilities
• #179: Add positioning utilities and remove navbar positions
• #180: Rework responsive embeds
• #181: Nav: move .active to .nav-link instead of .nav-item
• #182: Scrollspy/Dropdown - move .active to link items
• Pagination: move .active and .disabled to link items
• #186: Allow validation states on some custom form items
• #187: Remove cursor:pointer and cursor:default overrides
• #188: Extend divider mixin an reuse
• #193: Form validation icons - consolidate CSS class and add support for component sizing
• #194: Improve .btn-group and .btn-toolbar flexbox support
• #196: Allow flexbox .nav to wrap
• #197: Extend print display utils
• #198: Inline forms: add flexbox support
• Extend badge-variant mixin to have arguments text colors
• Extend utilties for flexbox, margin-auto, and display property with additional items.
• #199: Drop the focus ring concept and move to standard outline.
• #200: Pagination: add flexbox support
• #201: Rework spacer variables
• #202: Rework display and visibility utilities
• #204: Rework progress bar - use div layout instead of <progress>
• #206: Use consistent header body footer content sections

JS

• #168: Player: rename unplayedStatus to playedStatus for clarity
• #174: Add util.js to hold consolidated and re-usable utility functions
• #175: Consolidate data parsing utility
• #176: Consolidate throttle utility
• #177: Have transition support/emulator use CSS transition-duration values
• #181: Tabs: move .active to the calling element
• Add dispose methods for all widgets.
• #189: Tooltip/Popover: update viewport handling, drop IE 8 support
• #190: Modal: drop IE8 support
• #192: Modal: improve padding handling for body and fixed elements
• Create and use CFW_measureScrollbar utility function for modal
• Dropdown: handle loss of focus
• Tooltip/Popover: better trigger event handling
• Tooltip/Popover: drop the follow option

Accessibility

• #173 - JS:Button- overhaul to uses initialization routine for improved accessibility - improved doc page

Docs

• #162: Fix some bad links
• #165: Fix spelling of 'responsive'
• Add dispose methods for each widget and overview
• #191: Remove IE 8 mentions
• #195: Reboot: Add base font size accessibility note
• Reworked callouts to fix semantic header issue, and reuse the Accessibility page
• Replaced /layout/responsive-utilities.md with /layout/layout-utilities.md.
• Broke out the utilities pages a bit more and re-organized display and visibility items.

v2.0.0

The major goal of this release was to become more mobile-first.

There are many breaking changes that affect backwards compatibility so please read through the changes below.

This also means that moving forward the v1 series is no longer explicitly supported. Please update to v2 if you can.

Major Changes

• Responsive naming conventions are now more mobile-first oriented. This means there is mostly no xs designations in the grid or utility class names, except where there are *-up/down utilities.
  • There is also a global option, $enable-bp-smallest, in the Sass to override this.
• .pull-*-left/right are now .float-*-left/right.
• Spacing utilities have more sizing options and are now responsive.
  • naming has also changes so now they the form .p{side}-{breakpoint}-{size} for padding, and .m{side}-{breakpoint}-{size} for margins
  • for example .pl-sm-1 means padding-left: $spacer-x; for small and above breakpoints
• Vertical alignment utilities have been reworked.
• New .radius-* utility classes to control border radius. This kills .img-rounded and .img-circle classes as well.
• Renamed .tag/.tag-* to .badge/.badge-*
• Display utilities: .display-* is now .d-*
• Visibility utilities have been renamed with the following changes:
  • .hidden-* is now .hide-*
  • .hidden-print is now .print-hide
  • .visible-print-* is now .print-show-*
• Sizing/positioning utilities have been renames with the following changes:
  • .width-100 is now .w-100
  • .height-100 is now .h-100
  • .position-* is now .pos-*
• Responsive navbars have been slightly reworked for better handling of brand and dropdowns in the toggleable area.
• Refactored the component sizing a bit so the larger variants are in scale with the smaller ones. This means the large side is a bit smaller then before.

---

CSS

• #98 - Utilities-Display: rework responsive naming
• #100, #102 - Utilities-Flexbox: rework responsive naming
• #101 - Utilities-Float: rename .pull-*-left/right to .float-*-left/right and rework responsive naming
• #103 - Utilities-Typography: rework responsive naming
• #104 - Utilities-Spacing: rework responsive naming
• #105 - Utilities-Vertical Alignment: rework responsive naming
• #107 - Utility-Visibility: add .visible util
• #108, e470ce5 - Component-Grid lines: rework responsive naming
• #109 - Improve generation of gutter and grid media queries
  • Mostly targets gutter items to reduce output when not needed
  • Fix some bad CSS rule generation for grid columns
• #110 - Layout-Grid: rework responsive naming
• #111 - Utility-Border radius: new utility classes to replace .img-rounded and .img-circle
• #112 - Utility-Badges: rename .tag to .badge
• #113, #123 - Component-Pagination: slight tweaks to background, border, underline, line-height
• #114 - Content-Typography: removed <small> and .small sub-rules for headers
• #116 - Utilities: renaming for shorter rule names
• #117, #138, #141 - Content-Forms-labels: tweak .form-control-label-{size} properties, also make .form-check-inline consistent
• #118 - Component-Modal: rename some Sass settings to match their use
• #119 - Restore previously disabled print rules. Override color/background, and re-enable showing link URLs in print versions.
• #126 - Widget-Modal: tweak modal sizes for better responsive layout and a small CSS optimization
• #127 - Layout-Grid: Add ability to remove gutter from rows
• #128 - Utility-Borders: add border removal utility
• #130 - Component-Progress: Simplify CSS by enforcing border-radius using overflow: hidden;
• #131 - Utility-Sizing: Add max width and height
• #133 - Component-Navbar: rework responsive variants
• #135 - Component-Card: update inverse color override for text, along with header/footer background-color
• #136 - Widget-Alert: enlarge close button
• #137 - Widget-Tooltip/Popover: enlarge close buttons
• #142 - Component-Card: add variable to specify card cap (header/footer) text color
• #144 - Component-Badges: add options and minor optimize
• #145, #146 - Content-Button: optimize output a bit
• #147 - Print: update scope for ::first-letter
• #152 - Content-Forms-Custom control: Adjust margin for better responsive design
• #157, 158 - Content-Forms-Custom Select: Fix padding for background image
• #158 - Content-Forms-Custom File: correct height and padding to match standard input and button
• #159 - Widget-Popover: Remove unused > .arrow rule
• #160 - Component sizes: Refactor the larger sizes to be in scale

JS

• #131 - Scrollspy: Prevent scrollspy from clearing active item when Safari rubberbands
• #139 - Tooltip: hide when parent .modal is hidden, also affects popovers

Docs

• #119, #149 - Fix incorrect, broken, or redirected links
• #121 - Utilities: Additional documentation and examples
• #122 - Layout-Overview: Fix incorrect breakpoint mentions
• #125 - Component-Navbar: Add disabled item examples
• #143 - Add search for hosted version of Docs
• #148 - Simplify sidebar nav generation
• #150 - Component-Input Group: Update sizing example
• #154 - Add link to changelog on home page
• #155 - Component-Card: Remove floats from header nav examples
• #156 - Add reference for Yarn package manager

Build

• #117 - Add option to toggle component size CSS generation
• #134 - Add option to generate smallest breakpoint CSS rules (false by default)

v1.3.1

CSS

• #82: Utilities-Display: add items for table and table-cell with responsive variants
• #83, d99e9fd: Add new variables to allow for customizing font-weight
• #85: Flexbox-Grid: Allow for auto sizing columns based on content
• #86: Forms-Custom Controls: calculate top position for indicators
• #87: Forms: Remove incorrect forced height on textarea.form-control
• #88: Input Group: fix alignment and sizing of addons
• #89: Forms-Custom Controls: Give custom control a minimum height for layout
• #90: Mixins-Visibility: Add mising visibility mixin
• #92: Mixins-Breakpoint: Simplify mixins by reusing 'between' for 'only'
• #94: List Group: added flexbox support for opt-in and full modes

JS

• #81: Modal: split enforceFocus() and add enforceFocusLast() to allow for easier override

Accessibility

• #78: Add white-space: nowrap; to .sr-only to improve accessibility reading long hidden content
• #81: Docs: added notes for Tooltip, Popover, and Modal

Docs

• #79: Utilities: add example for .height-100
• #84: Layout: Add z-index reference

Build

• #91: Scss-lint: Add items to PropertySortOrder
• #93: Settings: Add assertion to make sure smallest breakpoint == 0