Skip to main content

NuvoUI Overview

NuvoUI is a lightweight, utility-first CSS framework built with modern Sass that helps you build responsive interfaces quickly without sacrificing flexibility or control.

Introduction​

NuvoUI is more than just a CSS utility framework—it's a toolkit that gives you rapid control over your layouts using flexible Sass mixins and responsive utility classes. It is designed to make complex layouts accessible without sacrificing creativity. It's modular, scalable, and completely customizable.

Quick Example​

Here's a simple example showing how NuvoUI utilities can be combined to create a responsive card:

_Psssttt... try changing following_in the editor below to see live action
  1. shadow to shadow-lg or shadow-hero-darkest
  2. Add rounded or rounded-2xl
  3. Change bg-primary or bg-success
  4. Add text-primary or text-success
  5. Add hover:bg-primary-100 or hover:bg-success-300
  6. Add hover:shadow-hero-dark
  7. Add hover-ready
info

While you are playing, lets learn new thing about how color on elements are applied. If you set a border width and border style to any element and do not specify border-color it will defaults to elements's color. If you change the text color or color property it will also effect the borders.

This is by design for many browsers.

Installation​

Getting started with NuvoUI is easy. You can integrate it into your project in one of several ways:

1. Package​

Add NuvoUI into your application using the package manager of your choice. Make sure your app already has capabilities to compile Sass Files.

2. CDN​

Our CDN is available at https://www.jsdelivr.com/package/npm/@nuvoui/core You can include NuvoUI in your HTML file by adding the following link tag to your <head> section:

Quick Start​

Begin by adding a basic layout in your HTML file. For example, to create a responsive flex container:

This simple snippet uses NuvoUI's responsive classes to create a flex container that switches direction and item widths based on screen size.

Design Philosophy​

NuvoUI embraces three core principles:

  • Simplicity: Clear, consistent naming conventions make utilities easy to learn and remember
  • Flexibility: Compose complex designs from small, single-purpose utilities
  • Integration: Works with any Sass-compatible project without additional tooling or configuration
Developer Experience First

NuvoUI is designed to make your workflow faster and more intuitive, whether you're prototyping or building production applications.

Key Features​

Optional Utility Classes

Build complex interfaces by composing utility classes directly in your HTML without writing custom CSS.

Responsive By Default

Control the layout at different screen sizes with responsive modifiers like @md and @lg.

Customizable

Extend and tailor the framework to your needs by adjusting Sass variables or adding your own utilities.

Easy Integration

Works seamlessly with any project that supports Sass - no extra tools or build steps required.

The NuvoUI Advantage​

NuvoUI isn't just about layout—it empowers you to:

  • Create grids and flex containers with intuitive mixins.
  • Customize spacing, alignment, and responsiveness with minimal code.
  • Extend your design system easily by tapping into Sass variables and functions.
  • Optimize your workflow with a utility-first approach that evolves with your project.

With NuvoUI as your design system, you have the flexibility to mix and match components seamlessly while keeping your CSS lean and maintainable.

Customization & Advanced Features​

Tailor NuvoUI to your project's needs. Customize Sass variables, add new utility mixins, or create custom grid templates using our helper functions.

For example, to create a custom grid with a specific template:

You can also modify responsive breakpoints, spacing scales, and more by changing your configuration.

What's Next?​

Your journey with NuvoUI is just beginning.