Skip to content

Latest commit

 

History

History
35 lines (28 loc) · 1.53 KB

README.md

File metadata and controls

35 lines (28 loc) · 1.53 KB
Raw

New UI Foundations

Install

Install New UI Foundations from your terminal via npm.

npm i @new-ui/foundations

To get started quickly, you can use the CDN files.

<!-- Place this at the html head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/foundations@<version>/dist/index.css">

Usage

// Place this at the top of your SCSS/CSS file
@import "@new-ui/foundations";

Usage Guide

  • Tokens defined in the figma file matches variables declared in CSS
  • All classes associated with the design system 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.

Guides