iFarouq Color Framework

Version 2.3.0 - A Modern, Comprehensive SASS Color Framework

Description: A comprehensive, modern, lightweight CSS framework designed to give developers expressive, accessible, and production-ready color systems featuring 36 color families with 326+ color variations, 92 stunning gradients - with extensive components and utilities for those who want more.

motto: ...we're not trying to replace existing frameworks. We focus on what they don't prioritize deeply!

Last Updated: Februay 01st, 2026

Downloads:

Fast & Lightweight

Minimal footprint with maximum performance. Build faster with optimized utilities.

326+ Color Variations

36 complete color families with 9 shades each. Every color you'll ever need.

92 Stunning Gradients

From subtle to vibrant. Original, Low, and Medium intensity collections.

Responsive

Mobile-first design that works beautifully on all devices and screen sizes.

Getting Started

Your first steps with iFarouqCSS

🎯 Choose Your Version New

We offer 5 different builds to suit your needs - from full-featured to ultra-lightweight!

We also offer 2 more indipendent options to help you use the framework the way see feet, to make sure it serve you well!🤝🏼😄

Quick Version Selector

👉 Just starting or exploring? → Full Version (1.5MB)
👉 Building a production website? → Min Version (533.2KB) ⭐️Recomended
👉 Need the smallest file size? → Lite Version (287.2KB) ⭐Best Performance
👉 Using with Bootstrap/custom components? → Components Version (1.1MB)
👉 Using with Tailwind/other utilities? → Utilities Version (400.8KB)

📊 Versions Comparison New

Quick Version Selector

Version	Size	Colors	Gradients	Components	Utilities	Best For
Full	1.5MB	All 36 (324 shades)	All 92	✅	✅	Development, testing all features
Min	533.2KB	11 (99 shades)	50	✅	✅	Most production websites ⭐
Lite	287.2KB	6 (54 shades)	25	✅	✅	Smaller sites, best performance ⭐
Components	1.1MB	All 36 (324 shades)	All 92	✅	❌	Combine with Tailwind/utilities
Utilities	400.8KB	All 36 (324 shades)	All 92	❌	✅	Combine with Bootstrap/components

Here's a simple example to get you started:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My iFarouqCSS Project</title>
    <link rel="stylesheet" href="dist/iFarouqCSS.css">
</head>
<body class="bg-gradient-ocean-bliss">
    <div class="liquid-glass-peacock-feather rounded p-4">
        <h1 class="text-gradient-turquoise-wave">Hello, iFarouqCSS!</h1>
        <p class="text-cyan-200">Start building amazing websites.</p>
    </div>
</body>
</html>

👨🏻‍💻⌥ Other Build Options New

1. 👨🏻‍💻 Build From Source

Compile Guide for iFarouqCSS: Learn how to compile and even customize any iFarouqCSS bundle the way you see feet, the way it will satisfy your appetite!

You want to learn more about it? Click here

2. 🧹 PurgeCSS (iFarouqCSS-Optimizer)

PurgeCSS Guide for iFarouqCSS: Learn how to optimize your iFarouqCSS bundle by removing unused CSS classes and reducing file size dramatically!

You want to learn more about it? Click here

Download the Compiled file

No need to rush with the compilation! We’ve got you covered. iFarouqCSS-v2.3.0 is all set, all you need is to choosee your suitable version:👇🏼

♾️ Full Version

Size: 1.5MB | Colors: 36 families (324 shades) | Gradients: 92

Includes:

All 36 color families with 9 shades each
92 stunning gradients (50 original + 42 custom)
All components (buttons, cards, badges, alerts, progress bars)
All utilities (spacing, typography, hover, active states)
Glassmorphism effects
Everything!

When to Use:

Development: Testing all features
Exploration: Learning the framework
No file size constraints: Internal tools, admin panels

Download:

Insatall:

HTML

<link rel="stylesheet" href="dist/ifarouqcss.css">

Color Families: blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray, lime, emerald, sky, violet, fuchsia, rose, amber, slate, zinc, stone, neutral, crimson, coral, salmon, gold, bronze, silver, navy, maroon, olive, mint, lavender, peach, turquoise, aquamarine

⏩ Min Version New

Size: 533.2KB | Colors: 11 families (99 shades) | Gradients: 50

Includes:

11 primary color families with all 9 shades
50 original gradient collection
All components and utilities
60% smaller than full version

When to Use:

Production websites: Perfect balance of features and size
Most projects: Has all the colors you'll actually use
Best value: Maximum features with optimized size

Download:

Insatall:

HTML

<link rel="stylesheet" href="dist/ifarouqcss-min.css">

Color Families: blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray

⭐ Recommended for most projects!

⚡️ Lite Version New

Size: 287.2KB | Colors: 6 families (54 shades) | Gradients: 25

Includes:

6 essential color families with all 9 shades
25 most popular gradients
All components and utilities
83% smaller than full version

When to Use:

Production sites: Where file size matters
Landing pages: Fast loading times
Essential colors only: You don't need every color

Download:

Insatall:

HTML

<link rel="stylesheet" href="dist/ifarouqcss-lite.css">

Color Families: blue, red, green, yellow, purple, gray

⭐ Best for performance-focused projects!

🧩 Components Version New

Size: 287.2KB | Colors: All | Gradients: All | Components: All | Utilities: None

Includes:

All button components (solid, outline, gradient, all sizes)
Card components
Badge & pill components
Alert components
Progress bars
NO utility classes (text, bg, spacing, etc.)

When to Use:

With Tailwind CSS: Use Tailwind utilities + iFarouq components
With other frameworks: Combine with any utility framework
Custom utilities: You have your own spacing/color system

Download:

Insatall:

HTML

<!-- Example: With Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="dist/ifarouqcss-components.css">

🧩 Utilities Version New

Size: 400.8KB | Colors: All | Gradients: All | Components: None | Utilities: All

Includes:

Text & background color utilities
Border utilities
Gradient utilities
Hover & active states
Spacing (margin, padding)
Typography (font sizes)
Shadows & opacity
Glassmorphism
NO component classes

When to Use:

With Bootstrap: Use Bootstrap components + iFarouq colors
Custom components: You have your own button/card styles
Color utilities only: Just need the color system

Download:

Insatall:

HTML

<!-- Example: With Tailwind -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/ifarouqcss-utilities.css">

< Happy Coding 🎉👨🏻‍💻 />

Installation

Get started with iFarouqCSS in seconds

CDN (Recommended for Quick Start) New

The fastest way to get started:

BASH

# Intall iFarouqCSS in your Project

npm i ifarouqcss

NPM (Recommended for Laravel, React, Vue, etc. ) New

Development

Prerequisites: You must have Node.js 12.0.0 or higher installed on your machine!

BASH

/*
 * In your main JS file (React, Vue, etc.)
 * or in app.js in Laravel
*/

// Full version
import 'ifarouqcss/dist/ifarouqcss.css';

