Contents

Table of Contents

Navigate this reference. Each chapter covers a complete area of the framework.

01Introduction & Philosophy

→

02Installation & Setup

→

03Design Tokens

→

04Dark Mode

→

05–06Layout & Grid

→

07Buttons

→

08–09Cards & Forms

→

10–11Navigation & Feedback

→

🔨Build Walkthrough — Full Website from Scratch

→

01

Introduction

Philosophy & Goals

Griffin CSS is designed around a single idea: your CSS framework should disappear. You think about your product, not your styles.

Core Principles

🧱 Semantic classes

Classes describe what a component is, not how it looks. .g-btn-primary not .bg-blue-500.

🎨 Token-driven

All visual properties reference CSS custom properties. Override :root to retheme everything instantly.

⚡ Zero dependencies

Pure CSS. No build tools, no npm, no config. One <link> and every class is available.

What Griffin CSS Is Not

Griffin CSS is not a utility-first framework like Tailwind. You won't write classes like flex items-center justify-between px-4 py-2. Instead, a single class like .g-navbar encapsulates the full floating navigation component.

💡Griffin CSS works perfectly alongside utility frameworks. You can use Griffin for components and Tailwind/UnoCSS for micro-adjustments if you prefer.

Browser Support

Browser	Min Version	Notes
Chrome / Edge	`88+`	Full support including all animations and effects
Firefox	`85+`	Full support
Safari / iOS	`14.1+`	Requires `-webkit-` prefixes for backdrop-filter (included)
Samsung Internet	`14+`	Full support

02

Getting Started

Installation & Setup

Griffin CSS ships as a single minified file (~8kb gzipped). Add it to your project in seconds — no build step required.

Option 1 — CDN (Recommended)

HTML

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

Option 2 — Self-hosted

Shell

# Download the file
curl -o griffin.min.css \
  https://cdn.jsdelivr.net/gh/AliAhmad1101/griffin-css@main/griffin.css

# Or with npm (optional, for bundler workflows)
npm install griffin-css

Minimal HTML Template

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="griffin.min.css">
  <title>My App</title>
</head>
<body>
  <button class="g-btn g-btn-primary">Hello World</button>
  <div class="g-card g-card-accent">A styled card</div>
</body>
</html>

ℹRecommended fonts: Griffin CSS pairs best with Syne (display headings) and Inter (body). Add them via Google Fonts for best results.

03

Design System

Design Tokens

All visual decisions — colors, spacing, radius, shadows — are CSS custom properties. Override any in :root to retheme the whole library.

Color Tokens

--accent

Primary accent

--accent-l

Accent light

--accent-d

Accent dark

--accent-m

Accent muted fill

--bg

Page background

--bg2

Subtle surface

--surf

Card surface

--tx

Primary text

Full Token Reference

CSS

:root {
  /* Accent colors */
  --accent:   #1E9E8C;
  --accent-l: #28C4AF;
  --accent-d: #167A6C;
  --accent-m: rgba(30,158,140,.12);

  /* Backgrounds */
  --bg:  #F7F6F3;  --bg2: #EDEAE5;  --bg3: #E2DDD7;
  --surf: #FFF;

  /* Borders */
  --bdr:  rgba(0,0,0,.08);
  --bdr2: rgba(0,0,0,.15);

  /* Text */
  --tx: #0F0F0F;  --tx2: #4A4744;  --tx3: #8A8480;

  /* Shadows */
  --sh:  0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --sh2: 0 4px 16px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06);

  /* Border radii */
  --r: 8px; --rm: 12px; --rl: 16px; --rf: 9999px;

  /* Fonts */
  --font-sans:  'Inter', system-ui, sans-serif;
  --font-disp:  'Syne', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
}

Custom Theme Example

CSS — Purple Theme

:root {
  --accent:   #7C3AED;  /* Violet */
  --accent-l: #9F67F5;
  --accent-d: #5B21B6;
  --accent-m: rgba(124,58,237,.1);
  --sha: 0 4px 20px rgba(124,58,237,.28);
}

04

Theming

Dark Mode

Griffin CSS ships a complete dark theme. Toggle it with a data attribute ... every component adapts automatically with smooth transitions.

Enabling Dark Mode

HTML

<!-- On html element -->
<html data-theme="dark">

JavaScript

// Toggle programmatically
function toggleTheme() {
  const isDark =
    document.documentElement
      .dataset.theme === 'dark';
  document.documentElement
    .dataset.theme =
      isDark ? 'light' : 'dark';
}

System Preference

JavaScript

// Auto-match OS dark mode
const mq = window.matchMedia(
  '(prefers-color-scheme: dark)'
);
if (mq.matches) {
  document.documentElement
    .dataset.theme = 'dark';
}
mq.addEventListener('change', e => {
  document.documentElement
    .dataset.theme =
      e.matches ? 'dark' : 'light';
});

