Junaid Abdullah

Posted on Jul 8

𝐅𝐚𝐥𝐜𝐨𝐧 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞

#webdev #opensource #web3 #beginners

🎨 FN CSS

A lightweight, modern, utility-first CSS framework with 10000+ ready-to-use utility classes.

🚀 What is FN CSS?

FN CSS is a modern utility-first CSS framework inspired by W3.CSS, Bootstrap, and Tailwind CSS. It provides a massive collection of utility classes including colors, animations, effects, components, layouts, responsive tools, and much more.

FN CSS uses the prefix fn- for all classes making them easy to remember, easy to type, and conflict-free with other frameworks.

✅ Stable Release v3.0.0 — This is a production-ready version containing 10000+ utility classes including tags, grid, flex, responsive, animations, effects, bars, dropdowns, navigations, and much more.

✨ Features (v3.0.0)

🎨 Color System

🖌️ Text Colors — .fn-color-* classes (1000+)
🎯 Background Colors — .fn-bg-* classes (1000+)
🎨 Combination Colors — Background + Text color pairs (1000+)
🏢 Brand Colors — 200+ companies, websites, and tech brand colors
🌈 Gradient Backgrounds — 200+ beautiful gradient backgrounds

🏷️ Tags & Labels

🏷️ Color Tags — 30+ color variants
📏 Size Tags — xs, sm, md, lg, xl, 2xl, 3xl, jumbo
🎭 Style Tags — solid, outline, ghost, soft, bordered
🔲 Shape Tags — rounded, round, pill, square

📐 Layout System

📊 Grid System — 12-column responsive grid (.fn-grid-*)
🔢 Grid Columns — .fn-grid-cols-1 to .fn-grid-cols-12
📏 Grid Rows — .fn-grid-rows-1 to .fn-grid-rows-6
🔄 Auto Grid — .fn-grid-auto, .fn-grid-auto-cols
📍 Grid Positioning — Start, end, span utilities
🎯 Grid Alignment — Center, stretch, baseline utilities

🔥 Flexbox Utilities

📍 Flex Direction — Row, column, reverse
🔄 Flex Wrap — Wrap, nowrap, wrap-reverse
📏 Flex Sizing — .fn-flex-1, .fn-flex-auto, .fn-flex-none
🎯 Flex Alignment — Center, start, end, between, around, evenly
📊 Flex Order — Order 1-12, first, last
🧩 Flex Items — Align-self, justify-content, align-content

📦 Spacing System

📏 Padding — .fn-p-*, .fn-px-*, .fn-py-*
📐 Margin — .fn-m-*, .fn-mx-*, .fn-my-*
🔢 Gap — .fn-gap-*, .fn-gap-x-*, .fn-gap-y-*
📊 Responsive Spacing — clamp-based responsive values

📱 Responsive System (1000% Responsive)

📱 Device Breakpoints — Phone, tablet, desktop, laptop
📏 Screen Sizes — xs, sm, md, lg, xl, xxl
🎯 Show/Hide Utilities — .fn-xs-only, .fn-md-hide, etc.
📊 Width Utilities — Percentage, viewport, min/max
📐 Height Utilities — Percentage, viewport, min/max
🔄 Fluid Utilities — .fn-fluid, .fn-fluid-x, .fn-fluid-y
📱 Mobile-First — Built for all screen sizes

✨ Animations (1000+)

🔄 Spin Animations — .fn-spin, .fn-spin-reverse, .fn-spin-fast
💓 Pulse Animations — .fn-pulse, .fn-pulse-fast, .fn-pulse-slow
🎯 Bounce Animations — In, out, up, down, left, right
🌊 Fade Animations — Fade in/out with directions
📍 Slide Animations — Slide in/out from all directions
🔃 Zoom Animations — Zoom in/out with directions
🔄 Rotate Animations — Rotate in/out with directions
🎭 Flip Animations — Horizontal, vertical, X, Y axis
📳 Shake Animations — Horizontal, vertical, blur variations
✨ Glow Animations — Glow, pulse-glow, flicker, neon
🌊 Float Animations — Float, float-fast, float-slow
🎪 Special Animations — Heartbeat, tada, wobble, jello, rubber band
🎨 Color Animations — Color shift, gradient shift
💫 Loading Animations — Spinner, loading-bar, shimmer

🎨 Effects (500+)

