2.1.7

New utilities:

• border-color hover utility
• cursor not allowed utility
• white-space no-wrap utility
• text-flow ellipsis utility
• pointer-events utility
• font-style normal utility
• word-break utility
• separated hover, focus and active states
• transition utility extended

Updated the documentation for:

• transitions
• bg-hover

General:

• added Node-sass as builder

2.1.5

Patch

• Fix: width: auto instead of height: auto b69fb9a

Credits

Thanks to @avanderhoek for spotting and fixing this bug.

2.1.4

Patch

• Fixed incorrectly named error docs #40

Credits

Thanks to @stephanmullerNL for spotting and fixing this bug.

2.1.3

Minor

• Fix column class generation without breakpoints #39

2.1.2

Patch

• Add 0 z-index #37

Credits

Thanks to @Hangloozz for the feature request.

2.1.1

Patch

• Fix typo in readme.md #35
• Add readme reference to joppe/color-name
• Add .npmignore file

Credits

Thanks to @joppe for their contributions and color-name add-on 🎉

2.1.0

New features

• Add utility class for position: sticky (#24)
• Add utility classes for object-fit (#29)
• Add margin auto for y-axis (#27)
• Add utility classes for flex-wrap (#25)
• Add utility classes for text-decoration-skip (#30)
• Add utility classes for background-repeat and background-position (495b3d4)
• Add package-lock.json (27db79b)
• Add hyperlinks to error messages (946f824 and a5bf3e7)

Bug fixes

• Make font-variant responsive (#26)

Credits

Thanks to https://zeit.co/blog/err-sh for providing the inspiration for adding error hyperlinks.

2.0.2

Patch

• Height classes were using width property (88d4bb3)

Credits

Again: thanks to @avanderhoek for their contributions.

2.0.1

Patch

• Responsive height classes were using the width property (80c9fcc)

Credits

Many thanks to @avanderhoek for their contributions.

2.0.0

An extensive cleanup and a lot of new utility classes 🎉

Development checks

~/dev/_strict.scss contains sanity checks that give compiler warnings and errors if your variable scales are not correct, or if you use values that don’t make sense from a design perspective.

Refactoring variables

Variables were spread across several files. _responsive.scss contained responsive variables, _grid.scss contained grid variables et cetera. Not anymore: all configurable ZSS variables can be found in one file: _zss-defaults.scss.

Furthermore: variables are named more consistently. Now, each variable starts with a $zss-- prefix and they better reflect what's in them.

And lastly: most configurable properties are now based on a scale. For example, there is a variable $zss--line-height-scale. This should keep the number of values used for a property in check.

Removed grid type support

The grid now only uses flexbox. Support for flex-with-fallback and float grid types has been removed since they were never used.

Grid offset

You can push columns to the right by using the grid offset classes. For example: o-grid--offset--4@md o-grid--offset--0@lg.

Added the o-media object

A flex implementation of the famous media object for the very common UI pattern of positioning an image next to a bunch of text.

Changed color structure

Previously, colors were defined twice: both separate variables and a Sass map for generating utility classes. This was unnecessary and prone to errors.
Now there are no more color variables: every color is defined directly in the map.

$zss--colors: (
    black: #000,
    white: #fff,
    transparent: transparent
)

You're strongly encouraged to use the generated utility classes if you need to add a color to your component, but if you really do need to access a color you can use the new mixin get-color:

.x {
    color: get-color(black);
}

New utility classes and a bit of refactoring

Each CSS property now has it's own file, so it's easier to find in which file a property is located. Also: every utility class is now responsive, if applicable. (For example, the cursor is not responsive.)

These properties where added as a utility class:

• background-size
• border-color
• border-radius
• border-style
• border-width
• cursor
• font-size
• font-weight
• height
• line-height
• max-width
• min-height
• vertical-align
• width
• z-index

These properties were expanded or changed:

• Added a hover class for each color.
• Added much more flex properties.
• Added an opacity scale.
• Margin and padding have been moved from _whitespace.scss to two separate files.
• The overflow classes have been renamed from u-overflow to u-of.
• The float classes have been renamed. For example, u-left is renamed to u-f--left.
• u-no-underline is renamed to u-no-decoration.
• Added the baseline value to the vertical-align property.
• Removed bower.json

Several minor tweaks

• o-ui-list is renamed to o-list-reset.
• Added a strip-units mixin for removing the unit part of a Sass string.
• Added a hover mixin for easily applying hover/active/focus states.
• Removed the font-rem mixin. Use a utility class from the line height scale instead.
• Removed the z-index mixin in favour of the z-index utility classes.
• Updated the included normalize.css from v3.0.3 to v5.0.0.
• Changed the base font size from 18px to 1rem.
• Changed the base line height from 26px to 1.5.