Dark Mode Token Overrides

Token	Light	Dark
`--bg`	#F7F6F3	#0F0F0F
`--surf`	#FFFFFF	#1A1A1A
`--tx`	#0F0F0F	#F7F6F3
`--tx2`	#4A4744	#A8A49F
`--bdr`	rgba(0,0,0,.08)	rgba(255,255,255,.08)

💡Save the user's preference with localStorage.setItem('theme', value) and read it on page load to persist across sessions.

05–06

Foundation

Layout, Grid & Typography

Griffin CSS provides a complete layout system with responsive grid utilities and a full typographic scale.

Grid System

Class	Columns	Use case
`.g-grid.g-grid-2`	2 equal columns	Two-column layouts, split views
`.g-grid.g-grid-3`	3 equal columns	Feature cards, pricing tiers
`.g-grid.g-grid-4`	4 equal columns	KPI dashboards, icon grids
`.g-grid.g-grid-auto`	Auto-fill minmax	Masonry-style responsive grids
`.g-bento`	4-col bento grid	Mixed-size dashboard layouts
`.g-flex-center`	flex, centered	Hero sections, empty states
`.g-flex-between`	flex, spaced	Navbars, list rows

HTML — Grid Example

<div class="g-grid g-grid-3">
  <div class="g-card">Column A</div>
  <div class="g-card">Column B</div>
  <div class="g-card">Column C</div>
</div>

Typography Scale

Class	Size	Weight	Font
`.g-h1`	clamp(2.5–4.5rem)	800	Syne (display)
`.g-h2`	clamp(1.8–2.8rem)	800	Syne
`.g-h3`	1.5rem	700	Syne
`.g-body-lg`	1.15rem	400	Inter
`.g-body-sm`	0.875rem	400	Inter
`.g-label`	0.7rem	700	Inter, uppercase
`.g-gradient-text`	—	—	Accent gradient fill
`.g-text-shimmer`	—	—	Shimmer animation

07

Components

Buttons

Every button variant, size, state, and special effect in one place. The base class is always .g-btn ... add modifier classes to change style.

Variant Gallery

.g-btn-primary

.g-btn-secondary

.g-btn-outline

.g-btn-danger

.g-btn-gradient.g-btn-pill

.g-btn-neon

.g-btn-3d

Sizes: sm / default / lg

.g-btn-loading

.g-fab

HTML Reference

HTML

<!-- Basic variants -->
<button class="g-btn g-btn-primary">Primary</button>
<button class="g-btn g-btn-secondary">Secondary</button>
<button class="g-btn g-btn-outline">Outline</button>
<button class="g-btn g-btn-danger">Danger</button>

<!-- Special variants -->
<button class="g-btn g-btn-gradient g-btn-pill">Gradient</button>
<button class="g-btn g-btn-neon">Neon Glow</button>
<button class="g-btn g-btn-3d">3D Press</button>

<!-- Sizes -->
<button class="g-btn g-btn-primary g-btn-sm">Small</button>
<button class="g-btn g-btn-primary">Default</button>
<button class="g-btn g-btn-primary g-btn-lg">Large</button>

<!-- FAB -->
<button class="g-fab">+</button>

Modifier Reference

Modifier	Effect
`.g-btn-sm`	Smaller padding and font-size
`.g-btn-lg`	Larger padding, slightly larger font-size, rounded-md
`.g-btn-xl`	Extra large, ideal for hero CTAs
`.g-btn-pill`	Fully rounded (border-radius: 9999px)
`.g-btn-full`	width: 100%
`.g-btn-loading`	Shows spinner, hides text, disables pointer
`.g-btn-ripple`	CSS ripple effect on click

08–09

Components

Cards & Forms

Card Variants

Basic Card

Shadow, border, radius

Accent Card

Colored top border

Glass Card

Frosted glass effect

Gradient Card

Accent gradient fill

HTML

<div class="g-card">…</div>
<div class="g-card g-card-accent">…</div>
<div class="g-card-glass">…</div>
<div class="g-card-gradient-border">…</div>

Form Components

Notifications

★★★★★

HTML

<input class="g-input" type="text">
<label class="g-toggle-wrap">
  <div class="g-toggle">
    <input type="checkbox">
    <span class="g-toggle-track">
      <span class="g-toggle-thumb"></span>
    </span>
  </div>
  Enable alerts
</label>

All Form Classes

Class	Component
`.g-input`	Base input, textarea, select styling
`.g-select`	Select with custom chevron arrow
`.g-textarea`	Resizable textarea variant
`.g-toggle-wrap / .g-toggle`	Toggle switch with checked state
`.g-check / .g-radio`	Custom checkbox and radio
`.g-range`	Styled range slider
`.g-file-drop`	Drag-and-drop file upload zone
`.g-otp-group / .g-otp-input`	Six-cell OTP input
`.g-tag-input`	Tag chip input
`.g-float-label`	Floating label input effect