// Colors only
import 'ifarouqcss/dist/ifarouqcss-colors.css';

// Min version
import 'ifarouqcss/dist/ifarouqcss-min.css';

// Lite version
import 'ifarouqcss/dist/ifarouqcss-lite.css';

// Components only
import 'ifarouqcss/dist/ifarouqcss-components.css';

// Utilities only
import 'ifarouqcss/dist/ifarouqcss-utilities.css';

Color System

36 Complete Color Families - 326+ Variations

Color Families

All versions include their respective color families with 9 full shades (100-900) for maximum flexibility:

PRIMARY COLORS

Blue

#0D6EFD

Indigo

#6610F2

Purple

#6F42C1

Pink

#F63384

Red

#DC3545

Orange

#FD7E14

Yellow

#FFC107

Green

#198754

Teal

#20C997

Cyan

#0DCAF0

Gray

#ADB5BD

EXTENDED PALETTE

Lime

#84CC16

Emarald

#10B981

Sky

#0EA5E9

Violet

#8B5CF6

Fuchsia

#D946EF

Rose

#F43F5E

amber

#F59E0B

Slate

#64748B

Zinc

#71717A

Stone

#78716C

Neutral

#737373

SPECIAL COLORS

Crimson

#DC143C

Coral

#FF7F50

Salmon

#FA8072

Gold

#FFD700

Bronze

#CD7F32

Silver

#C0C0C0

Navy

#F59E0B

Maroon

#800000

Olive

#808000

Mint

#98FF98

Lavender

#E6E6FA

Peach

#FFDAB9

Turquoise

#40E0D0

Aquamarine

#7FFFD4

Color Shade System

Shade	Lightness	Use Case
100	Lightest	Backgrounds, subtle accents
200	Very Light	Hover states, highlights
300	Light	Secondary backgrounds
400	Medium Light	Borders, dividers
500	Base	Primary color
600	Medium Dark	Hover states, emphasis
700	Dark	Text on light backgrounds
800	Very Dark	Primary text, strong emphasis
900	Darkest	Headers, maximum contrast

Gradient Collection

92 Stunning Gradients - Original, Low & Medium Intensity

Featured Gradients

Click any gradient to see the code!

Aurora Dream

Ocean Bliss

Sunset Glory

Emerald Flow

Royal Purple

Cyber Blue

Peachy Paradise

Mint Breeze

Crimson Tide

Golden Hour

Lavender Haze

Neon Nights

1. Original Collection (50 Gradients)

Name	Description
`aurora-dream`	Purple to pink aurora
`ocean-bliss`	Cyan to blue ocean
`sunset-glory`	Red to yellow sunset
`emerald-flow`	Teal to green flow
`royal-purple`	Purple to magenta
`cyber-blue`	Electric blue cyber
`peachy-paradise`	Peach to pink paradise
`mint-breeze`	Mint green breeze
`crimson-tide`	Red to pink wave
`golden-hour`	Yellow to orange glow
`lavender-haze`	Lavender to purple
`tropical-storm`	Cyan to teal storm
`cherry-blossom`	Soft pink cherry
`deep-space`	Dark blue space
`neon-nights`	Hot pink to orange neon
`aqua-marine`	Bright cyan aquatic
`fire-opal`	Red to yellow fire
`purple-haze`	Purple psychedelic
`rose-gold`	Rose to gold elegance
`electric-lime`	Lime to cyan electric
`cosmic-fusion`	Magenta to purple cosmic
`tangerine-dream`	Orange tangerine
`mystic-violet`	Purple to violet mystic
`turquoise-wave`	Turquoise wave
`moonlight-serenade`	Blue to black night
`candy-crush`	Pink to blue candy
`rainbow-sherbet`	Pink to yellow rainbow
`northern-lights`	Green to blue aurora
`desert-mirage`	Yellow to orange desert
`glacier-blue`	Light blue glacier
`velvet-night`	Dark purple velvet
`strawberry-lemonade`	Cream to pink
`emerald-dream`	Bright green dream
`blueberry-muffin`	Purple blueberry
`phoenix-fire`	Red to yellow phoenix
`tropical-paradise`	Pink to cyan tropical
`midnight-city`	Gray to black city
`cotton-candy`	Pink to blue candy
`volcanic-ash`	Gray to blue volcanic
`honey-dew`	Yellow to pink honey
`arctic-frost`	Green to cyan frost
`ruby-red`	Deep red ruby
`forest-green`	Dark purple to blue forest
`peacock-feather`	Cyan peacock
`sangria-sunset`	Orange to pink sangria
`sage-wisdom`	Mint to pink sage
`celestial-blue`	Cyan to purple celestial
`coral-reef`	Pink to yellow coral
`starry-night`	Blue to teal starry
`dragon-scale`	Purple to magenta dragon

2. Low Gradients (24 Gradients)

Name	Description
`sunset`	Orange to coral sunset
`ocean`	Blue to cyan ocean
`lavender`	Pink to coral lavender
`mint`	Green to lime mint
`royal`	Dark blue royal
`coral`	Orange to magenta coral
`tropical`	Cyan to purple tropical
`flame`	Red to yellow flame
`aqua`	Dark teal to cyan aqua
`forest`	Brown to green forest
`aurora`	Cyan to blue aurora
`berry`	Dark red to black berry
`peach`	Pink to cream peach
`galaxy`	Purple to pink galaxy
`sunrise`	Red to orange sunrise
`dreamy`	Light blue dreamy
`amber`	Orange to yellow amber
`steel`	Dark gray to light gray steel
`violet`	Dark purple to lavender violet
`crystal`	Green to blue crystal
`ruby`	Magenta to purple ruby
`lagoon`	Green to blue lagoon
`magma`	Bright red to dark red magma
`cosmos`	Navy to blue cosmos

3. Medium Gradients (18 Gradients)

Name	Description
`purple-dream`	Lavender to pink dream
`deep-sea`	Dark blue to teal sea
`royal-sky`	Navy to red to yellow sky (3-color)
`midnight-bliss`	Dark gray bliss
`lava-flow`	Red to purple lava
`ice-candy`	Teal to lavender candy
`peach-sunset`	Cream to peach sunset
`electric-violet`	Blue to purple electric
`oceanic-glow`	Gray to blue oceanic
`mint-fusion`	Green to lime fusion
`hot-pink`	Red to coral pink
`cosmic-fizz`	Blue to cyan fizz (3-color)
`royal-gold`	Orange to yellow gold
`emerald-light`	Green to blue emerald
`berry-mix`	Purple to blue to mint (3-color)
`dreamy-rainbow`	Yellow to coral rainbow
`candy-burst`	Pink to cream burst
`liquid-crystal`	Green to cyan crystal

Glassmorphism Effects

Modern frosted glass aesthetics

Basic Glass

Standard frosted glass effect:

.glass

Glass Subtle

