Introduction

NuvoUI core is a human-readable, utility-first SCSS framework and the foundation layer of the NuvoUI design system. It ships SCSS only: no JavaScript, no runtime and no build plugin beyond Dart Sass.

Principles

• Human-readable names. between, x-center, bg-surface, p-4@md.
• apply() for everything. Every utility is also a mixin. @include apply(p(4), mx(auto), ms(2) md) takes breakpoints, states and custom values such as p(1.5rem).
• Design tokens. Colours, spacing, radii, type, shadows, z-index and motion are emitted as --nu-* custom properties. Classes and mixins output those tokens, so everything follows the active theme.
• Light and dark themes. Set data-theme="light" or data-theme="dark", or leave it out to follow the operating system.
• Right-to-left ready. Logical utilities (ps, me, text-start) mirror with dir="rtl".
• Fails at compile time. Unknown keys and values raise errors that name the valid options.

Install

npm install -D sass @nuvoui/core

Core requires Dart Sass 1.79 or later (below 2.0).

Load and configure

Configure core once, in the first @use:

@use "@nuvoui/core" as * with (
  $brand: #4361ee,
  $generate-utility-classes: true
);

Leave $generate-utility-classes at its default false to use only apply() mixins and tokens; tokens are emitted either way.

Next

apply()Every utility as a mixin, with states, breakpoints and custom values.

TokensThe --nu-* custom properties behind every class and mixin.

SpacingPadding, margin, gap and child spacing on the --nu-space-* scale.

Mixin and function referenceEvery public mixin and function, generated from the doc blocks in the source.