<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: iFarouq</title>
    <description>The latest articles on DEV Community by iFarouq (@ifarouq).</description>
    <link>https://dev.to/ifarouq</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F573934%2Fd6071ddd-0802-454c-90d4-6aafdbcc9106.ico</url>
      <title>DEV Community: iFarouq</title>
      <link>https://dev.to/ifarouq</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ifarouq"/>
    <language>en</language>
    <item>
      <title># iFarouqCSS v2.3.0 Released: Community-Driven Improvements 🚀</title>
      <dc:creator>iFarouq</dc:creator>
      <pubDate>Tue, 10 Feb 2026 10:14:11 +0000</pubDate>
      <link>https://dev.to/ifarouq/-ifarouqcss-v230-released-community-driven-improvements-178o</link>
      <guid>https://dev.to/ifarouq/-ifarouqcss-v230-released-community-driven-improvements-178o</guid>
      <description>&lt;p&gt;Hello Dev Community!&lt;/p&gt;

&lt;p&gt;I'm thrilled to announce the release of &lt;strong&gt;iFarouqCSS v2.3.0&lt;/strong&gt;! This version is entirely shaped by YOUR feedback, and I couldn't be more grateful.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's New in v2.3.0
&lt;/h2&gt;

&lt;p&gt;What's new in v2.3.0:&lt;/p&gt;

&lt;p&gt;🛠️ Improvements&lt;/p&gt;

&lt;p&gt;✅ Interactive documentation site Repolished&lt;br&gt;
✅ Improved navigation and discoverability&lt;br&gt;
✅ Enhanced code examples&lt;br&gt;
✅ Better mobile documentation experience&lt;br&gt;
✅ Fancy gradient headings - fixed]&lt;br&gt;
✅ Color Contrast - fixed&lt;br&gt;
✅ Community-requested improvements implemented&lt;/p&gt;




&lt;p&gt;🎁 Added - New Build Options&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🆕 ✨ Min version&lt;/li&gt;
&lt;li&gt;🆕 ✨ Lite version &lt;/li&gt;
&lt;li&gt;🆕 ✨ Components-only version&lt;/li&gt;
&lt;li&gt;🆕 ✨ Utilities-only version&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🎁 Added - New Installation Options&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🆕 ✨ &lt;strong&gt;NPM Package Support&lt;/strong&gt; - Install via &lt;code&gt;npm install ifarouqcss&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;🆕 ✨ &lt;strong&gt;CDN Support&lt;/strong&gt; - Available on jsDelivr and UNPKG&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🎁 Added - Optimization Guides&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🆕 ✨ &lt;strong&gt;PurgeCSS (iFarouqCSS Optimizer)&lt;/strong&gt; - Guide&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;✨ New Features&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Modular architecture - use only what you need&lt;/li&gt;
&lt;li&gt;Production-ready&lt;/li&gt;
&lt;li&gt;Optimized for performance&lt;/li&gt;
&lt;li&gt;Zero JavaScript dependencies&lt;/li&gt;
&lt;li&gt;Cross-browser compatibility&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Power of Community Feedback
&lt;/h2&gt;

&lt;p&gt;Every issue reported, every suggestion made, and every bug caught by this amazing community has been addressed in this release. This is what makes open-source development so rewarding.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It Out
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;ifarouqcss@2.3.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or check out the documentation for CDN links and getting started guides.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;I'm always looking to improve iFarouqCSS. If you try out v2.3.0, please share your experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Found a bug? Open an issue&lt;/li&gt;
&lt;li&gt;Have a feature request? Let's discuss it&lt;/li&gt;
&lt;li&gt;Built something cool? I'd love to see it!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thank you for being part of this journey. Let's keep building together! 💪&lt;/p&gt;

&lt;p&gt;&lt;a class="mentioned-user" href="https://dev.to/maame-codes"&gt;@maame-codes&lt;/a&gt; 🤝🏼&lt;/p&gt;

&lt;h1&gt;
  
  
  CSS #WebDev #OpenSource #iFarouqCSS
&lt;/h1&gt;

</description>
      <category>css</category>
      <category>webdev</category>
      <category>opensource</category>
      <category>ifarouqcss</category>
    </item>
    <item>
      <title># Introducing iFarouqCSS</title>
      <dc:creator>iFarouq</dc:creator>
      <pubDate>Wed, 14 Jan 2026 09:24:14 +0000</pubDate>
      <link>https://dev.to/ifarouq/-introducing-ifarouqcss-46of</link>
      <guid>https://dev.to/ifarouq/-introducing-ifarouqcss-46of</guid>
      <description>&lt;h1&gt;
  
  
  Introducing iFarouqCSS: The Color Framework You've Been Waiting For 🎨
&lt;/h1&gt;