Delicate frosted glass effect:

.glass-subtle

Dark Glass

Dark frosted glass variant:

.glass-dark

Strong Glass

Fuggy frosted glass effect:

.glass-strong

Liquid Glass with Gradient Tints

True glassmorphism with gradient hints - use any of the 92 gradients!

HTML

<!-- Original gradients -->
<div class="liquid-glass-ocean-bliss">
  <h2>Transparent Card</h2>
  <p>Content visible through blurred glass</p>
</div>

<!-- Low gradients -->
<div class="liquid-glass-sunset">
  Semi-transparent sunset glass
</div>

<!-- Medium gradients -->
<div class="liquid-glass-purple-dream">
  Purple dream liquid glass
</div>

Features:

95% transparency
20px blur effect
15% opacity gradient tint
Glass-like borders
Elevated shadows

Utility Classes

Comprehensive utilities for rapid development

Text Colors

Apply text colors using .text-{color}-{shade}:

HTML

<p class="text-blue-500">Blue text</p>
    <p class="text-emerald-700">Dark emerald text</p>
    <h1 class="text-violet-300">Light violet heading</h1>

Hover Text

Change text color on hover using .text-hover-{color}-{shade}:

HTML

<a href="#" class="text-gray-700 text-hover-blue-600">
        Hover me for blue text
    </a>

    <p class="text-black text-hover-fuchsia-500">
        Hover for fuchsia
    </p>

    <nav>
        <a class="text-slate-600 text-hover-emerald-600">Menu Item</a>
    </nav>

Background Colors

Apply backgrounds using .bg-{color}-{shade}:

HTML

<div class="bg-sky-500">Sky background</div>
<div class="bg-bronze-200">Light bronze background</div>

Hover Background Colors

Change background on hover using .bg-hover-{color}-{shade}:

HTML

<div class="bg-white bg-hover-violet-100">
    Hover for violet background
</div>

<button class="bg-gray-200 bg-hover-blue-300">
    Hover Button
</button>

<div class="bg-transparent bg-hover-amber-50">
    Hover Effect
</div>

Hover & Active States

Dynamic state management for interactive elements:

HTML

<!-- Hover Text -->
<a href="#" class="text-gray-700 text-hover-blue-600">Hover me</a>

<!-- Active State -->
<a href="#" class="text-gray-600 text-active-blue-600 is-active">Active Link</a>

Active Text Colors

For navigation and links using .text-active-{color}-{shade}:

HTML

<nav>
    <a href="#" class="text-gray-600 text-active-blue-600 is-active">
        Home (Active)
    </a>
    <a href="#" class="text-gray-600 text-active-blue-600">
        About
    </a>
    <a href="#" class="text-gray-600 text-active-blue-600">
        Contact
    </a>
</nav>

The .is-active class can be toggled with JavaScript to show the active state.

Active Background Colors

Background active states using .bg-active-{color}-{shade}:

HTML

<ul class="menu">
    <li class="bg-gray-100 bg-active-emerald-500 is-active">
        Dashboard (Active)
    </li>
    <li class="bg-gray-100 bg-active-emerald-500">
        Settings
    </li>
    <li class="bg-gray-100 bg-active-emerald-500">
        Profile
    </li>
</ul>

Gradient Backgrounds Utilities

Apply any of the 92 gradients using .bg-gradient-{name}:

HTML

<!-- Original Collection -->
<div class="bg-gradient-ocean-bliss">Ocean gradient</div>
<div class="bg-gradient-dragon-scale">Dragon gradient</div>

<!-- Low Gradients -->
<div class="bg-gradient-sunset">Sunset</div>
<div class="bg-gradient-aurora">Aurora</div>

<!-- Medium Gradients -->
<div class="bg-gradient-purple-dream">Purple Dream</div>
<div class="bg-gradient-royal-sky">Royal Sky (3-color)</div>

Gradient Text Utilities

Create gradient text effects using .text-gradient-{name}:

HTML

<h1 class="text-gradient-cosmic-fizz">Cosmic Text</h1>
<p class="text-gradient-liquid-crystal">Crystal Text</p>
<span class="text-gradient-berry-mix">Berry Text</span>

Border Colors

Apply border colors using .border-{color}-{shade}:

HTML

<div class="border-2 border-solid border-rose-500">Rose border</div>
<div class="border-3 border-dashed border-turquoise-600">Turquoise dashed</div>

Directional borders:

HTML

<div class="border-top-gold-500">Top gold border</div>
<div class="border-right-navy-600">Right navy border</div>
<div class="border-bottom-mint-400">Bottom mint border</div>
<div class="border-left-coral-500">Left coral border</div>

Border Utilities

Width: .border-0, .border-1, .border-2, .border-3, .border-4, .border-5:

Style: .border-solid, .border-dashed, .border-dotted, .border-double, .border-none:

HTML

<div class="border-3 border-solid border-blue-500">3px solid blue</div>
<div class="border-2 border-dashed border-red-400">2px dashed red</div>

Gradient Borders

HTML

<div class="border-gradient-sunset">Sunset gradient border</div>
<div class="border-gradient-cosmic-fizz">Cosmic gradient border</div>

Gradient Text Utilities

Create gradient text effects using .text-gradient-{name}:

HTML

<h1 class="text-gradient-cosmic-fizz">Cosmic Text</h1>
<p class="text-gradient-liquid-crystal">Crystal Text</p>
<span class="text-gradient-berry-mix">Berry Text</span>

Spacing Utilities

Margin .m-1, .m-2, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12:

Margin Top .mt-1, .mt-2, .mt-3, .mt-4, .mt-5, .mt-6, .mt-7, .mt-8, .mt-9, .mt-10, .mt-11, .mt-12:

Margin Right .mb-1, .mb-2, .mb-3, .mb-4, .mb-5, .mb-6, .mb-7, .mb-8, .mb-9, .mb-10, .mb-11, .mb-12:

Margin Left .ml-1, .ml-2, .ml-3, .ml-4, .ml-5, .ml-6, .ml-7, .ml-8, .ml-9, .ml-10, .ml-11, .ml-12:

Margin .mr-1, .mr-2, .mr-3, .mr-4, .mr-5, .mr-6, .mr-7, .mr-8, .mr-9, .mr-10, .mr-11, .mr-12:

Margin Top & Bottom .my-1, .my-2, .my-3, .my-4, .my-5, .my-6, .my-7, .my-8, .my-9, .my-10, .my-11, .my-12:

Margin Left & Right .mx-1, .mx-2, .mx-3, .mx-4, .mx-5, .mx-6, .mx-7, .mx-8, .mx-9, .mx-10, .mx-11, .mx-12:

HTML

<!-- All sides -->
<div class="m-4">Margin all sides</div>

<!-- Individual sides -->
<div class="mt-2">Margin top</div>
<div class="mb-6">Margin bottom</div>
<div class="ml-3">Margin left</div>
<div class="mr-8">Margin right</div>

