USE CASE

🧩 Utilities

Utilities are small, reusable classes for rapid UI building.

Spacing Utilities

<div class="p-3 m-2">Content</div>

Text Utilities

<p class="text-center text-primary">Hello Vyoma</p>

Available utilities include:

• Margin / Padding
• Text alignment
• Text colors
• Display helpers

---

🧱 Components

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>

Cards

<div class="card">
  <h3>Card Title</h3>
  <p>Simple card component</p>
</div>

---

🛠 Mixins

Mixins help keep components consistent.

Example: Button base mixin

@mixin button-base {
  padding: 0.5rem 1rem;
  border-radius: $radius-md;
  border: none;
  cursor: pointer;
}

---

🎯 Customization

VyomaCSS is meant to be customized.

You can:

• Override variables before importing
• Add your own utilities
• Remove components you don’t need

Example:

$primary: #22c55e;
@use "vyomacss";

---

🤝 Contributing

VyomaCSS is open-source and community-driven.

Ways to contribute:

• Improve documentation
• Add utilities or components
• Fix bugs
• Suggest ideas

Steps:

1. Fork the repository
2. Create a new branch
3. Make changes
4. Open a Pull Request

---

🗺 Roadmap

• Grid system
• More components
• Dark mode
• Documentation site
• Plugin system

---

❤️ Philosophy

VyomaCSS is not about being the biggest framework. It is about being understandable, approachable, and yours.

Built with curiosity by Prasoon Jadon under Vyoma Labs.

---

🔗 Links

• GitHub Repository
• npm Package
• Dev.to Launch Post

(Links can be added here)