For Engineers

Love is the only reality of life. Everything else is illusion.

Install

To set up the project, open your terminal and install:

npm i -D @new-ui/foundations

Foundations includes the entire New UI framework, excluding the “grid”. For more granular control, you can also install packages individually.

Package Install
Reset npm i -D @new-ui/reset
Colors npm i -D @new-ui/colors
Typography npm i -D @new-ui/typography
Spacings npm i -D @new-ui/spacings
Effects npm i -D @new-ui/effects
Grid npm i -D @new-ui/grid

Usage

Place this at the top of your SCSS/CSS file:

@import "@new-ui/foundations";

Or, if you’ve installed them individually, use the following:

@import "@new-ui/reset";
@import "@new-ui/colors";
@import "@new-ui/typography";
@import "@new-ui/spacings";
...

Usage guide

  • Tokens defined in the figma file matches variables declared in CSS.
  • All classes associated with the New UI are prefixed with a global namespace followed by a hyphen: nu-
  • In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax.
    • c- for UI components, such as .nu-c-h1 or .nu-c-card
    • l- for layout-related styles, such as .nu-l-grid__item or .nu-l--two-column
    • u- for utilities, such as .nu-u-mb-<spacing-token> or .nu-u-margin-bottom-pt2
    • is- and has- for specific states, such as .nu-is-active or .nu-is-disabled. These state-based classes - would apply to.
    • js- for targeting JavaScript-specific functionality, such as .js-modal-trigger. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these js- classes would toggle - state-based classes to an element.