<!-- Vertical & Horizontal -->
<div class="my-5">Margin top & bottom</div>
<div class="mx-4">Margin left & right</div>

Padding .p-1, .p-2, .p-3, .p-4, .p-5, .p-6, .p-7, .p-8, .p-9, .p-10, .p-11, .p-12:

Padding Top .pt-1, .pt-2, .pt-3, .pt-4, .pt-5, .pt-6, .pt-7, .pt-8, .pt-9, .pt-10, .pt-11, .pt-12:

Padding Right .pb-1, .pb-2, .pb-3, .pb-4, .pb-5, .pb-6, .pb-7, .pb-8, .pb-9, .pb-10, .pb-11, .pb-12:

Padding Left .pl-1, .pl-2, .pl-3, .pl-4, .pl-5, .pl-6, .pl-7, .pl-8, .pl-9, .pl-10, .pl-11, .pl-12:

Padding .pr-1, .pr-2, .pr-3, .pr-4, .pr-5, .pr-6, .pr-7, .pr-8, .pr-9, .pr-10, .pr-11, .pr-12:

Padding Top & Bottom .py-1, .py-2, .py-3, .py-4, .py-5, .py-6, .py-7, .py-8, .py-9, .py-10, .py-11, .py-12:

Padding Left & Right .px-1, .px-2, .px-3, .px-4, .px-5, .px-6, .px-7, .px-8, .px-9, .px-10, .px-11, .px-12:

HTML

<!-- All sides -->
<div class="p-6">Padding all sides</div>

<!-- Individual sides -->
<div class="pt-3">Padding top</div>
<div class="pb-4">Padding bottom</div>
<div class="pl-2">Padding left</div>
<div class="pr-5">Padding right</div>

<!-- Vertical & Horizontal -->
<div class="py-8">Padding top & bottom</div>
<div class="px-6">Padding left & right</div>

Spacing scale

Class	Value	Pixels (at 16px base)
`0`	0	0px
`1`	0.25rem	4px
`2`	0.5rem	8px
`3`	0.75rem	12px
`4`	1rem	16px
`5`	1.25rem	20px
`6`	1.5rem	24px
`7`	1.75rem	28px
`8`	2rem	32px
`9`	2.25rem	36px
`10`	2.5rem	40px
`11`	2.75rem	44px
`12`	3rem	48px

Shadow Utilities

Basic Shadows

HTML

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-none">No shadow</div>

Colored Shadows

Available for all 36 color families:

HTML

<div class="shadow-rose-500">Rose shadow</div>
<div class="shadow-lg-aquamarine-600">Large aquamarine shadow</div>
<div class="shadow-navy-400">Navy shadow</div>

Special Shadows

HTML

<div class="shadow-gradient">Multi-color gradient shadow</div>
<div class="shadow-glow">Glowing white shadow</div>

Opacity Utilities

HTML

<div class="opacity-0">Invisible (0%)</div>
<div class="opacity-25">25% opacity</div>
<div class="opacity-50">50% opacity</div>
<div class="opacity-75">75% opacity</div>
<div class="opacity-100">100% opacity</div>

Component Classes

Pre-built components for rapid development

Buttons

Solid Buttons now have NO default size - you choose! - All 36 colors with 9 shades each:

HTML

<!-- Color buttons with size classes -->
<button class="btn-blue-500 btn-xs">Extra Small</button>
<button class="btn-emerald-600 btn-sm">Small</button>
<button class="btn-violet-500 btn-md">Medium</button>
<button class="btn-coral-600 btn-lg">Large</button>
<button class="btn-gold-500 btn-xl">Extra Large</button>
<button class="btn-bronze-600 btn-xxl">XXL</button>

Outline Buttons:

HTML

<button class="btn-outline-violet-500 btn-sm">Violet Outline</button>
<button class="btn-outline-turquoise-600 btn-md">Turquoise Outline</button>

Gradient Buttons - All 92 gradients available:

HTML

<!-- Original -->
<button class="btn-gradient-fire-opal">Fire Opal</button>
<button class="btn-gradient-galaxy btn-md">Galaxy</button>
<button class="btn-gradient-sunset btn-lg">Sunset</button>

<!-- Low -->
<button class="btn-gradient-galaxy">Galaxy</button>

<!-- Medium -->
<button class="btn-gradient-cosmic-fizz">Cosmic Fizz</button>

Button Size Options:

Class	Padding	Font Size	Use Cases
`.btn-xs`	0	0.75rem	Inline buttons, icons
`.btn-sm`	0.25rem 0.5rem	0.875rem	Compact UIs
`.btn-md`	0.5rem 1rem	1rem	Default/Standard
`.btn-lg`	0.75rem 1.5rem	1.125rem	CTAs
`.btn-xl`	1rem 2rem	1.25rem	Hero sections
`.btn-xxl`	1.25rem 2.5rem	1.5rem	Large displays

Button States:

Default: Normal color
Hover: 8% darker with lift effect
Active/Pressed: 12% darker with pressed effect
Focus: Glow outline

Typography

Font Sizes (fs-1 to fs-12):

HTML

<p class="fs-1">Extra small text (12px)</p>
<p class="fs-2">Small text (14px)</p>
<p class="fs-3">Base text (16px)</p>
<p class="fs-4">Medium text (18px)</p>
<p class="fs-5">Large text (20px)</p>
<p class="fs-6">XL text (24px)</p>
<p class="fs-7">2XL text (28px)</p>
<p class="fs-8">3XL text (32px)</p>
<p class="fs-9">4XL text (36px)</p>
<p class="fs-10">5XL text (40px)</p>
<p class="fs-11">6XL text (48px)</p>
<p class="fs-12">7XL text (56px)</p>

Cards

Solid Color Cards:

HTML

<div class="card-sky-500">
    <h3>Sky Card</h3>
    <p>Card content</p>
</div>

Gradient Cards - 92 gradients:

HTML

<div class="card-gradient-royal-sky">
    <h3>Royal Sky Card</h3>
    <p>3-color gradient card</p>
</div>

Badges

New Premium Hot

Standard Badges:

HTML

<span class="badge-lime-500">New</span>
<span class="badge-crimson-500">Error</span>
<span class="badge-aquamarine-500">Info</span>

Gradient Badges:

HTML

<span class="badge-gradient-berry-mix">Premium</span>
<span class="badge-gradient-liquid-crystal">Pro</span>

Pills

Bronze Silver Glod

Rounded badge alternatives:

HTML

<span class="pill-bronze-500">Featured</span>
<span class="pill-silver-600">Legacy</span>
<span class="pill-gold-700">Legacy</span>

Gradient Pills:

HTML

<span class="pill-gradient-royal-gold">Gold</span>
<span class="pill-gradient-hot-pink">Hot</span>

Alerts

Success! Operation completed successfully.

HTML