🔍 Hover Effects — Grow, shrink, shadow, lift, push
🎯 Hover Transform — Rotate, flip, spin, scale variations
💡 Hover Glow — Glow, neon, metallic effects
🎨 Hover Filters — Brightness, contrast, saturate, blur, grayscale
🖼️ Hover Image Effects — Zoom, pan, grayscale, sepia, blur
🌓 Hover Overlay Effects — Dark, light, color overlays
💳 Hover Card Effects — Lift, shadow variations
🔘 Hover Button Effects — Press, lift, ripple
🌊 Hover Ripple Effects — Circle, wave, shimmer
🎭 Hover Text Effects — Underline, strike, wave, glow
🎨 Hover Border Effects — Glow, neon, gradient borders
✨ Special Effects — 3D, perspective, elastic, glass

📊 Progress Bars (200+)

📏 Bar Sizes — xs, sm, md, lg, xl, 2xl, 3xl, 4xl
🎨 Bar Colors — 30+ color variants
🌈 Gradient Bars — Sunset, ocean, forest, galaxy, fire, ice, aurora, cyber
🎭 Bar Styles — Striped, dotted, dashed, segmented
✨ Bar Effects — Glow, neon, pulse, shimmer, skeleton
🔄 Bar Animations — Loading, animated, fill-animate
📊 Bar Shapes — Rounded, round, pill, square, capsule
🎯 Special Bars — Circle, semi-circle, vertical, steps, rating
🏷️ Bar Labels — Percent, floating label, icon, text

📋 Dropdowns (300+)

📍 Dropdown Positions — Top, bottom, left, right, center
🎭 Dropdown Styles — Black, white, colors (30+ variants)
✨ Dropdown Animations — Fade, slide, scale, flip, zoom, roll
📦 Dropdown Content — Card, header, body, footer
🎯 Dropdown Items — Active, disabled, divider, header
📱 Dropdown Sizes — sm, md, lg, xl
🖼️ Dropdown Features — Icons, avatars, badges, images, thumbnails
🔍 Interactive Dropdowns — Search, scrollable, accordion, tabs
🎨 Special Dropdowns — Profile, mega menu, color picker, calendar, notifications

🧭 Navigations (20+)

📍 Horizontal Nav — Classic horizontal navigation
📏 Vertical Nav — Sidebar navigation
🎯 Centered Nav — Logo centered navigation
🌓 Transparent Nav — Overlay transparent navigation
📊 Split Nav — Split left/right navigation
🏷️ Icon Nav — Icon-based navigation
💊 Pill Nav — Pill-shaped navigation
📋 Tab Nav — Tab-style navigation
📦 Stack Nav — Stacked navigation
⚪ Dots Nav — Minimal dot navigation
🍞 Breadcrumb Nav — Breadcrumb navigation
📄 Pagination Nav — Pagination navigation
🏢 Mega Menu — Mega menu navigation
📱 Sidebar Nav — Collapsible sidebar
🔝 Top Bar — Top bar navigation
🎯 Bottom Bar — Bottom navigation bar
🏝️ Floating Nav — Floating island navigation
🍔 Burger Menu — Burger menu navigation
📊 Stepper Nav — Step progress navigation
⭕ Circle Toggle — CSS-only circular toggle navigation

🎨 Typography

📏 Font Sizes — Responsive clamp-based sizes
🎯 Font Weights — Light, normal, medium, semibold, bold
📊 Text Alignment — Left, center, right, justify
🎨 Text Colors — Full color spectrum
🌈 Text Gradients — Gradient text effects
✨ Text Effects — Glow, shadow, neon

🔲 Borders & Shadows

📏 Border Widths — 0, 1, 2, 4, 8
🎨 Border Colors — Full color spectrum
🔲 Border Radius — None, sm, md, lg, xl, 2xl, 3xl, full
📍 Border Sides — Top, right, bottom, left
💡 Shadows — None, sm, md, lg, xl, 2xl, inner, color, glow, neon

🎭 Component Utilities

🔘 Buttons — Base, outline, ghost, soft, solid
🃏 Cards — Base, hover, elevated
📝 Forms — Input, select, textarea, label
📊 Tables — Base, striped, bordered, hover
🚨 Alerts — Success, warning, danger, info
🏷️ Badges — All color variants
📈 Progress — Bar, circle, steps, rating
🔍 Tooltips — Base, positions
📱 Modals — Base, sizes, positions
🎯 Avatars — Sizes, shapes, groups

