@nuvoui/core
v1.1.5
Published
NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.
Downloads
200
Maintainers
Readme
NuvoUI
Welcome to NuvoUI 🎉
NuvoUI is a modern, human-friendly SCSS framework designed for developers who value simplicity, flexibility, and performance. Whether you're a seasoned CSS wizard or just getting started, NuvoUI makes building responsive, performant, and visually stunning web designs a breeze.
Why Choose NuvoUI?
✨ Natural Language-Like Syntax
Write CSS that feels intuitive and effortless. Use classes like px-20
for padding or px-20@lg
for responsive styles—all without breaking a sweat.
🔥 Fully Mixin-Based
Seamlessly integrate NuvoUI into your SCSS pipeline. Write reusable, modular, and clean SCSS code with our powerful mixins.
🚀 Optimized Animations
Define animations on the fly. NuvoUI caches animations intelligently, ensuring your code stays DRY (Don't Repeat Yourself).
Key Features
- Dynamic Responsive Design: Use
@lg
,@sm
, etc., to generate responsive styles with ease. - Flexible Animations: Create complex animations with simple mixins like
@include NuvoUI.animate-bounce((horizontal: 3%, duration: 25s))
. - Developer-First Approach: NuvoUI is built by developers for developers, offering the flexibility to build custom solutions effortlessly.
- Simple Installation: Get started with a single command via npm.
Installation
To start using NuvoUI, install it via npm or pnpm:
npm instal @nuvoui/core
// or
pnpm install @nuvoui/core
Usage Examples
Example 1: Intuitive HTML Classes
<div class="
px-40
px-20@sm
px-80@lg
">
Responsive Padding Example
</div>
Example 2: Elegant SCSS Mixins
img:nth-child(1) {
@include NuvoUI.mx-auto;
@include NuvoUI.my(40);
@include NuvoUI.animate-bounce((
horizontal: 3%,
duration: 25s,
));
}
Generated CSS:
img:nth-child(1) {
margin-left: auto;
margin-right: auto;
margin-top: 40px !important;
margin-bottom: 40px !important;
animation: anim-bounce-0per-3per 25s ease-in-out infinite;
}
@keyframes anim-bounce-0per-3per {
0% {
transform: translateX(-0%) translateY(-3%);
}
50% {
transform: translateX(0%) translateY(3%);
}
100% {
transform: translateX(-0%) translateY(-3%);
}
}
Join the NuvoUI Community 🌟
We welcome developers of all levels to contribute, suggest features, or just give us a star ⭐️ on GitHub. Let’s build something amazing together!
- GitHub: NuvoUI Core
- NPM: NuvoUI Core Package
- DISOCRD: NuvoUI Discord
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!