<div class="alert-emerald-500 text-green">
  <strong>Success!</strong> Operation completed.
</div>
<div class="alert-salmon-500 text-orange">
    <strong>Warning!</strong> Operation completed.
</div>
<div class="alert-crimson-500 text-red">
    <strong>Danger!</strong> Operation completed.
</div>

Progress Bars

Solid Color Progress:

HTML

<div class="progress-violet-500">
    <div class="progress-bar" style="width: 75%"></div>
</div>

Gradient Progress - 92 gradients:

HTML

<div class="progress-gradient-dreamy-rainbow">
    <div class="progress-bar" style="width: 60%"></div>
</div>

Other Components

HTML

<div class="card-gradient-liquid-crystal">Card</div>
<span class="badge-gradient-berry-mix">Badge</span>
<div class="progress-gradient-sunrise">
    <div class="progress-bar" style="width: 75%"></div>
</div>

CSS Custom Properties

All 326 colors available as CSS variables:

CSS

:root {
    --blue: #0D6EFD;
    --blue-100: #E7F1FF;
    --blue-500: #0D6EFD;
    --blue-900: #031633;

    --emerald-500: #10B981;
        --coral-600: #CC6640;
    --bronze-500: #CD7F32;
    /* ... all colors */
}

Usage

CSS

.custom-element {
    background-color: var(--violet-500);
    border-color: var(--violet-700);
    color: var(--white);
}

SASS Variables & Mixins

Using Variables

SASS

@use 'path/to/variables' as v;

.my-component {
    background-color: v.$emerald-500;
    color: v.$white;
    border: 2px solid v.$emerald-700;
}

Using Color Maps

SASS

@use 'path/to/maps' as *;

    @each $name, $color in $colors {
        .custom-#{$name} {
            background: $color;
        }
    }

Available Mixins

Generate Utilities:

SASS

@use 'path/to/mixins' as mix;
@use 'path/to/maps' as *;

@include mix.generate-color-utilities('color', 'my-text', $colors);
@include mix.generate-gradient-utilities('background', 'my-bg', $gradients);

Responsive Breakpoints:

SASS

@use 'path/to/mixins' as mix;

.responsive-element {
    font-size: 14px;

    @include mix.respond-to('medium') {
        font-size: 16px;
    }

    @include mix.respond-to('large') {
        font-size: 18px;
    }
}

Real-World Examples

See iFarouqCSS in action

Hero Section with Glassmorphism

Welcome to the Future

Experience the next generation of web design

HTML

<section class="bg-gradient-royal-sky">
  <div class="liquid-glass-cosmic-fizz rounded p-4">
    <h1 class="text-white">Welcome to the Future</h1>
    <button class="btn-gradient-liquid-crystal">Get Started</button>
  </div>
</section>

Button Combination

HTML

<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
    <!-- Size + Color -->
    <button class="btn-blue-600 btn-lg px-8">Large Blue Button</button>

    <!-- Size + Gradient + Margin -->
    <button class="btn-gradient-galaxy btn-xl mt-4 mb-2">XL Galaxy Button</button>

    <!-- Outline + Size + Hover -->
    <button class="btn-outline-emerald-500 btn-md text-hover-emerald-700">Hover Effect</button>
</div>

Modern Navigation with Hover & Active States

HTML

<nav class="bg-white shadow">
    <div class="flex space-x-4 p-4">
        <a href="#" class="text-gray-600 text-hover-blue-600 text-active-blue-700 is-active px-3 py-2">
        Dashboard
        </a>
        <a href="#" class="text-gray-600 text-hover-blue-600 text-active-blue-700 px-3 py-2">
        Projects
        </a>
        <a href="#" class="text-gray-600 text-hover-blue-600 text-active-blue-700 px-3 py-2">
        Team
        </a>
        <a href="#" class="text-gray-600 text-hover-blue-600 text-active-blue-700 px-3 py-2">
        Settings
        </a>
    </div>
</nav>

Tab Navigation with Background Active States

HTML

<div class="flex border-b">
    <button class="px-4 py-2 bg-transparent bg-hover-gray-100 bg-active-white text-active-blue-600 is-active">
        Overview
    </button>
    <button class="px-4 py-2 bg-transparent bg-hover-gray-100 bg-active-white text-active-blue-600">
        Analytics
    </button>
    <button class="px-4 py-2 bg-transparent bg-hover-gray-100 bg-active-white text-active-blue-600">
        Reports
    </button>
</div>

Pricing Cards with Custom Gradients

Basic

₦99

Popular

Pro

₦299

Enterprise

₦999

HTML

<div style="display: flex; gap: 2rem; padding: 2rem;">
    <div class="liquid-glass-mint-fusion" style="flex: 1; padding: 2rem; text-align: center;">
        <h3>Basic</h3>
        <p class="text-gradient-emerald-flow" style="font-size: 3rem; font-weight: bold;">₦9</p>
        <button class="btn-gradient-mint" style="width: 100%;">Choose Plan</button>
    </div>

    <div class="liquid-glass-purple-dream" style="flex: 1; padding: 2rem; text-align: center;">
        <span class="badge-gradient-berry-mix">Popular</span>
        <h3>Pro</h3>
        <p class="text-gradient-cosmic-fizz" style="font-size: 3rem; font-weight: bold;">₦29</p>
        <button class="btn-gradient-galaxy" style="width: 100%;">Choose Plan</button>
    </div>

    <div class="liquid-glass-royal-gold" style="flex: 1; padding: 2rem; text-align: center;">
        <h3>Enterprise</h3>
        <p class="text-gradient-amber" style="font-size: 3rem; font-weight: bold;">₦99</p>
        <button class="btn-gradient-sunrise" style="width: 100%;">Choose Plan</button>
    </div>
</div>

Interactive Card Grid

Feature One

Description here

Feature Two

Description here

Feature Three

Description here

HTML

<div class="grid grid-cols-3 gap-4">
    <div class="card-gradient-dreamy bg-hover-opacity-90 cursor-pointer mb-3">
        <h4>Feature One</h4>
        <p>Description here</p>
    </div>

    <div class="card-gradient-ice-candy bg-hover-opacity-90 cursor-pointer mb-3">
        <h4>Feature Two</h4>
        <p>Description here</p>
    </div>

    <div class="card-gradient-hot-pink bg-hover-opacity-90 cursor-pointer mb-3">
        <h4>Feature Three</h4>
        <p>Description here</p>
    </div>
</div>

Card with Spacing

Gradient Heading

Card content with proper spacing

HTML

<div class="card-gradient-sunset p-6 m-4">
    <h2 class="fs-8 mb-3 text-gradient-royal-sky">
        Gradient Heading
    </h2>
    <p class="fs-4 mb-4">
        Card content with proper spacing
    </">
    <button class="btn-gradient-cosmos btn-md">
        Action Button
    </butto">
</di">

Best Practices

Tips for using iFarouqCSS effectively

Semantic Naming