📦 Installation

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/junaidprodeveloper/FalconCSS/falcon.css">
OR
<link rel="stylesheet" href="https://falconcss.netlify.app/falcon.css"

Local Installation

# Download the CSS file
curl -O https://raw.githubusercontent.com/junaidprodeveloper/FalconCSS/main/falcon.css

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="falcon.css">
</head>
<body>

    <!-- Tags -->
    <div class="fn-tag fn-tag-blue">Blue Tag</div>
    <div class="fn-tag fn-tag-lg fn-tag-green">Large Green Tag</div>

    <!-- Grid System -->
    <div class="fn-grid fn-grid-3">
        <div class="fn-cell">Cell 1</div>
        <div class="fn-cell">Cell 2</div>
        <div class="fn-cell">Cell 3</div>
    </div>

    <!-- Flexbox -->
    <div class="fn-flex fn-flex-center">
        <div>Centered Content</div>
    </div>

    <!-- Responsive -->
    <div class="fn-responsive-img">
        <img src="image.jpg" alt="Responsive">
    </div>

    <!-- Animations -->
    <div class="fn-spin">Spinning Element</div>
    <div class="fn-pulse">Pulsing Element</div>
    <div class="fn-bounce">Bouncing Element</div>

    <!-- Effects -->
    <div class="fn-hover-grow">Hover to Grow</div>
    <div class="fn-hover-shadow">Hover for Shadow</div>
    <div class="fn-hover-lift">Hover to Lift</div>

    <!-- Progress Bars -->
    <div class="fn-bar">
        <div class="fn-bar-inner fn-bar-blue" style="width: 75%"></div>
    </div>

    <!-- Dropdowns -->
    <div class="fn-dropdown">
        <button class="fn-btn">Dropdown</button>
        <div class="fn-dropdown-menu">
            <a href="#" class="fn-dropdown-item">Item 1</a>
            <a href="#" class="fn-dropdown-item">Item 2</a>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="fn-nav-horizontal">
        <div class="fn-nav-horizontal-logo">Logo</div>
        <a href="#" class="fn-nav-horizontal-item">Home</a>
        <a href="#" class="fn-nav-horizontal-item">About</a>
        <a href="#" class="fn-nav-horizontal-item">Contact</a>
    </nav>

    <!-- Colors -->
    <div class="fn-blue">Blue background with white text</div>
    <p class="fn-color-red">Red text</p>
    <div class="fn-bg-green">Green background</div>
    <div class="fn-bg-grad-sunset">Sunset gradient</div>
    <div class="fn-bg-facebook">Facebook brand blue</div>
    <p class="fn-color-spotify">Spotify brand green text</p>

</body>
</html>

📖 Usage Examples

Grid System

<div class="fn-grid fn-grid-4">
    <div class="fn-cell">1 of 4</div>
    <div class="fn-cell">2 of 4</div>
    <div class="fn-cell">3 of 4</div>
    <div class="fn-cell">4 of 4</div>
</div>

<div class="fn-grid fn-grid-auto">
    <div class="fn-cell">Auto</div>
    <div class="fn-cell">Auto</div>
    <div class="fn-cell">Auto</div>
</div>

Flexbox

<div class="fn-flex fn-flex-center">
    <div>Centered</div>
</div>

<div class="fn-flex fn-flex-between">
    <div>Left</div>
    <div>Right</div>
</div>

<div class="fn-flex fn-flex-col">
    <div>Column 1</div>
    <div>Column 2</div>
</div>

Responsive Utilities

<!-- Show/Hide on breakpoints -->
<div class="fn-xs-only">Only on extra small screens</div>
<div class="fn-md-hide">Hidden on medium screens</div>
<div class="fn-mobile">Only on mobile</div>
<div class="fn-desktop">Only on desktop</div>

<!-- Responsive widths -->
<div class="fn-width-50">50% width</div>
<div class="fn-width-100">100% width</div>
<div class="fn-width-50vw">50 viewport width</div>

<!-- Responsive heights -->
<div class="fn-height-100">100% height</div>
<div class="fn-height-100vh">100 viewport height</div>

Animations

<!-- Spin -->
<div class="fn-spin">Spinning</div>
<div class="fn-spin-fast">Fast Spin</div>

<!-- Pulse -->
<div class="fn-pulse">Pulsing</div>
<div class="fn-pulse-glow">Pulse Glow</div>

<!-- Bounce -->
<div class="fn-bounce">Bounce In</div>
<div class="fn-bounce-in-up">Bounce In Up</div>

