DEV Community

Cover image for I Built My Own SCSS-Based CSS Framework — Introducing VyomaCSS
Prasoon Jadon
Prasoon Jadon

Posted on

I Built My Own SCSS-Based CSS Framework — Introducing VyomaCSS

#scss #css #opensource #discuss

Most developers use CSS frameworks.
Very few actually try to build one.

I decided to do exactly that.

Today, I’m excited to introduce VyomaCSS — a lightweight, SCSS-based CSS framework built for indie developers and learners.

Why I Built VyomaCSS

While learning and building projects, I noticed a gap:

  • Big frameworks feel bloated
  • Small libraries often lack structure
  • Beginners struggle to understand how frameworks are designed

So instead of just using another framework, I asked:

What if a CSS framework could also teach you how it’s built?

That idea became VyomaCSS.

What is VyomaCSS?

VyomaCSS is a modular, SCSS-based CSS framework built under Vyoma Labs.

It focuses on:

  • clarity over magic
  • structure over shortcuts
  • learning alongside production use

It’s not trying to replace Tailwind or Bootstrap — it’s trying to be understandable.

Features

  • 🧱 Modern SCSS architecture (Sass modules, no deprecated imports)
  • 🧰 Useful utility classes for spacing, text, and layout
  • 🧩 Clean, reusable components (buttons, cards, etc.)
  • 🎓 Beginner-friendly codebase
  • 🌱 Open-source and easy to extend

Installation

You can install VyomaCSS directly from npm:

npm install vyomacss
Enter fullscreen mode Exit fullscreen mode

Use it in HTML 

<link rel="stylesheet" href="node_modules/vyomacss/dist/vyoma.css">
Enter fullscreen mode Exit fullscreen mode

Or import it in CSS 

@import "vyomacss/dist/vyoma.css";
Enter fullscreen mode Exit fullscreen mode

Example 

<div class="card m-3">
  <h2 class="text-primary">VyomaCSS</h2>
  <p>A clean SCSS-based framework.</p>
  <button class="btn btn-primary">Get Started</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Built for Learning (and Real Projects)

One of the core goals of VyomaCSS is education.

Every part of the framework follows real-world practices:

  • proper SCSS file structure
  • explicit dependencies using @use
  • no global magic
  • clear separation of concerns

If you want to learn how CSS frameworks are actually made, this project is for you.

Open Source & Contributions

VyomaCSS is fully open-source.

You can:

  • explore the source code
  • suggest features
  • report issues
  • contribute components or utilities

Contributions from learners and indie developers are especially welcome.

What’s Next?

This is just the beginning. Planned features include:

  • Dark mode support
  • Responsive utility variants
  • More components
  • Theme system
  • Documentation website

Final Thoughts

Building VyomaCSS taught me more about CSS and SCSS than using any framework ever did.

If you’re curious about how frameworks work internally — or just want a clean, minimal CSS toolkit — give VyomaCSS a try.

⭐ If you like the project, consider starring it and sharing feedback.

Thanks for reading!
— **Prasoon Jadon

Top comments (0)