turretcss 4.0.0 Released

turretcss v4.0.0 is here! Farewell Less and hello πŸ‘‹ modern CSS custom properties with PostCSS and PostCSS-cssnext post-processing for browser support.

Breaking Changes

  • Moved from Less to PostCSS-cssnext
  • Removed support for IE9, default support extends to IE10 and the latest two versions of all modern browsers
  • Removed support for Bower
  • Removed columns from the grid
  • Removed .pullout typography element
  • Removed mixin logic for element styles, using standard CSS cascade and lowering specifity
  • Removed light-grey and β€˜dark-grey` color definitions
  • Renamed .text- color utility classes to .color-
  • Mixins for browser vender prefixing have been removed in preference of Autoprefixer
  • Default values for element variables are removed where possible to inherit global scope styles by default


  • Added --font-family-system as the default font-family
  • Added color scales for shades, palette, and indicator colors
  • Added .field wrapper for label and input combinations
  • Added responsive scaling large format text with .big class
  • Added .display-title class for stylised heading style
  • Added .small-caps class for formatting a small title
  • Updated font-weight variables to be inline with weight scale (200-800)
  • Added utility classes for line-height
  • Added utility classes for font-weight
  • Added utility classes for padding-vertical and padding-horizontal
  • Added utility classes for margin-vertical and margin-horizontal
  • Extended .background- utility classes for color scales
  • Extended .color- utility classes for color scales
  • Added .border-color- utility classes for color scales
  • Added .fill- utility classes for color scales on SVG elements
  • Added .stroke- utility classes for color scales on SVG elements
  • Added .border- utility classes
  • Added .spinner class for loading indicator to ::before pseudo element, for use with .media and .button
  • Added --font-smoothing mixins for text rendering
  • Added default :focus state styles options
  • Added more documentation for running documentation locally with Jekyll
  • Added documentation to describe default reset behaviours including: text rendering, font smoothing, body and html min-heights, and typography margin resets for first and last children
  • Split out global variables to _globals.css these are CSS custom property values that are set globally on elements and are not necessarily tied to a property selector
  • Added CHANGELOG.md, CONTRIBUTING.md, and ISSUE_TEMPLATE.md to repo


  • Include the canvas element in .media for ratio scaling
  • Refactored SVG inheriting styles in .button elements
  • Fixed typo in flex display utility classes
  • Fixed wrong default property value being set for --headings-text-transform
  • .button now have vertical padding calculated from font-size, padding, and border-width. Horizontal padding is defaulted to 1.5em.
  • Docs now running through GitHub pages natively without build step
  • Using PostCSS-cli for CSS compilation