Skip to content

v4.0.0

Compare
Choose a tag to compare
@planktonic planktonic released this 19 Jan 10:01
· 123 commits to main since this release
f17b3e9

Added

  • u-bg classes can now be made available at different breakpoints by overriding the $bitstyles-bg-breakpoints variable
  • u-fg classes can now be made available at different breakpoints by overriding the $bitstyles-fg-breakpoints variable
  • Default settings for u-fg classes now include white as an option
  • u-font classes can now be customized by overriding the $bitstyles-font-weight-values and $bitstyles-font-style-values variables. They can be made available at different breakpoints by overriding the $bitstyles-font-weight-breakpoints and $bitstyles-font-style-breakpoints variables
  • u-text classes can now be customized by overriding the $bitstyles-text-values variable. They can be made available at different breakpoints by overriding the $bitstyles-text-breakpoints variable
  • u-overflow classes are now also available for scroll, hidden, and auto by default, and can be set by overriding $bitstyles-overflow-values
  • You can now override the font styles for input-texts, selects, and buttons.
  • New u-font classes to specify font-family. Defaults to u-font-header and u-font-body, which apply the respective font stack as specified in settings/typography. This can be overridden using $bitstyles-font-family-values, and can be made responsive by specifying breakpoints in $bitstyles-font-family-breakpoints
  • Color & background-color of the html element can now be specified using $bitstyles-html-color and $bitstyles-html-background-color, and default to the text and background colors specified in your global color-palette
  • Default key-name to return when asking for a color without specifying it (e.g. palette.get('white')) can now be set using $bitstyles-color-palette-default-key
  • There’s now a helper function font-size.get($font-size, $breakpoint) which returns font-sizes from the global map

Fixed

  • The height of inputs, selects, and .a-buttons now matches regardless of the border-width
  • Modals now only show scrollbars (on OSes/configs where scrollbars are shown) when they’re needed
  • Typographic scale of base elements is no longer prefixed when a prefix is specified

Changed

  • The font-sizes specified in settings/typography $font-sizes map should now use rem units instead of px. The Sass will still compile if you specify using px as before, but the resulting CSS will not follow current best practices (to use rem units for specifying font-size)

Breaking

  • All utility classes which had a double dash in their classname (--) now only have a single dash. You’ll need to rename all these classes to use single dashes e.g. .u-bg--brand-1 becomes .u-bg-brand-1
  • Values for the display classes (u-block, u-flex etc.) will now need to be set unquoted. If you previously were overriding the $bitstyles-display-values variable, make sure all the values on the right hand side are unquoted CSS values e.g. 'block': block instead of 'block': 'block', as was previously possible
  • If you were using the $bitstyles-input-padding variable, you’ll now need to set $bitstyles-input-padding-vertical and $bitstyles-input-padding-horizontal separately
  • The u-overflow-x and u-overflow-y classes were renamed to u-overflow-x-auto and u-overflow-y-auto, respectively
  • The media-query/breakpoint mixin is no longer called using media-query.media-query(). You’ll need to update all uses of this to media-query.get()
  • Removes the unit-conversions functions

PRs

Full Changelog: v3.1.0...v4.0.0