@nuvoui/core 1.1.7 → 1.2.0

package/README.md

@@ -3,13 +3,12 @@
 [![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)
-[![](https://dcbadge.limes.pink/api/server/nWGsbQKE?style=flat&theme=default-inverted)](https://discord.gg/nWGsbQKE)
+[![Discord](https://dcbadge.limes.pink/api/server/nWGsbQKE?style=flat&theme=default-inverted)](https://discord.gg/nWGsbQKE)
 
 ## 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**  
@@ -21,14 +20,20 @@ Seamlessly integrate NuvoUI into your SCSS pipeline. Write reusable, modular, an
 🚀 **Optimized Animations**  
 Define animations on the fly. NuvoUI caches animations intelligently, ensuring your code stays DRY (Don't Repeat Yourself).
 
+🌓 **Built-in Dark Mode**  
+Implement dark mode effortlessly with our built-in theme switching support. Just add `data-theme="dark"` to your HTML element.
 
+📱 **Container and Element Queries**  
+Build truly component-based designs with container queries alongside traditional media queries.
 
 ## 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.
+- **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
 
 ---
 
@@ -36,53 +41,83 @@ Define animations on the fly. NuvoUI caches animations intelligently, ensuring y
 
 To start using NuvoUI, install it via npm or pnpm:
 
-```bash
-npm instal @nuvoui/core 
- // or
+```css
+npm install @nuvoui/core 
+# or
 pnpm install @nuvoui/core
 ```
 
+## Quick Start
+
+### Option 1: Import in SCSS (Recommended)
+
+```scss
+// Import with default configuration
+@use '@nuvoui/core' as NuvoUI;
+
+// Or customize with your own variables
+@use '@nuvoui/core' as NuvoUI with (
+  $primary: #ff6f00,
+  $column-count: 12,
+  $enable-dark-mode: true,
+  // Add more customizations as needed
+);
+```
+### Option 2: Use Pre-compiled CSS
 
+<link rel="stylesheet" href="node_modules/@nuvoui/core/dist/nuvoui.min.css">
 
 ## Usage Examples
 
 ### Example 1: Intuitive HTML Classes
 
 ```html
-<div class=" 
-    px-40
-    px-20@sm
-    px-80@lg
-">
-  Responsive Padding Example
+<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>
 ```
 
 ### Example 2: Elegant SCSS Mixins
 
 ```scss
-img:nth-child(1) {
-    @include NuvoUI.mx-auto;
-    @include NuvoUI.my(40);
-    @include NuvoUI.animate-bounce((
-        horizontal: 3%,
-        duration: 25s,
-    ));
+.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:
-
-```css
-img:nth-child(1) {
+// Generated CSS:
+.hero-image {
   margin-left: auto;
   margin-right: auto;
   margin-top: 40px !important;
   margin-bottom: 40px !important;
-  animation: anim-bounce-0per-3per 25s ease-in-out infinite;
+  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;
 }
 
-@keyframes anim-bounce-0per-3per {
+@media (min-width: 1024px) {
+  .hero-image {
+    max-width: 80%;
+  }
+}
+
+@keyframes anim-bounce-0p-3per {
   0% {
     transform: translateX(-0%) translateY(-3%);
   }
@@ -95,22 +130,42 @@ img:nth-child(1) {
 }
 ```
 
+### 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>
+```
 
-## Join the NuvoUI Community 🌟
+## Documentation
+
+For complete documentation and examples, visit [NuvoUI.io](https://nuvoui.io/).
 
-We welcome developers of all levels to contribute, suggest features, or just give us a star ⭐️ on GitHub. Let’s build something amazing together!
+## Join the NuvoUI Community 🌟
 
-- GitHub: [NuvoUI Core](https://github.com/NuvoUI/core)
-- NPM: [NuvoUI Core Package](https://www.npmjs.com/package/@nuvoui/core)
-- DISOCRD: [NuvoUI Discord](https://discord.gg/nWGsbQKE)
+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](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
 
-
 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!
 
+![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)