@nuvoui/core 1.2.0 → 1.2.2

package/README.md

@@ -1,86 +1,126 @@
 # NuvoUI
 
-[![GitHub stars](https://img.shields.io/github/stars/NuvoUI/core?style=social)](https://github.com/NuvoUI/core)
-[![GitHub forks](https://img.shields.io/github/forks/NuvoUI/core?style=social)](https://github.com/NuvoUI/core)
-[![npm version](https://img.shields.io/npm/v/@nuvoui/core)](https://www.npmjs.com/package/@nuvoui/core)
-[![Discord](https://dcbadge.limes.pink/api/server/nWGsbQKE?style=flat&theme=default-inverted)](https://discord.gg/nWGsbQKE)
+_Human-readable SCSS for modern devs. Discover NuvoUI_
 
-## Welcome to NuvoUI 🎉
+[![GitHub stars](https://img.shields.io/github/stars/NuvoUI/core?style=flat-square&color=FFB000)](https://github.com/NuvoUI/core)
+[![GitHub forks](https://img.shields.io/github/forks/NuvoUI/core?style=flat-square&color=FFB000)](https://github.com/NuvoUI/core)
+[![npm version](https://img.shields.io/npm/v/@nuvoui/core?style=flat-square&color=FF6F00)](https://www.npmjs.com/package/@nuvoui/core)
+[![Discord](https://img.shields.io/discord/912696886734364743?style=flat-square&label=Discord&color=5865F2)](https://discord.gg/nWGsbQKE)
+[![Twitter](https://img.shields.io/badge/Twitter-@NuvoUI-1DA1F2?style=flat-square)](https://x.com/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.
+## The Human-First SCSS Framework
 
-## Why Choose NuvoUI?
+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.
 
-✨ **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.
+## ✨ Why Choose NuvoUI?
 
-🔥 **Fully Mixin-Based**  
-Seamlessly integrate NuvoUI into your SCSS pipeline. Write reusable, modular, and clean SCSS code with our powerful mixins.
+- **💬 Human-Readable** - Intuitive, readable class names and mixins
+- **📱 Responsive First** - Use `@lg` or `@sm` directly in class names - being natual 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
 
-🚀 **Optimized Animations**  
-Define animations on the fly. NuvoUI caches animations intelligently, ensuring your code stays DRY (Don't Repeat Yourself).
+## Quick Installation
 
-🌓 **Built-in Dark Mode**  
-Implement dark mode effortlessly with our built-in theme switching support. Just add `data-theme="dark"` to your HTML element.
+```bash
+# Using npm
+npm install @nuvoui/core
 
-📱 **Container and Element Queries**  
-Build truly component-based designs with container queries alongside traditional media queries.
+# Using pnpm
+pnpm add @nuvoui/core
 
-## 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))`
-- **Smart Utilities**: Comprehensive set of utilities for spacing, typography, colors, and more
-- **Developer-First Approach**: Built by developers for developers, offering the flexibility to build custom solutions effortlessly
-- **Zero Dependencies**: Lightweight with no external dependencies
-- **Simple Installation**: Get started with a single command via npm
-
----
-
-## Installation
-
-To start using NuvoUI, install it via npm or pnpm:
-
-```css
-npm install @nuvoui/core 
-# or
-pnpm install @nuvoui/core
+# Using yarn
+yarn add @nuvoui/core
 ```
 
-## Quick Start
+## Usage
 
-### Option 1: Import in SCSS (Recommended)
+### SCSS Import (Recommended)
 
 ```scss
-// Import with default configuration
+// Basic import with defaults
 @use '@nuvoui/core' as NuvoUI;
 
-// Or customize with your own variables
+// 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
 );
 ```
-### Option 2: Use Pre-compiled CSS
+### Direct CSS Import (coming soon to CDN)
 
+```html
 <link rel="stylesheet" href="node_modules/@nuvoui/core/dist/nuvoui.min.css">
+```
+
+## Core Features
 
-## Usage Examples
+### 🎨 Beautiful Color System
 
-### Example 1: Intuitive HTML Classes
+NuvoUI includes a comprehensive color system with semantic color variables and automatic dark mode support.
 
 ```html
-<div class="flex col gap-4 px-20 px-10@sm px-40@lg rounded-lg bg-primary text-white">
-  <h2 class="font-bold text-xl">Responsive Layout Example</h2>
-  <p>This container adapts to different screen sizes automatically.</p>
-  <button class="btn">Click Me</button>
+<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>
+```
+
+### 📐 Flexible Layout System
+
+Build complex layouts with ease using our grid and flexbox utilities.
+
+
+```html
+<!-- 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>
+```
+
+### 
+```scss
+.floating-element {
+  @include NuvoUI.animate-float((
+    distance: 10px,
+    duration: 3s,
+    direction: vertical
+  ));
+}
 ```
 
+### 🌓 Simple Dark Mode
+
+
 ### Example 2: Elegant SCSS Mixins
 
+```html
+<html data-theme="dark">
+  <!-- Your content will use dark theme colors -->
+</html>
+```
+
+Toggle with a simple script:
+
+```html
+<button onclick="document.documentElement.setAttribute('data-theme', 
+  document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')">
+  Toggle Theme
+</button>
+```
+
+## Step 3: Implementing Responsive Design
+
 ```scss
 .hero-image {
   @include NuvoUI.mx-auto;
@@ -130,36 +170,20 @@ pnpm install @nuvoui/core
 }
 ```
 
-### Example 3: Dark Mode Support
-
-```html
-<html data-theme="light">
-  <head><!-- ... --></head>
-  <body>
-    <button onclick="document.documentElement.setAttribute('data-theme', 
-      document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')">
-      Toggle Dark Mode
-    </button>
-    
-    <div class="card bg-surface text-on-surface">
-      <!-- Content automatically adapts to light/dark mode -->
-    </div>
-  </body>
-</html>
-```
 
 ## Documentation
 
-For complete documentation and examples, visit [NuvoUI.io](https://nuvoui.io/).
+For complete documentation, examples, and guides:
+
+[Visit the NuvoUI Documentation Site →](https://nuvoui.io/).
+
 
-## Join the NuvoUI Community 🌟
+### Community & Support
 
-We welcome developers of all levels to contribute, suggest features, or just give us a star ⭐️ on GitHub. Let's build something amazing together!
+- [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
 
-- **GitHub**: [NuvoUI Core](https://github.com/NuvoUI/core)
-- **NPM**: [NuvoUI Core Package](https://www.npmjs.com/package/@nuvoui/core)
-- **Discord**: [NuvoUI Community](https://discord.gg/nWGsbQKE)
-- **Twitter**: [@NuvoUI](https://twitter.com/nuvoui)
 
 ## License
 
@@ -167,5 +191,4 @@ NuvoUI is open-source and licensed under the [MIT License](https://github.com/Nu
 
 Feel free to use NuvoUI in your projects—commercial or personal. Just don't forget to give us a shoutout when possible!
 
-![Developer working with NuvoUI](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExYjV3ZDhyeWp0bno2aTBjMzd5bTltazg0Y29mM2czeDl1aHNxam8xbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yYSSBtDgbbRzq/giphy.webp)
-![working](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExYjV3ZDhyeWp0bno2aTBjMzd5bTltazg0Y29mM2czeDl1aHNxam8xbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yYSSBtDgbbRzq/giphy.webp)
+![Working with CSS](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExYjV3ZDhyeWp0bno2aTBjMzd5bTltazg0Y29mM2czeDl1aHNxam8xbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yYSSBtDgbbRzq/giphy.webp)