Getting started
The implementation of the Norton Design System for the web is composed of two main packages:
- A modular CSS library to help you style your application and content.
- A React component library to help you compose accessible, robust applications and content.
These two libraries do not depend on each other but work best when used together.
Each is published to the public NPM registry under the @wwnds scope.
Core package
The core package is a Sass implementation of the foundations and styling for all components. It includes the following features:
- An implementation of the design tokens for all foundational elements (color, typography, etc.) set as CSS custom properties.
- Modular styling for all components via Sass mixins.
- A global reset stylesheet, forked from the Bootstrap reboot to use the Norton Design System foundations.
- A Sass API for theming and customizing every aspect of the library, built on Sass modules.
- NPM
- Yarn
npm install @wwnds/core
yarn add @wwnds/core
React package
The React package is a React implementation of the components with no styling applied. It includes the following features:
- A React Typescript implementation of the Norton Design System components.
- A rich developer experience powered by the comprehensive typings and descriptions for all top-level components and their props.
- Useful React hooks to help you build stateless, functional applications.
- NPM
- Yarn
npm install @wwnds/react
yarn add @wwnds/react
Independent package usage
Neither the core package nor the react package depend on one another and can therefore be used fully independently of each other.
For instance, you could use @wwnds/core to style a Vue.js application, or you could apply your own styling to @wwnds/react without using anything from @wwnds/core.
However, this guide fill focus on combined usage, as the packages work best when used together.