<!-- Fade -->
<div class="fn-fade-in">Fade In</div>
<div class="fn-fade-in-up">Fade In Up</div>

<!-- Slide -->
<div class="fn-slide-in-left">Slide In Left</div>
<div class="fn-slide-in-right">Slide In Right</div>

<!-- Zoom -->
<div class="fn-zoom-in">Zoom In</div>
<div class="fn-zoom-out">Zoom Out</div>

<!-- Special -->
<div class="fn-heartbeat">Heartbeat</div>
<div class="fn-tada">Tada</div>
<div class="fn-wobble">Wobble</div>
<div class="fn-glow">Glow</div>
<div class="fn-neon">Neon</div>

Effects

<!-- Hover Effects -->
<div class="fn-hover-grow">Hover to Grow</div>
<div class="fn-hover-shrink">Hover to Shrink</div>
<div class="fn-hover-shadow">Hover for Shadow</div>
<div class="fn-hover-lift">Hover to Lift</div>
<div class="fn-hover-rotate">Hover to Rotate</div>
<div class="fn-hover-glow">Hover Glow</div>
<div class="fn-hover-brightness">Hover Brightness</div>

Progress Bars

<!-- Basic Bar -->
<div class="fn-bar">
    <div class="fn-bar-inner fn-bar-blue" style="width: 75%"></div>
</div>

<!-- Striped Bar -->
<div class="fn-bar">
    <div class="fn-bar-inner fn-bar-striped fn-bar-green" style="width: 60%"></div>
</div>

<!-- Gradient Bar -->
<div class="fn-bar">
    <div class="fn-bar-inner fn-bar-gradient-sunset" style="width: 80%"></div>
</div>

<!-- Animated Bar -->
<div class="fn-bar">
    <div class="fn-bar-inner fn-bar-striped-animated fn-bar-primary" style="width: 50%"></div>
</div>

Dropdowns

<!-- Basic Dropdown -->
<div class="fn-dropdown">
    <button>Dropdown</button>
    <div class="fn-dropdown-menu">
        <a href="#" class="fn-dropdown-item">Item 1</a>
        <a href="#" class="fn-dropdown-item">Item 2</a>
        <a href="#" class="fn-dropdown-item">Item 3</a>
    </div>
</div>

<!-- Dropdown with Animation -->
<div class="fn-dropdown fn-dropdown-fade">
    <button>Fade Dropdown</button>
    <div class="fn-dropdown-menu">
        <a href="#" class="fn-dropdown-item">Item 1</a>
        <a href="#" class="fn-dropdown-item">Item 2</a>
    </div>
</div>

Navigations

<!-- Horizontal Navigation -->
<nav class="fn-nav-horizontal">
    <div class="fn-nav-horizontal-logo">Logo</div>
    <a href="#" class="fn-nav-horizontal-item">Home</a>
    <a href="#" class="fn-nav-horizontal-item">About</a>
    <a href="#" class="fn-nav-horizontal-item">Contact</a>
</nav>

<!-- Pill Navigation -->
<nav class="fn-nav-pills">
    <a href="#" class="fn-nav-pills-item fn-nav-pills-item-active">Home</a>
    <a href="#" class="fn-nav-pills-item">About</a>
    <a href="#" class="fn-nav-pills-item">Services</a>
    <a href="#" class="fn-nav-pills-item">Contact</a>
</nav>

🎨 Color Palette

Basic Colors

.fn-red, .fn-orange, .fn-amber, .fn-yellow, .fn-lime
.fn-green, .fn-emerald, .fn-teal, .fn-cyan, .fn-sky
.fn-blue, .fn-indigo, .fn-violet, .fn-purple
.fn-fuchsia, .fn-pink, .fn-rose
.fn-gray, .fn-slate, .fn-zinc, .fn-neutral, .fn-stone

Brand Colors (200+)

.fn-facebook, .fn-twitter, .fn-instagram, .fn-youtube
.fn-google, .fn-spotify, .fn-apple, .fn-amazon
.fn-netflix, .fn-discord, .fn-twitch, .fn-reddit
.fn-github, .fn-gitlab, .fn-stackoverflow, .fn-linkedin
And 180+ more brand colors!

🛠️ Customization

FN CSS is built with customization in mind. You can easily override any class or create your own utilities.

/* Override a class */
.fn-tag {
    border-radius: 8px;
}

/* Create custom utilities */
.fn-custom-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}