# NuvoUI
_Human-readable SCSS for modern devs. Discover NuvoUI_
[](https://github.com/NuvoUI/core)
[](https://github.com/NuvoUI/core)
[](https://www.npmjs.com/package/@nuvoui/core)
[](https://discord.gg/dhxxKTK5Zx)
[](https://x.com/NuvoUI)
## The Human-First SCSS Framework
NuvoUI is designed for developers who want a better way to build responsive, beautiful websites without unnecessary complexity. Write CSS as naturally as you would speak it.
## ✨ 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
### SCSS Import (Recommended)
```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
);
```
### Direct CSS Import (coming soon to CDN)
```html
```
## Core Features
### 🎨 Beautiful Color System
NuvoUI includes a comprehensive color system with semantic color variables and automatic dark mode support.
```html
Primary color with contrast text
Success colors with different shades
```
### 📐 Flexible Layout System
Build complex layouts with ease using our grid and flexbox utilities.
```html
Responsive column
Another column
Left content
Right content
```
###
```scss
.floating-element {
@include NuvoUI.animate-float((
distance: 10px,
duration: 3s,
direction: vertical
));
}
```
### 🌓 Simple Dark Mode
### Example 2: Elegant SCSS Mixins
```html
```
Toggle with a simple script:
```html
```
## Step 3: Implementing Responsive Design
```scss
.hero-image {
@include NuvoUI.mx-auto;
@include NuvoUI.my(40);
@include NuvoUI.rounded(8);
@include NuvoUI.shadow-lg;
// Add custom animation
@include NuvoUI.animate-bounce((
horizontal: 3%,
duration: 25s,
));
// Responsive behavior
@include NuvoUI.media-up(lg) {
@include NuvoUI.max-width(80%);
}
}
// Generated CSS:
.hero-image {
margin-left: auto;
margin-right: auto;
margin-top: 40px !important;
margin-bottom: 40px !important;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
animation: anim-bounce-0p-3per 25s ease-in-out infinite;
}
@media (min-width: 1024px) {
.hero-image {
max-width: 80%;
}
}
@keyframes anim-bounce-0p-3per {
0% {
transform: translateX(-0%) translateY(-3%);
}
50% {
transform: translateX(0%) translateY(3%);
}
100% {
transform: translateX(-0%) translateY(-3%);
}
}
```
## Documentation
For complete documentation, examples, and guides:
[Visit the NuvoUI Documentation Site →](https://nuvoui.io/).
### Community & Support
- [Discord Community](https://discord.gg/nWGsbQKE) - Chat with the team & other users
- [X @NuvoUI](https://x.com/NuvoUi) - Latest updates and announcements
- [GitHub Issues](https://github.com/NuvoUI/core/issues) - Bug reports & feature requests
## License
NuvoUI is open-source and licensed under the [MIT License](https://github.com/NuvoUI/core/blob/main/LICENSE).
Feel free to use NuvoUI in your projects—commercial or personal. Just don't forget to give us a shoutout when possible!