Use descriptive color names like btn-emerald-500 for better code readability.

Performance

Use compressed CSS in production and purge unused utilities for optimal loading times.

Accessibility

Maintain proper contrast ratios: light text (100-400) on dark backgrounds (600-900).

Use Gradients Purposefully

Low gradients: Subtle backgrounds, cards
Medium gradients: CTAs, featured sections
Original gradients: Hero sections, major UI elements

Use Semantic Color Names

HTML

<!-- Good -->
<button class="btn-emerald-500">Success Action</button>

<!-- Avoid -->
<button style="background: #10B981;">Success Action</button>

Leverage Hover & Active States for Navigation

HTML

<nav>
    <a class="text-gray-600 text-hover-blue-600 text-active-blue-700 is-active">
        Active Link
    </a>
</nav>

Combine Glass Effects with Gradients

HTML

<div class="bg-gradient-deep-space" style="min-height: 100vh;">
    <div class="liquid-glass-cyber-blue">
        Glassmorphism over gradient
    </div>
</div>

Create Consistent Themes

Choose a primary color family and stick with it throughout your design.

Build From Source New

Prerequisites

SASS/SCSS compiler (Dart Sass recommended)
Node.js (optional, for npm scripts)

Setup

Download/Clone the framework files to your project

Place all SCSS files in a scss/ directory:

FILES STRUCTURE

 ifarouqcss/
     ├── scss/
         ├── ifarouqcss/
         │    ├── _variables.scss
         │    ├── _maps.scss
         │    ├── _mixins.scss
         │    ├── _components.scss
         │    ├── _utilities.scss
         │    └── ifarouqcss.scss
         │
         ├── ifarouqcss-components/
         │    ├── _variables.scss
         │    ├── _maps.scss
         │    ├── _components.scss
         │    └── ifarouqcss-components.scss
         │
         ├── ifarouqcss-lite/
         │    ├── _variables.scss
         │    ├── _maps-lite.scss
         │    ├── _mixins.scss
         │    ├── _components.scss
         │    ├── _utilities.scss
         │    └── ifarouqcss-lite.scss
         │
         ├── ifarouqcss-min/
         │    ├── _variables.scss
         │    ├── _maps-min.scss
         │    ├── _mixins.scss
         │    ├── _components.scss
         │    ├── _utilities.scss
         │    └── ifarouqcss-min.scss
         │
         └── ifarouqcss-utilities/
             ├── _variables.scss
             ├── _maps.scss
             ├── _mixins.scss
             ├── _components.scss
             ├── _utilities.scss
             └── ifarouqcss-utilities.scss

Check if you Install SASS:

BASH

sass --version

If you already installed SASS on your machine, skip the step 4 and move to step 5

Install SASS on your Machine:

BASH

npm install -g sass

Compile the framework:

BASH

# Full Version
sass scss/ifarouqcss/ifarouqcss.scss dist/ifarouqcss.css --style=compressed

# Min Version
sass scss/ifarouqcss-min/ifarouqcss-min.scss dist/ifarouqcss-min.css --style=compressed

# Lite Version
sass scss/ifarouqcss-lite/ifarouqcss-lite.scss dist/ifarouqcss-lite.css --style=compressed

# Components-Only Version
sass scss/ifarouqcss-components/ifarouqcss-components.scss dist/ifarouqcss-components.css --style=compressed

# Utilities-Only Version
sass scss/ifarouqcss-utilities/ifarouqcss-utilities.scss dist/ifarouqcss-utilities.css --style=compressed

Link in your HTML:

HTML

<!-- Full Version -->
<link rel="stylesheet" href="dist/ifarouqcss.css">

<!-- Min Version -->
<link rel="stylesheet" href="dist/ifarouqcss-min.css">

<!-- Lite Version -->
<link rel="stylesheet" href="dist/ifarouqcss-lite.css">

<!-- Component-Only Version -->
<link rel="stylesheet" href="dist/ifarouqcss-components.css">

<!-- Utilities-Only Version -->
<link rel="stylesheet" href="dist/ifarouqcss-utilities.css">

Files Structure New

Your files structure is going to look like:

FILES STRUCTURE

your-project/
    ├── scss/
    │   ├── ifarouqcss/
    │   │    ├── _variables.scss
    │   │    ├── _maps.scss
    │   │    ├── _mixins.scss
    │   │    ├── _components.scss
    │   │    ├── _utilities.scss
    │   │    └── ifarouqcss.scss
    │   │
    │   ├── ifarouqcss-components/
    │   │    ├── _variables.scss
    │   │    ├── _maps.scss
    │   │    ├── _components.scss
    │   │    └── ifarouqcss-components.scss
    │   │
    │   ├── ifarouqcss-lite/
    │   │    ├── _variables.scss
    │   │    ├── _maps-lite.scss
    │   │    ├── _mixins.scss
    │   │    ├── _components.scss
    │   │    ├── _utilities.scss
    │   │    └── ifarouqcss-lite.scss
    │   │
    │   ├── ifarouqcss-min/
    │   │    ├── _variables.scss
    │   │    ├── _maps-min.scss
    │   │    ├── _mixins.scss
    │   │    ├── _components.scss
    │   │    ├── _utilities.scss
    │   │    └── ifarouqcss-min.scss
    │   │
    │   └── ifarouqcss-utilities/
    │        ├── _variables.scss
    │        ├── _maps.scss
    │        ├── _mixins.scss
    │        ├── _components.scss
    │        ├── _utilities.scss
    │        └── ifarouqcss-utilities.scss
    ├── dist/                           # Compiled CSS Files
    │   ├── iFarouqcss.css
    │   ├── ifarouqcss-components.css
    │   ├── ifarouqcss-lite.css
    │   ├── ifarouqcss-min.css
    │   └── ifarouqcss-utilities.css
    └── index.html                      # Your HTML

Files Structure

Get started with iFarouqCSS in seconds

FILES STRUCTURE

your-project/
    ├── dist/                           # Compiled CSS Files
    │   ├── iFarouqcss.css
    │   ├── ifarouqcss-components.css
    │   ├── ifarouqcss-lite.css
    │   ├── ifarouqcss-min.css
    │   └── ifarouqcss-utilities.css
    └── index.html                      # Your HTML

🧹 PurgeCSS - iFarouqCSS Optimizer New

PurgeCSS Guide for iFarouqCSS

Learn how to optimize your iFarouqCSS bundle by removing unused CSS classes and reducing file size dramatically!

Why Use PurgeCSS?

The Problem

When you use iFarouqCSS, you import the entire framework:

Version	Size	What You Got
Full	1.5MB	All colors, gradients, components, utilities
Min	533.2KB	Essential features
Lite	287.2KB	Minimal features
Components	1.1MB	All components classes
Utilities	400.8KB	All utility classes

But you probably only use 10-20% of these classes!

The Solution

PurgeCSS scans your HTML/JS files and removes unused CSS, resulting in:

