zui-base-styles

Installation

npm:

> npm i --save @zywave/zui-base-styles

yarn:

> yarn add @zywave/zui-base-styles

See the documentation site for more information.

Running locally

Be sure all dependencies for the monorepo have been installed (instructions at the root CONTRIBUTING.md)

Watch

> npx gulp watch

Run

> npx gulp run

Documentation

Within base.scss and normalize.scss you'll notice duplication of selectors specifying base styles, these selectors are chained with a class of .zui.

h1,
h1.zui {
  font-size: rem(26);
}

.zui is currently experimental and is available as a prototype package via zui-app-styles in the exp branch. This will soon be available in the dev branch after testing. .zui was created to allow for simpler class names within our style library, and to avoid clashing styles; i.e. if a user pulls in a 3rd party stylesheet which defines .row, but ZUI also defines .row these classes could mix but .zui instead removes all styles on itself first, and then adds the ZUI defined styles.

Why is .zui in zui-base-styles? zui-base-styles and zui-app-styles are not dependencies of each other, they could be used independently. Since .zui removes all styles from an element it resides on, we wanted to preserve the styles zui-base-styles provides, hence the need to add the second set of selectors chained with .zui.