10–11

Components

Navigation & Feedback

Navigation Classes

Class	Component
`.g-navbar`	Floating glassmorphism navbar
`.g-navbar-brand`	Brand logo/name in navbar
`.g-navbar-link`	Nav link (add `.active`)
`.g-breadcrumb`	Breadcrumb trail container
`.g-tabs / .g-tab`	Underline tab row
`.g-tabs-pill`	Pill-style tab switcher
`.g-pagination`	Page number controls
`.g-sidenav`	Vertical sidebar nav
`.g-dropdown`	Dropdown menu wrapper
`.g-command-palette`	⌘K command palette

Feedback Components

✓Profile saved!

⚠Storage 90% full.

Online

HTML

<div class="g-alert g-alert-success">
  <span>✓</span> Saved!
</div>
<div class="g-progress">
  <div class="g-progress-bar" style="width:65%"></div>
</div>
<span class="g-spinner"></span>
<div class="g-pulse-dot"></div>

UI Elements

New Active Pending Failed Beta Draft

JD

⌘K

HTML

<span class="g-badge g-badge-success">Active</span>
<span class="g-badge g-badge-warning">Pending</span>
<div class="g-avatar">JD</div>
<span class="g-kbd">⌘</span><span class="g-kbd">K</span>

BUILD

Illustrated Guide

Building a Website from Scratch

A complete step-by-step walkthrough showing how to assemble a real product landing page using Griffin CSS ... from blank file to production-ready site.

🎯We'll build "Lumina" — a SaaS analytics dashboard landing page. It includes a navbar, hero, features, pricing, and footer. Every element uses Griffin CSS classes.

1

Create the HTML shell & link Griffin CSS

Set up the base HTML file with the CDN link, fonts, and dark mode support

index.html

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AliAhmad1101/griffin-css@main/griffin.css">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <title>Lumina ... Analytics that work for you</title>
</head>
<body>
  <!-- Components go here -->
</body>
</html>

2

Add the floating Navbar

A glassmorphism nav that sticks to the top with a theme toggle button

lumina.app

Lumina .

Home Features Pricing

🌙

HTML

<nav class="g-navbar">
  <a class="g-navbar-brand" href="#">Lumina</a>
  <div class="g-navbar-nav">
    <a class="g-navbar-link active" href="#">Home</a>
    <a class="g-navbar-link" href="#features">Features</a>
  </div>
  <button class="g-theme-btn" onclick="toggleTheme()">🌙</button>
  <button class="g-btn g-btn-primary g-btn-sm">Get Started</button>
</nav>

3

Build the Hero Section

An animated hero with badge, gradient headline, subtext, and CTA buttons

v2.0 — 200+ Components

Build stunning UIs
with Lumina

Modern analytics platform. Real-time dashboards, zero setup time.

HTML

<section class="g-hero g-reveal">
  <span class="g-hero-badge">v2.0 · 200+ Components</span>
  <h1 class="g-h1 g-gradient-text">
    Build stunning UIs with Lumina
  </h1>
  <p class="g-hero-sub">Modern analytics platform.</p>
  <div class="g-flex-center g-gap-sm">
    <button class="g-btn g-btn-primary g-btn-lg">
      Explore →
    </button>
    <button class="g-btn g-btn-secondary g-btn-lg">
      View Demo
    </button>
  </div>
</section>

8

Add Scroll Reveal Animations

Wire up the IntersectionObserver so elements fade in as you scroll

JavaScript — Add before </body>

// Scroll reveal observer
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      obs.unobserve(e.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.g-reveal')
  .forEach(el => obs.observe(el));

// Dark mode toggle
function toggleTheme() {
  const html = document.documentElement;
  html.dataset.theme =
    html.dataset.theme === 'dark'
      ? 'light' : 'dark';
}

🎉 Final Result

Lumina ·

Home Features Pricing

Start Free

AI-powered analytics

Analytics that work
for you

Real-time dashboards. Beautiful charts. Zero setup time.

12K+

Teams

$2.4B

Tracked

99.9%

Uptime

4.9★

Rating

Features

Everything you need

📊

Live Dashboards

Real-time data, sub-second updates

🤖

AI Insights

Automated anomaly detection

🌙

Dark Mode

Full theme built-in

⚡

Zero Setup

Deploy in minutes

📱

Responsive

All device sizes

🔒

Secure

SOC 2 certified

Start building today

🚀 You've built a complete landing page using Griffin CSS. The entire site is responsive, dark-mode-ready, and animated ... no custom CSS or JavaScript needed beyond the scroll reveal snippet.