NuvoUI

NuvoUI isn’t your next shiny, over-engineered UI library. It’s raw, lightweight, and built for one thing: delivering responsive, clean designs fast. If you’re tired of bloated frameworks slowing you down, welcome to NuvoUI.

---

Why NuvoUI?

Simple to start, grows with you.

We do not like prefixes. Why make a button like this

<button class="btn btn-lg btn-primary btn-round py-40" >...

when you can have, this

<button class="btn lg primary pill outline py-40" >...

But wait, there is more... lets make it fully responsive

<button class="btn lg primary pill outline 
    py-40
    py-20@sm
    py-80@lg
    outline" >...

This will be

1. Use padding-left: 40px; and padding-right: 40px; as base
2. Use padding-left: 20px; and padding-right: 20px; @ small screen
3. Use padding-left: 80px; and padding-right: 80px; @ large screen

see this feels easy to us to remember ...

---

How to Use It

1. Install via npm

   npm install @nuvoui/core
   - or
   pnpm install @nuvoui/core

2. Import SASS

   @use '@nuvoui/core/src/styles/index.scss' as NuvoUI with (
       $column-count: 25,
       $color-dark: #1A1A1A,
       $color-warning: #F8AF08,
       $color-success: #34C759,
       ...
   );

Another example

img:nth-child(1) {
    @include NuvoUI.mx-auto;
    @include NuvoUI.my(40);
    @include NuvoUI.animate-bounce((
        horizontal: 3%,
        duration: 25s,
    ));
}

will result in (psst: dont worry, we are using caching...)

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%);
  }
}

There are so many things to do, and we do need to make a documentation. Stay tuned...