Before PurgeCSS: 1.5MB
After PurgeCSS: ~50-150KB (depending on usage)

That's a 90%+ reduction! 🎉

🚀 Quick Start

🎆 Install PurgeCSS

BASH

npm install -D @fullhuman/postcss-purgecss

⚙️ Configure (Choose Your Setup):

👉 Laravel + Vite
👉 React / Vue / Vite
👉 Next.js
👉 Webpack
👉 Standalone CLI

🔧 Setup Guides

# Laravel + Vite Setup

Step 1: Install Dependencies

BASH

npm install -D @fullhuman/postcss-purgecss

Step 2: Create postcss.config.js (in your Laravel root)

javascript

module.exports = {
    plugins: [
        require('@fullhuman/postcss-purgecss')({
        content: [
            './resources/**/*.blade.php',
            './resources/**/*.js',
            './resources/**/*.vue',
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: {
            standard: [
            // Keep these classes even if not found in templates
            /^btn/,
            /^bg-/,
            /^text-/,
            /^gradient/,
            ],
            deep: [
            /modal/,
            /dropdown/,
            /tooltip/,
            ],
            greedy: [
            /data-theme$/,
            ]
        }
        }),
        require('autoprefixer'),
    ]
    }

Step 3: Update vite.config.js (in your Laravel root)

javascript

import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';

    export default defineConfig({
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.js'],
                refresh: true,
            }),
        ],
        // PurgeCSS runs in production automatically via postcss.config.js
    });

Step 4: Build for Production

BASH

# Development (no purge)
    npm run dev

    # Production (with purge)
    npm run build

# React / Vue / Vite Setup

Step 1: Install Dependencies

BASH

npm install -D @fullhuman/postcss-purgecss

Step 2: Create postcss.config.js (in your Laravel root)

javascript

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
      content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: {
        standard: [/^btn/, /^bg-/, /^text-/, /^gradient/],
      }
    }),
    require('autoprefixer'),
  ]
}

Step 3: Import iFarouqCSS in Your Entry File

javascript

// src/main.js or src/index.js
import 'ifarouqcss/dist/ifarouqcss.css';
import './App.vue'; // or your app

Step 4: Build for Production

BASH

# Production (with purge)
npm run build

# Next.js Setup

Step 1: Install Dependencies

BASH

npm install -D @fullhuman/postcss-purgecss

Step 2: Create postcss.config.js (in your Laravel root)

javascript

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './pages/**/*.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}',
        './app/**/*.{js,jsx,ts,tsx}',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: {
        standard: [/^btn/, /^bg-/, /^text-/],
      }
    }),
    require('autoprefixer'),
  ]
}

Step 2: Import in _app.js (in your Laravel root)

javascript

// pages/_app.js
import 'ifarouqcss/dist/ifarouqcss.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

# Webpack Setup

Step 1: Install Dependencies

BASH

npm install -D @fullhuman/postcss-purgecss

Step 2: Create webpack.config.js (in your Laravel root)

javascript

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  purgecss({
                    content: [
                      './src/**/*.html',
                      './src/**/*.js',
                      './src/**/*.jsx',
                    ],
                    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
                  }),
                  require('autoprefixer'),
                ],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
};

# Standalone CLI Usage & Setup

For static HTML projects without build tools:

Step 1: Install Globaly

BASH

npm install -g purgecss

Step 2: Create postcss.config.js (in your Laravel root)

javascript

module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  css: [
    './node_modules/ifarouqcss/dist/ifarouqcss.css'
  ],
  output: './dist/css/',
  safelist: {
    standard: [/^btn/, /^bg-/, /^text-/],
  }
}

Step 2: Import in _app.js (in your Laravel root)

bash

purgecss --config ./purgecss.config.js

🎯 Configuration Deep Dive

# Content Paths

Tell PurgeCSS where to find your HTML/JS files:

javascript

content: [
  './index.html',                    // HTML files
  './src/**/*.{js,jsx,ts,tsx}',     // JavaScript/TypeScript
  './src/**/*.vue',                  // Vue components
  './resources/**/*.blade.php',      // Laravel Blade
  './templates/**/*.html',           // Django/Flask templates
]

# Safelist (Keep Classes)

Protect classes from being purged:

javascript

safelist: {
  // Exact class names
  standard: ['btn', 'btn-primary', 'active'],

  // Regex patterns - keeps anything matching
  standard: [
    /^btn-/,        // btn-primary, btn-secondary, etc.
    /^bg-/,         // bg-primary, bg-success, etc.
    /^text-/,       // text-white, text-center, etc.
    /^gradient/,    // gradient-sunset, gradient-ocean, etc.
  ],

  // Deep - keeps children too
  deep: [
    /modal/,        // .modal, .modal-open, .modal-content, etc.
    /dropdown/,     // .dropdown, .dropdown-menu, etc.
  ],

  // Greedy - more aggressive matching
  greedy: [
    /data-theme$/,  // Keeps data attributes
  ]
}

# Default Extractor

Extracts class names from your code:

javascript

// Standard extractor (recommended for iFarouqCSS)
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []

// More aggressive (if classes are being removed incorrectly)
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []

🛡️ iFarouqCSS Recommended Safelist

Use this safelist to protect common iFarouqCSS patterns:

javascript

safelist: {
  standard: [
    // Buttons
    /^btn/,

    // Colors
    /^bg-/,
    /^text-/,
    /^border-/,

    // Gradients
    /^gradient/,
    /^bg-gradient/,

    // Spacing
    /^m-/,
    /^mt-/,
    /^mb-/,
    /^ml-/,
    /^mr-/,
    /^mx-/,
    /^my-/,
    /^p-/,
    /^pt-/,
    /^pb-/,
    /^pl-/,
    /^pr-/,
    /^px-/,
    /^py-/,

    // Typography
    /^fs-/,
    /^fw-/,
    /^text-/,

    // Display
    /^d-/,
    /^flex/,
    /^grid/,

    // Responsive
    /^sm:/,
    /^md:/,
    /^lg:/,
    /^xl:/,
  ],
  deep: [
    // Components with dynamic states
    /modal/,
    /dropdown/,
    /tooltip/,
    /card/,
    /navbar/,
    /form/,
  ],
}

⚠️ Common Issues & Solutions

# Issue 1: Classes Being Removed

Problem: PurgeCSS removes classes you're actually using.

Solution:

Add to safelist:

javascript

safelist: {
    standard: ['my-class', /^prefix-/]
}

Check your content paths:

javascript

content: [
    './src/**/*.html',  // Make sure this matches your files!
]

Use more aggressive extractor:

javascript

defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []

# Issue 2: Dynamic Classes Not Working

Problem: Classes generated by JavaScript are purged.

javascript

// ❌ This won't work - PurgeCSS can't detect it
const color = 'primary';
element.className = `bg-${color}`;

Solution:

