Skip to content

Major Release v5.0.0
Compare
Choose a tag to compare
@chharvey chharvey released this 20 Jul 19:29
· 700 commits to master since this release
v5.0.0
fea75be

Major Changes

These are breaking changes; your code will break if you do not update it and want to use these features.

  • renames documentation folder and files. see folder /docs/
  • drops clearfix support for IE 7 and lower
  • renames all "tool" less partials:
    • files named __tool.fallback.***.less are now named __fallback.***.less
    • files named __tool.module.***.less are now named __tool.***.less

REMOVALS

  • removes OBSOLETE __tool.module.spacing.less (see README for specs)
  • removes OBSOLETE __tool.module.translucent.less
  • removes OBSOLETE __tool.fallback.gradient.less
  • removes OBSOLETE __tool.fallback.linear-gradient.less
  • removes OBSOLETE __tool.fallback.rotate.less (see __fallback.transform.less)
  • deletes OBSOLETE .font-size-block() mixin (use either .font-size-mod() or .font-size-el() instead)
  • deletes OBSOLETE .delimiters() mixin (use .delims() instead)
  • RENAMES .transition(). it is now being used for the old .transition-multi() mixin (now DEPRECATED), and the mixin previously called .transition() has been renamed to .transitions(). see subsection below for more.

Note on renaming transition mixins

When updating your code:

  • .transition() → .transitions() — required or your code will break
  • .transition-multi() → .transition() — optional but recommended
Syntax
.transitions(<single-transition-property>#; <time>#; <single-transition-timing-function>#; <time>#);

.transitions(all; 0ms; ease; 0ms); // default

.transition(<single-transition>#;); // note the terminating semicolon inside parameter

.transition(all 0ms ease 0ms); // default

where:

  • the character # == comma-separated list
  • <single-transition> == [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
  • .transition-multi() may be used instead of .transition() (though this is not recommended)

Minor Changes

These are non-breaking changes; your code does not need to be updated if you want to use these features.

  • adds new .border-[left|right|top|bottom]-radius() mixins, which set the border-radius of two corners, on the respective side, of a box. One- or two-value syntax is supported (two values specify horizontal / vertical).
  • DEPRECATES .transition-multi() mixin (use .transition() instead). will be dropped in v6.
  • DEPRECATES .clearfix() mixin. Instead of mixing-in .clearfix(); in Less, use class="h-Clearfix" in HTML.
  • For the first time ever! All-New Objects, Helpers, and Atoms for maintaining and fixing vertical rhythm and layout on your site. Includes styleguide documentation as well. Add these classes to your markup as necessary.
    • .o-List — simple blocky list of items. removes base styles of ul and ol
    • .o-Flex — one-dimensional container of flexible items. uses CSS Flexbox
    • .o-Grid — two-dimensional container of flexible items. uses CSS Flexbox but may transition to CSS Grid in the future
    • .o-Block — simple block object with inherited line-height. effectively same as div
    • .o-Inline — simple inline object with 0 line-height. effectively same as span
    • .h-Clearfix — equivalent to the now-DEPRECATED .clearfix() mixin. clears float and creates line break
    • .-mb-1vru — sets the bottom margin to 1vru, pushing subsequent elements down the page
    • .-pt-1vru — sets the top padding to 1vru, pushing the element itself down the page

Fixes

  • fixes a typo in a selector
Assets 2
Loading