DEV Community

Cover image for # Introducing iFarouqCSS
iFarouq
iFarouq

Posted on

# Introducing iFarouqCSS

#webdev #css #sass #community

Introducing iFarouqCSS: The Color Framework You've Been Waiting For 🎨

Hey developers! 👋

I'm thrilled to share something I've been working on - iFarouqCSS, a comprehensive SASS color framework that goes way beyond basic color utilities.

Why I Built This

As a developer, I was frustrated with:

  • Limited color options in existing frameworks
  • Manually creating gradient combinations
  • Writing custom glassmorphism CSS repeatedly
  • Managing hover/active states for every project

So I decided to build something better. Something that gives you everything you need for modern, colorful web designs.

What Makes iFarouqCSS Different?

🎨 326+ Colors, Not 50

We don't just give you 10 colors. We give you 36 complete color families, each with 9 shades. From classic blues and reds to specialty colors like bronze, coral, and aquamarine.

🌈 92 Production-Ready Gradients

Forget spending hours tweaking gradient stops. Choose from:

  • 50 original gradients (aurora-dream, ocean-bliss, cosmic-fusion)
  • 24 low gradients (sunset, galaxy, aurora)
  • 18 medium gradients (purple-dream, royal-sky, cosmic-fizz)

Every single one is stunning and production-ready.

💎 Built-in Glassmorphism

Want that trendy frosted-glass effect? It's one class away:

<div class="liquid-glass-sunset">
  Instant glassmorphism!
</div>
Enter fullscreen mode Exit fullscreen mode

⚡ Smart Hover & Active States 

<!-- Hover changes text color -->
<a class="text-gray-700 text-hover-blue-600">Link</a>

<!-- Active state for navigation -->
<a class="text-gray-600 text-active-blue-700 is-active">Dashboard</a>
Enter fullscreen mode Exit fullscreen mode

No custom CSS needed!

Quick Start 

# Install
npm install ifarouqcss  # Coming soon!

# Or compile from source
sass scss/colors-framework.scss dist/iFarouqCSS.css --style=compressed
Enter fullscreen mode Exit fullscreen mode 
<!-- Use it -->
<div class="bg-gradient-galaxy">
  <h1 class="text-gradient-cosmic-fizz">Hello World!</h1>
  <button class="btn-gradient-sunset">Click Me</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Perfect For

✓ Landing pages that need to stand out
✓ Dashboards with colorful data visualization
✓ E-commerce sites with vibrant CTAs
✓ Portfolio websites that showcase creativity
✓ SaaS applications with modern UI

100% Free & Open Source

MIT Licensed. Use it in personal projects, commercial products, client work - whatever you want!

Try It Now

🔗 Live Demo & Docs: https://ifarouqcss.ifarouq.dev

What do you think? I'd love to hear your feedback! Please drop a comment below 👇

@unlikable0820 @devcommunity12 @devcom @dumb_dev_meme_bot @altfutures @your_futureonline_3666f3

css #sass #webdev #frontend #opensource #community #iFarouqCSS

Top comments (2)

Collapse
 
ifarouq profile image
iFarouq •

iFarouqCSS is now open for everyone 🧩
If you’re a developer or designer, your feedback is incredibly valuable — performance, usability, naming, docs… all of it.
Drop your thoughts below or in the repo 👇

Collapse
 
ifarouq profile image
iFarouq •

iFarouqCSS is officially public 🎉

Your feedback means a lot to me — it will directly shape improvements, features, and documentation.

Please test it out, share your thoughts, and don’t hold back 🙌