Use full class names:

javascript

// ✅ This works
const classes = {
    primary: 'bg-primary',
    success: 'bg-success',
};
element.className = classes[color];

Or add to safelist:

javascript

safelist: {
    standard: [/^bg-/]  // Keeps all bg- classes
}

# Issue 3: Hover/Focus States Removed

Problem: :hover, :focus states are being purged.

Solution:

Add to safelist:

javascript

safelist: {
standard: [
    /hover/,
    /focus/,
    /active/,
    /disabled/,
]
}

# Issue 4: File Size Still Large

Problem: File size didn't reduce much after purging.

Checklist:

✅ Did you run production build? (npm run build)
✅ Are your content paths correct?
✅ Is your safelist too broad?
✅ Are you actually using most classes?

Solution: Narrow your safelist:

Use full class names:

javascript

// ❌ Too broad - keeps everything
safelist: {
standard: [/.*/]  // Don't do this!
}

// ✅ Specific patterns only
safelist: {
standard: [/^btn/, /^bg-/, /^text-/]
}

Or add to safelist:

javascript

safelist: {
    standard: [/^bg-/]  // Keeps all bg- classes
}

📊 Before & After Examples

# Example 1: Simple Website

Before PurgeCSS:

iFarouqCSS Full: 1.5MB
Classes used: ~50
Unused CSS: ~95%

After PurgeCSS:

Optimized: ~75KB
Reduction: 95% smaller!

# Example 2: Documentation Site

Before PurgeCSS:

iFarouqCSS Full: 1.5MB
Classes used: ~200
Unused CSS: ~85%

After PurgeCSS:

Optimized: ~225KB
Reduction: 85% smaller!

# Example 3: Documentation Site

Before PurgeCSS::

iFarouqCSS Full: 1.5MB
Classes used: ~500
Unused CSS: ~60%

After PurgeCSS::

Optimized: ~600KB
Reduction: 60% smaller!

🎯 Best Practices

Only Purge in Production

javascript

// Good pattern
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: [
    isProd && require('@fullhuman/postcss-purgecss')({
      // config
    }),
  ].filter(Boolean)
}

Start with Conservative Safelist

javascript

// Start here
safelist: {
  standard: [/^btn/, /^bg-/, /^text-/]
}

// Add more if needed

Test After Purging

bash

# Build
npm run build

# Test your site thoroughly!
# Check all pages, components, interactions

Monitor File Sizes

bash

# Check before
ls -lh node_modules/ifarouqcss/dist/ifarouqcss.css

# Check after
ls -lh dist/assets/*.css

🔍 Debugging PurgeCSS

Check What's Being Removed

javascript

// Add verbose logging
purgecss({
  content: ['./src/**/*.html'],
  rejected: true,  // Show removed selectors
  variables: true, // Keep CSS variables
})

Test Specific Classes

bash

# Search for class in purged file
grep "btn-primary" dist/assets/app.*.css

Compare Sizes

bash

# Before
du -h node_modules/ifarouqcss/dist/ifarouqcss.css

# After
du -h dist/assets/*.css

✅ Complete Laravel Example

Full working setup for Laravel + Vite + iFarouqCSS + PurgeCSS:

Install

bash

npm install ifarouqcss
npm install -D @fullhuman/postcss-purgecss

Edit your resources/js/app.js

javascript

import './bootstrap';
import 'ifarouqcss/dist/ifarouqcss.css';

Create postcss.config.js

javascript

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: {
        standard: [
          /^btn/,
          /^bg-/,
          /^text-/,
          /^gradient/,
          /^m-/,
          /^p-/,
          /^fs-/,
        ],
        deep: [/modal/, /dropdown/],
      }
    }),
    require('autoprefixer'),
  ]
}

Build

bash

# Development (no purge)
npm run dev

# Production (with purge)
npm run build

📚 Additional Resources

👉 PurgeCSS Docs: https://purgecss.com/
👉 Vite + PostCSS: https://vitejs.dev/guide/features.html#postcss
👉 Webpack + PostCSS: https://webpack.js.org/loaders/postcss-loader/
👉 iFarouqCSS Docs: https://ifarouqcss.ifarouq.dev/

🎊 Summary

PurgeCSS can reduce iFarouqCSS from 1.5MB to 50-200KB!

# Quick Setup:

Install: npm install -D @fullhuman/postcss-purgecss
Configure: Add postcss.config.js
Build: npm run build
Test: Make sure everything works!

# Quick Setup:

✅ Only run in production
✅ Use appropriate safelist
✅ Test thoroughly after purging
✅ Monitor file sizes

Happy optimizing, Dev! 🚀

Customization

Add Your Own Gradient

CSS

// In _maps.scss
$gradients: (
    // ... existing gradients
    "my-custom": linear-gradient(135deg, #yourcolor1 0%, #yourcolor2 100%)
);

Add a New Color Family

CSS

// In _variables.scss
$custom-color: #123456;
$custom-100: #ABCDEF;
// ... add all 9 shades

// In _maps.scss - add to $colors map
$colors: (
    // ... existing colors
    "custom": $custom-color,
    "custom-100": $custom-100,
    // ... all shades
);

What's New in v2.3.0

🎁 Added - New Build Options

✨ Min version (533.2KB) - 11 colors, 50 gradients
✨ Lite version (287.2KB) - 6 colors, 25 gradients
✨ Components-only version (1.1MB)
✨ Utilities-only version (400.8KB)

🎁 Added - New Installation Options

✨ NPM Package Support - Install via npm install ifarouqcss
✨ CDN Support - Available on jsDelivr and UNPKG
✨ Published all 6 versions above to NPM:

Full (1.5MB)
Min (533.2KB)
Lite (287.2KB)
Components (1.1MB)
Utilities (400.8KB)

✨ Package.json configuration
✨ NPM distribution pipeline

🎁 Added - Self Optimization Guide

✨ **PurgeCSS (iFarouqCSS Optimizer)** - Guide

You can choose any of iFarouqCSS Bundle/Version and you will still have lightweight site
The hesitation of using iFarouqCSS due to it's large size, is no more now!
All you need is, read about **PurgeCSS** in the Documentation, we have clearly explained everything you need
We got you covered 🤝🏼

✏️ Changed

✅ Optimized file structure for NPM distribution
✅ Files naming conventions for easy access
✅ Documentation migrated from SPA to multi-page layout

🎨 Improvements

Updated README with NPM and CDN installation instructions
Interactive documentation site Repolished
Improved navigation and discoverability
Enhanced code examples
Better mobile documentation experience

✨ New Features

Modular architecture - use only what you need
Production-ready
Optimized for performance
Zero JavaScript dependencies
Cross-browser compatibility

🐛 Bug Fixed

✅ Removed accidental self-dependency from package.json
✅ Package now installs correctly via NPM

👨🏻‍💻 Technical

Cleaned up package.json configuration
No functional changes to CSS files