&lt;p&gt;Hey developers! 👋&lt;/p&gt;

&lt;p&gt;I'm thrilled to share something I've been working on - &lt;strong&gt;iFarouqCSS&lt;/strong&gt;, a comprehensive SASS color framework that goes way beyond basic color utilities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Built This
&lt;/h2&gt;

&lt;p&gt;As a developer, I was frustrated with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Limited color options in existing frameworks&lt;/li&gt;
&lt;li&gt;Manually creating gradient combinations&lt;/li&gt;
&lt;li&gt;Writing custom glassmorphism CSS repeatedly&lt;/li&gt;
&lt;li&gt;Managing hover/active states for every project&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I decided to build something better. Something that gives you &lt;strong&gt;everything&lt;/strong&gt; you need for modern, colorful web designs.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes iFarouqCSS Different?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🎨 326+ Colors, Not 50
&lt;/h3&gt;

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

&lt;h3&gt;
  
  
  🌈 92 Production-Ready Gradients
&lt;/h3&gt;

&lt;p&gt;Forget spending hours tweaking gradient stops. Choose from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;50 original gradients (aurora-dream, ocean-bliss, cosmic-fusion)&lt;/li&gt;
&lt;li&gt;24 low gradients (sunset, galaxy, aurora)&lt;/li&gt;
&lt;li&gt;18 medium gradients (purple-dream, royal-sky, cosmic-fizz)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Every single one is stunning and production-ready.&lt;/p&gt;

&lt;h3&gt;
  
  
  💎 Built-in Glassmorphism
&lt;/h3&gt;

&lt;p&gt;Want that trendy frosted-glass effect? It's one class away:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"liquid-glass-sunset"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  Instant glassmorphism!
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ⚡ Smart Hover &amp;amp; Active States
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- Hover changes text color --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"text-gray-700 text-hover-blue-600"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Link&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;

&lt;span class="c"&gt;&amp;lt;!-- Active state for navigation --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"text-gray-600 text-active-blue-700 is-active"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Dashboard&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No custom CSS needed!&lt;/p&gt;

&lt;h2&gt;
  
  
  Quick Start
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Install&lt;/span&gt;
npm &lt;span class="nb"&gt;install &lt;/span&gt;ifarouqcss  &lt;span class="c"&gt;# Coming soon!&lt;/span&gt;

&lt;span class="c"&gt;# Or compile from source&lt;/span&gt;
sass scss/colors-framework.scss dist/iFarouqCSS.css &lt;span class="nt"&gt;--style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;compressed
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- Use it --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"bg-gradient-galaxy"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;h1&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"text-gradient-cosmic-fizz"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Hello World!&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn-gradient-sunset"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Click Me&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Perfect For
&lt;/h2&gt;

&lt;p&gt;✓ Landing pages that need to stand out&lt;br&gt;
✓ Dashboards with colorful data visualization&lt;br&gt;
✓ E-commerce sites with vibrant CTAs&lt;br&gt;
✓ Portfolio websites that showcase creativity&lt;br&gt;
✓ SaaS applications with modern UI&lt;/p&gt;

&lt;h2&gt;
  
  
  100% Free &amp;amp; Open Source
&lt;/h2&gt;

&lt;p&gt;MIT Licensed. Use it in personal projects, commercial products, client work - whatever you want!&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It Now
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Live Demo &amp;amp; Docs&lt;/strong&gt;: &lt;a href="https://ifarouqcss.ifarouq.dev" rel="noopener noreferrer"&gt;https://ifarouqcss.ifarouq.dev&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What do you think? I'd love to hear your feedback! Please drop a comment below 👇&lt;/p&gt;

&lt;p&gt;&lt;a class="mentioned-user" href="https://dev.to/unlikable0820"&gt;@unlikable0820&lt;/a&gt; &lt;a class="mentioned-user" href="https://dev.to/devcommunity12"&gt;@devcommunity12&lt;/a&gt; &lt;a class="mentioned-user" href="https://dev.to/devcom"&gt;@devcom&lt;/a&gt; &lt;a class="mentioned-user" href="https://dev.to/dumb_dev_meme_bot"&gt;@dumb_dev_meme_bot&lt;/a&gt; &lt;a class="mentioned-user" href="https://dev.to/altfutures"&gt;@altfutures&lt;/a&gt;  &lt;a class="mentioned-user" href="https://dev.to/your_futureonline_3666f3"&gt;@your_futureonline_3666f3&lt;/a&gt; &lt;/p&gt;

&lt;h1&gt;
  
  
  css #sass #webdev #frontend #opensource #community #iFarouqCSS
&lt;/h1&gt;

</description>
      <category>webdev</category>
      <category>css</category>
      <category>sass</category>
      <category>community</category>
    </item>
  </channel>
</rss>
