NuvoUI

A utility-first CSS framework built with modern SCSS, providing atomic classes and mixins for rapid UI development.


What is NuvoUI?

NuvoUI is a comprehensive CSS framework that combines the flexibility of utility classes with the power of SCSS mixins. It offers a complete design system with responsive breakpoints, semantic theming, and advanced layout capabilities designed for developers who want to build responsive, beautiful websites without unnecessary complexity.

Key Features

$3

- Atomic Classes: Single-purpose classes like bg-primary, p-4, flex
- SCSS Mixins: Use utilities in SCSS via @include apply(bg(primary), p(4), flex)
- Responsive Modifiers: Breakpoint-specific classes with @breakpoint syntax
- State Modifiers: Interactive states with hover:, focus:, active: prefixes

$3

- CSS Custom Properties: Dynamic theming with CSS variables
- Semantic Tokens: Brand colors (primary, secondary) and contextual colors (success, danger, warning, info)
- Automatic Color Scales: Generate complete color palettes from base colors
- Contrast Calculation: Automatic text color based on background contrast ratios
- Dark Mode Support: Built-in theme switching capabilities

$3

- CSS Grid Utilities: Complete grid system with areas, spans, and responsive variants
- Flexbox System: Full flexbox implementation with alignment and distribution controls
- Container Queries: Modern responsive design with element-based breakpoints
- Modern Layout Tools: CSS Subgrid, aspect ratios, and intrinsic sizing

$3

- Fluid Typography: Responsive font sizes with configurable scales
- Advanced Text Handling: Truncation (single and multi-line), overflow control, text transforms
- Letter Spacing: Granular tracking controls
- Line Height: Semantic leading classes for optimal readability

$3

- Elevation System: Consistent shadow scales with z-index management
- Border System: Comprehensive border utilities with radius, styles, and colors
- Transform System: CSS transforms using CSS variables for better performance
- Transition System: Smooth animations with configurable timing and easing

$3

- Tooltip System: Lightweight tooltips with positioning and sizing options
- State Management: Comprehensive hover, focus, and active state handling
- Backdrop Utilities: Modern backdrop filters and effects

$3

- Build System: Automated utility generation from configuration
- Configuration: Extensive customization through SCSS variables
- Documentation: Interactive examples with live previews
- Atomic Structure: BEM-compatible component architecture

✨ Why Choose NuvoUI?

- 💬 Human-Readable - Intuitive, readable class names and mixins
- 📱 Responsive First - Use @lg or @sm directly in class names - being natural like font-bold@lg
- 🧩 Component-Focused - Container queries for truly modular design
- 🌙 Dark Mode Built In - Theme switching with zero effort
- 🚀 Performance Focused - Smaller CSS footprint than most frameworks
- ⚙️ Fully Customizable - Configure everything via SCSS variables
- 📦 Zero Runtime - Pure CSS, no JavaScript dependencies

Quick Installation

``bash


Using npm

npm install @nuvoui/core

Using pnpm

pnpm add @nuvoui/core

Using yarn

yarn add @nuvoui/core
`

Usage

$3

`scss
// Basic import with defaults
@use '@nuvoui/core' as NuvoUI;

// Or customize with your preferences
@use '@nuvoui/core' as NuvoUI with (
$primary: #ff6f00,
$secondary: #03DAC6,
$column-count: 12,
$enable-dark-mode: true,
// Add more customizations as needed
);
`


$3

`html

`

Architecture

$3


All utilities are generated from SCSS configuration maps:
`scss
$spacing: (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 6rem, 8rem);
$colors: (primary: #3b82f6, secondary: #6b7280, success: #10b981);
$breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px);
`

$3

- CSS Custom Properties for dynamic theming
- CSS Grid and Flexbox for layout
- Container Queries for responsive design
- CSS Transforms and Filters
- Modern color functions (oklch, color-mix)

$3

Works with any frontend framework or vanilla HTML/CSS. No JavaScript dependencies.

Core Features Examples

$3

NuvoUI includes a comprehensive color system with semantic color variables and automatic dark mode support.

`html


Success colors with different shades

`

$3

Build complex layouts with ease using our grid and flexbox utilities.

`html







`

$3

`html



`

Toggle with a simple script:

`html

Toggle Theme

`

$3

`scss
.hero-image {
@include apply(mx(auto), my(40), rounded(8), shadow(lg));

// Responsive behavior
@include media-up(lg) {
@include apply(max-w(80%));
}
}
``

Browser Support

Modern browsers supporting CSS Grid, Custom Properties, and modern CSS features. IE11+ with appropriate polyfills for legacy support.

Documentation

For complete documentation, examples, and guides:

Visit the NuvoUI Documentation Site →.

$3

- Discord Community - Chat with the team & other users
- X @NuvoUI - Latest updates and announcements
- GitHub Issues - Bug reports & feature requests

License

NuvoUI is open-source and licensed under the MIT License.

Feel free to use NuvoUI in your projects—commercial or personal. Just don't forget to give us a shoutout when possible!

!Working with CSS