0.4.0 Changelog

This build introduces breaking change. Please read below.

Breaking Changes

3 Changes


6 Bug Fixes


Aug 30, 2016

Sketch template

Light Theme


  • Add SASS mixin to target problematic browsers

    The fixForFirefox, fixForMsEdge, fixForIE10AndUp, and fixForIE11AndUp SASS mixins were added to clarity/utils/helpers.clarity.scss. These mixins allow us to target CSS fixes to specific browsers.

Breaking Changes

  • Update Clarity to use BS4 alpha 3

    Clarity has been upgraded to use BS4 Alpha 3. This allows users of Clarity to take advantage of the new BS for functionality with the flex box grid. With Alpha 3, BS4 rewrote some of the classnames related to their grid. Users of Clarity who were using Push, pull, offset classes May need to replace the old class names with the new format. More information is available in the BS4 documentation.

  • Cleanup baselineRem() and rpx() SASS function calls

    The rpx() SASS function has been removed from Clarity. Make sure to replace it with a measurement in pixels. For example, padding-top: rpx(2) would become padding-top: 2px.

  • Typography updates - Implementation: HTML/CSS

    Clarity's typography has been completely redone. It is imperative that all applications upgrading to 0.4.0 verify any customizations they had previously made to Clarity's font specs. Our own internal upgrades involved minimal changes to existing CSS overrides. Nevertheless, Clarity strongly advises all users to visually check their applications after upgrading.

    More information on SASS/SCSS convenience functions that have been added to Clarity to assist with the use of typography can be found in the typography documentation.

Bug Fixes

  • Vertical alignment issue with the labels in Firefox
  • Row arrow alignment issue with stack views in Firefox and IE
  • Toggle switch alignment issue in Firefox and MSEdge
  • Vertical alignment issue with buttons in IE (not Edge)
  • Fixed a padding issue with text fields in IE10
  • Hex code display in color contrast demo is not visible in IE10

Other Changes

  • Add TSLint to Clarity
  • Optimize base64 Clarity fonts
  • Address additional cases for tabs including multi-level, scrolling, and usage in different areas like wizards and modals
  • Dropdowns Refactor - Add classes on the host element instead of nesting them
  • Upgrade website to 0.4.0