@new-ui/foundations

v3.1.0

Published

2 days ago

New UI foundations

0High
0Medium
0Low

planetabhi

stevepaul

foundations typography colors spacings ui modular type design-tokens mobile reset new

New UI Foundations

What is New UI?

New UI is a modern, semantic UI framework for building beautiful, accessible websites and applications. It provides the core design foundations you need, including colors, typography, spacing and sizing, reset, layout, and layering and elevations. New UI grows with you, from your first launch to millions of users. It suits makers and teams who value scalability and function.

Install

To set up the project, open your terminal and run the following command:

npm i -D @new-ui/foundations

Note: This command installs all New UI foundation packages, which include reset, colors, effects, layout, spacings, and typography. To install only specific packages, refer to the New UI documentation for instructions.

Import

Import the compiled CSS in a React app or bundler such as Vite, Next.js, or Create React App. No Sass toolchain is required:

// For example, in main.tsx, App.tsx, or Next.js app/layout.tsx
import '@new-ui/foundations/css'; // Explicit and type-safe. Recommended.
// import '@new-ui/foundations'; // Bare specifier also works.

For SCSS projects, load the bundle with @use:

@use '@new-ui/foundations/scss';

To load the bundle from a CDN, use the minified build in your HTML <head>:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@new-ui/foundations@latest/dist/index.min.css"
/>

Note: The core bundle includes reset, colors, effects, layout, spacings, and typography.

Set the theme

Set the theme by adding the data-new-ui-theme attribute to your HTML wrapper element, for example:

<html data-new-ui-theme="light"></html>

To keep native controls such as form fields, scrollbars, and system UI consistent with dark themes, also set the color-scheme meta tag:

<meta name="color-scheme" content="light dark" />

For more skins, install the @new-ui/themes package. It maps ready-made themes onto the same semantic color contract. The package provides the following custom themes:

To learn how to install and activate these themes, refer to the New UI Themes documentation.

Utility classes and naming convention

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.
- l- for layout-related styles.
- u- for utilities.
- is- and has- for state-based classes.
- js- for targeting JavaScript-specific functionality.

Design tokens

Colors

Effects

Layout

| Breakpoint | Size (px/rem) | | :--------------------- | :------------ | | --breakpoint-sm | 640 / 40 | | --breakpoint-md | 768 / 48 | | --breakpoint-lg | 1024 / 64 | | --breakpoint-xl | 1280 / 80 | | --breakpoint-2xl | 1536 / 96 |

Spacings

Sizing

Typography

Note: To set the line height, add the --lh prefix to the font size variables. For example, --desktop-body-xl becomes --lh-desktop-body-xl.