A utility-first CSS framework built with modern SCSS, providing atomic classes and mixins for rapid UI development.
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.
- 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
@breakpointsyntax - State Modifiers: Interactive states with
hover:,focus:,active:prefixes
- 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
- 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
- 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
- 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
- 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
- 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
- 💬 Human-Readable - Intuitive, readable class names and mixins
- 📱 Responsive First - Use
@lgor@smdirectly in class names - being natural likefont-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
# Using npm
npm install @nuvoui/core
# Using pnpm
pnpm add @nuvoui/core
# Using yarn
yarn add @nuvoui/core// 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
);<link rel="stylesheet" href="node_modules/@nuvoui/core/dist/nuvoui.min.css">All utilities are generated from SCSS configuration maps:
$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);- 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)
Works with any frontend framework or vanilla HTML/CSS. No JavaScript dependencies.
NuvoUI includes a comprehensive color system with semantic color variables and automatic dark mode support.
<div class="bg-primary text-white">Primary color with contrast text</div>
<div class="bg-success-200 text-success-900">Success colors with different shades</div>Build complex layouts with ease using our grid and flexbox utilities.
<!-- Responsive grid with auto placement -->
<div class="grid cols-12 gap-4">
<div class="col-span-12 col-span-6@md col-span-4@lg">Responsive column</div>
<div class="col-span-12 col-span-6@md col-span-8@lg">Another column</div>
</div>
<!-- Flexbox with alignment -->
<div class="flex between y-center wrap">
<div>Left content</div>
<div>Right content</div>
</div><html data-theme="dark">
<!-- Your content will use dark theme colors -->
</html>Toggle with a simple script:
<button onclick="document.documentElement.setAttribute('data-theme',
document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')">
Toggle Theme
</button>.hero-image {
@include apply(mx(auto), my(40), rounded(8), shadow(lg));
// Responsive behavior
@include media-up(lg) {
@include apply(max-w(80%));
}
}Modern browsers supporting CSS Grid, Custom Properties, and modern CSS features. IE11+ with appropriate polyfills for legacy support.
For complete documentation, examples, and guides:
Visit the NuvoUI Documentation Site →.
- Discord Community - Chat with the team & other users
- X @NuvoUI - Latest updates and announcements
- GitHub Issues - Bug reports & feature requests
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!
