.g-btn

.g-card

.g-input

.g-modal

.g-nav

.g-grid

Build stunning UIs
with Griffin CSS

A modern CSS framework with 130+ components, dark mode, responsive grid, and beautiful design tokens. Drop in one line and start building.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AliAhmad1101/griffin-css@main/griffin.css">

Quick Start

Up in 60 seconds

Griffin CSS is a single CSS file. No build tools, no npm, no config. Just link it and go.

🔗

Add the CDN link

Paste one <link> tag in your <head> and all classes are ready to use instantly.

🧱

Use component classes

Apply semantic class names like .g-btn, .g-card, .g-navbar to your HTML elements.

🎨

Customize with tokens

Override CSS custom properties in :root to instantly retheme every component.

🌙

Dark mode built in

Toggle [data-theme="dark"] on any element. All components respond automatically.

HTML

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AliAhmad1101/griffin-css@main/griffin.css">

<!-- Dark mode -->
<html data-theme="dark">

<!-- Use components -->
<button class="g-btn g-btn-primary">Click me</button>
<div class="g-card g-card-accent">Hello Griffin</div>

Features

Everything you need

A complete design system with carefully crafted tokens, responsive utilities, and production-ready components.

🎨

Design Tokens

Comprehensive color palette, spacing scale, typography, shadows, and border radii via CSS custom properties.

📱

Fully Responsive

Mobile-first grid and layout utilities that adapt to any screen size with breakpoints built into every component.

🌙

Dark Mode

A complete dark mode with smooth transitions. Toggle with data-theme="dark" or match system preference.

⚡

Zero JS Required

Pure CSS framework. No JavaScript bundle, no runtime overhead. Add your own JS as needed.

🧩

130+ Components

Buttons, cards, modals, forms, dashboards, landing sections, animated components, and more.

🎭

3D & Animations

CSS perspective scenes, floating elements, shimmer effects, entrance animations, and marquee utilities.

🔧

Easy to Customize

Override a handful of CSS variables to retheme your entire project in seconds without touching component code.

♿

Accessible by Default

Focus states, ARIA-friendly patterns, and sufficient color contrast baked into every component class.

Documentation

All component categories

Browse all 14 categories. Every component is documented with live previews and copy-ready HTML snippets.

Design Tokens Reference

Override these variables in :root to customize your theme.

--g-accent

--g-bg

--g-surface

--g-text

--g-border

--g-radius

--g-shadow

--g-font-sans

--g-font-display

--g-font-mono

--g-space-4

--g-text-base

--g-radius-sm

--g-radius-lg

--g-accent-dark

--g-accent-muted

--g-text-muted

--g-text-hint

--g-success

--g-warning

--g-danger

--g-info

--g-transition

--g-backdrop

Community

Submit a Component

Built something beautiful with Griffin CSS? Share it with the community and get it added to the library.

Your name

Email address

Component name

Build stunning UIswith Griffin CSS