API Reference

Every class, token, and modifier in the Unboilerplate CSS system. 120+ classes documented with descriptions and usage examples.

Zero build step required. Drop one stylesheet link into your HTML head to enable the entire design engine. No npm, no bundler, no config.

Option 1: CDN (Instant)

Paste into your HTML <head>:

HTML

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@eldrex/unboilerplate@1.0.0/dist/unboilerplate.min.css">

Option 2: npm

Install and import in your project:

Terminal

npm install @eldrex/unboilerplate

JavaScript / TypeScript

import '@eldrex/unboilerplate';

CSS

@import '@eldrex/unboilerplate';

Selective Imports

Import only what you need to reduce bundle size:

CSS

/* Core utilities + tokens only (smallest) */
@import '@eldrex/unboilerplate/core';

/* Aesthetic packs only */
@import '@eldrex/unboilerplate/aesthetics';

Design Tokens

Override any token via CSS custom properties on :root or scoped to any element. All tokens use the --ub- namespace.

How to override: Declare any --ub-* token on :root in your own stylesheet after the Unboilerplate import to globally retheme the system. Or scope to an element for local overrides: style="--ub-bg: #fff; --ub-text: #000;"

Token	Default Value	Description
`--ub-bg`	`#0d0e15`	Primary page background
`--ub-bg-surface`	`#1c1e2e`	Card/surface background
`--ub-text`	`#f3f4f8`	Primary text color
`--ub-text-muted`	`#9499ad`	Secondary / muted text
`--ub-text-subtle`	`#626880`	Placeholder / hint text
`--ub-border`	`rgba(255,255,255,0.08)`	Default border color
`--ub-accent`	`#ff007f`	Primary accent color (pink)
`--ub-focus-ring`	`#00f2fe`	Focus ring / interactive cyan
`--ub-accent-cyan`	`#00f0ff`	Cyan neon accent solid
`--ub-accent-pink`	`#ff2a85`	Hot pink accent solid
`--ub-accent-purple`	`#9d4edd`	Purple accent solid
`--ub-shadow-float`	`0 16px 36px …`	Floating element shadow
`--ub-shadow-neon`	`0 0 24px …`	Neon glow box shadow
`--ub-glass-bg`	`rgba(28,30,46,0.55)`	Glass card background
`--ub-glass-blur`	`16px`	backdrop-filter blur amount
`--ub-radius-sm`	`8px`	Small border radius
`--ub-radius-md`	`14px`	Medium border radius
`--ub-radius-lg`	`20px`	Large border radius
`--ub-radius-pill`	`9999px`	Full pill / badge radius
`--ub-transition-spring`	`500ms cubic-bezier(0.34,1.56,0.64,1)`	Spring overshoot easing
`--ub-font-family-sans`	`system-ui, …`	Default sans-serif stack
`--ub-font-family-mono`	`'JetBrains Mono', …`	Code / monospace stack

Full token list: See src/core/tokens.css for all 60+ tokens including fluid typography scale (--ub-font-xs → --ub-font-6xl), fluid spacing scale (--ub-space-1 → --ub-space-10), all gradient palettes, and spring transition curves.

Utility Classes

Low-level composable helpers for layout, spacing, and typography. Compose them freely with any component class.

Class	Description
`.flex`	display: flex
`.inline-flex`	display: inline-flex
`.grid`	display: grid
`.block`	display: block
`.hidden`	display: none !important
`.stack`	Flex column stack (display:flex; flex-direction:column)
`.row`	Flex row layout (display:flex; flex-direction:row)
`.center`	Flex centering: align-items & justify-content both center
`.center-grid`	Grid place-items: center shorthand
`.wrap`	flex-wrap: wrap
`.items-center`	align-items: center
`.items-start`	align-items: flex-start
`.items-end`	align-items: flex-end
`.justify-center`	justify-content: center
`.justify-between`	justify-content: space-between
`.justify-start`	justify-content: flex-start
`.justify-end`	justify-content: flex-end
`.gap-1 → .gap-8`	gap shorthand using fluid spacing scale
`.p-1 → .p-10`	padding shorthand (all sides) using fluid scale
`.px-{n}`	padding-left + padding-right
`.py-{n}`	padding-top + padding-bottom
`.m-{n}`	margin shorthand (all sides)
`.mt-{n}`	margin-top fluid scale
`.mb-{n}`	margin-bottom fluid scale
`.rounded-sm`	border-radius: 8px
`.rounded-md`	border-radius: 14px
`.rounded-lg`	border-radius: 20px
`.rounded-xl`	border-radius: 28px
`.rounded-full`	border-radius: 9999px (pill)
`.font-bold`	font-weight: 700
`.font-black`	font-weight: 900
`.font-mono`	font-family: 'JetBrains Mono', monospace
`.text-center`	text-align: center
`.text-left`	text-align: left
`.text-right`	text-align: right
`.text-sm`	font-size: clamp(0.8rem, …, 0.9rem)
`.text-base`	font-size: clamp(0.95rem, …, 1.05rem)
`.text-lg`	font-size: clamp(1.25rem, …, 1.5rem)
`.text-xl`	font-size: clamp(1.5rem, …, 1.85rem)
`.w-full`	width: 100%
`.h-full`	height: 100%
`.relative`	position: relative
`.absolute`	position: absolute
`.overflow-hidden`	overflow: hidden
`.vibe-grid`	Responsive auto-fill grid (minmax 280px, 1fr)

Magic Components

Ready-to-use visual components with rich defaults. Apply one class for instant aesthetics.

.vibe-card

✨ Sleek frosted card with soft rounded corners and border

Example

<div class="vibe-card p-6">Hello World</div>

.vibe-btn

🚀 Clicky gradient action button with a bouncy press feel

Example

<button class="vibe-btn">Click Me</button>

.vibe-btn.--sm

Compact mini version of the vibe button

Example

<button class="vibe-btn --sm">Small</button>

.vibe-badge

🏷️ Cute chip tag badge for status labels

Example

<span class="vibe-badge">LABEL</span>

.vibe-badge--neon

⚡ Glowing cyan electric badge

Example

.vibe-badge--sunset

🌅 Warm sunset orange-gold badge

Example

.vibe-hero

🌟 Big bold hero section for landing page headers

.pill-tab

💊 Smooth pill-shaped link button or filter tab

.price-card

💎 Clean pricing tier card with ready-made layout

.brutal-neo

💥 Fun Neo-Brutalist card with thick borders and bold drop shadow

Example

<div class="brutal-neo p-6"><h3>Bold Attitude</h3></div>

.btn-brutal

Bold retro pop-art button with hard shadow

.card-wood

🪵 Cozy mahogany wood texture card

.btn-leather

🧳 Vintage stitched leather button

.btn-8bit

👾 Retro chunky pixel-art video game button

Visual Effects

GPU-composited visual effects: glassmorphism, glow, hover physics, and gradient systems.

Class	Description
`.effect-glass`	🧊 Frosted glass blur effect like modern iOS and macOS
`.effect-premium`	✨ Subtle shiny shimmer overlay for special cards
`.hover-glow`	💡 Glowing light effect when your mouse hovers over it
`.hover-bounce`	🏀 Playful bouncy pop animation when hovered
`.hover-lift`	🎈 Gently floats upward when hovered
`.text-gradient`	🌈 Beautiful vibrant gradient text fill
`.text-gradient.--sunset`	🌅 Warm sunset glow gradient text
`.text-gradient.--ocean`	🌊 Teal deep ocean gradient text
`.text-gradient.--rainbow`	🦄 Cycling rainbow gradient text
`.text-neon`	⚡ Glowing cyberpunk electric neon text
`.text-cyber`	💻 Retro-futuristic monospace text style
`.text-fire`	🔥 Fiery orange-red text gradient
`.text-rainbow`	🌈 Animated rainbow shifting text color
`.text-3d`	🎨 Layered 3D comic shadow text effect
`.gradient-sunset`	Warm sunset dusk background fill
`.gradient-ocean`	Deep soothing teal-blue ocean backdrop
`.gradient-aurora`	Hypnotic northern lights aurora gradient
`.gradient-rainbow`	Cycling rainbow animated background
`.bg-gradient.--mesh`	Smooth blended mesh background texture
`.card-conic-glow`	💫 Card with an infinite 360° rotating glowing rainbow border
`.vapor-sunset`	🌴 80s synthwave retro sunset background
`.vapor-chrome`	🪩 Shiny metallic 80s chrome title text
`.crt-glow`	📺 Phosphor glow text for vintage computer screens

✨ Animations & Micro-Interactions

Pure CSS animations with zero JavaScript. Powered by GPU hardware compositing and natural physics curves.

♿ Built-in Accessibility: All animations automatically respect prefers-reduced-motion: reduce. Decorative loops are safely disabled for sensitive users while functional feedback is preserved.

1. Hover Micro-Interactions

Add these utility classes directly to any button, card, or image to give them instant physical feedback when hovered.

.hover-glow 💡

<!-- Button with playful spring bounce -->
<button class="vibe-btn hover-bounce">Click Me</button>

<!-- Card with soft upward float -->
<div class="vibe-card hover-lift p-6">Floating Card</div>

<!-- Card with glowing aura -->
<div class="vibe-card hover-glow p-6">Luminous Aura</div>

2. Pure CSS Typewriter & Status Lights

Type out headlines letter-by-letter or add retro flashing status indicators with zero JavaScript scripts.

● SYSTEM ONLINE (.blink)✦ NEON PULSE (.blink.--neon)◆ SOFT GLOW (.blink.--soft)

<!-- Letter-by-letter pure CSS typewriter -->
<h1 class="text-animate --typewriter">Welcome to Unboilerplate</h1>

<!-- Blinking server status indicator -->
<span class="blink">● SYSTEM ACTIVE</span>

3. Smooth Hardware Marquee Tickers

Continuous, 60fps ticker banners that automatically pause when the user hovers over them.

★ PURE CSS MARQUEE ★ PAUSES ON HOVER ★ 60FPS GPU COMPOSITING ★ NO JAVASCRIPT ★

<!-- Glowing cyan marquee that pauses on hover -->
<div class="marquee --neon">
  <span>✦ SHIP YOUR WEBSITE IN MINUTES ✦ PURE CSS FREEDOM ✦</span>
</div>

Class	Description
`.ambient-float`	☁️ Smooth floating cloud animation loop
`.pop-in`	🎉 Bouncy entrance pop animation on page load
`.blink`	Classic blinking pulse indicator
`.blink.--neon`	Electric neon flicker pulse
`.blink.--soft`	Gentle fading breathing pulse
`.text-animate.--typewriter`	⌨️ Types out your words letter-by-letter in pure CSS
`.particle`	✨ Floating particle helper. Add a speed modifier:
`.particle.--float-slow`	Slow gentle floating particle
`.particle.--float-medium`	Medium speed floating particle
`.particle.--float-fast`	Fast energetic floating particle
`.particle.--spin`	Continuously spinning sparkle
`.particle.--orbit`	Orbiting planetary particle path
`.star`	⭐ Celestial twinkling star
`.star.--twinkle-1`	Quick twinkling star animation
`.star.--twinkle-2`	Alternating twinkling star
`.star.--twinkle-3`	Slow sparkling star
`.particles-3d`	🌌 Container for floating particle universes
`.particles-stars`	Container for starry night backgrounds
`.marquee`	📜 Smooth scrolling banner text that pauses on hover
`.marquee.--neon`	Electric cyan glowing marquee banner
`.marquee.--pause-hover`	Pauses the scroll when you hover your mouse
`.eq-bar`	🎵 Bouncing equalizer audio bar

3D Dimensions

GPU-composited 3D perspective transforms using transform-style: preserve-3d. Zero JavaScript.

Performance: All 3D classes use will-change: transform and transform-style: preserve-3d, promoting to their own GPU compositor layer for hardware-accelerated rendering.

.card-3d-flip

🎴 3D flip card that rotates 180° when you hover over it

Example

<div class="card-3d-flip"><div class="card-3d-inner"><div class="card-3d-front">Front</div><div class="card-3d-back">Back</div></div></div>

.card-3d-inner

Inner 3D container holding the front and back faces

.card-3d-front

The front side of your flip card

.card-3d-back

The back side of your flip card

.book-3d

📖 Realistic 3D storybook that opens its pages when hovered

Example

<div class="book-3d"><div class="book-cover">Title</div><div class="book-pages"><div class="page --page1">P1</div></div></div>

.book-cover

Front hardbound book cover

.book-pages

Inside pages container for the 3D book

.page.--page1

First inside page

.page.--page2

Second inside page

.page.--page3

Third inside page

.cube-3d-scene

🎲 3D rotating cube scene wrapper

.cube-3d

Rotating 6-sided 3D photo cube

.cube-face

A single face of the 3D cube

.cube-face.--front

Front face panel

.cube-face.--back

Back face panel

.cube-face.--left

Left face panel

.cube-face.--right

Right face panel

.cube-face.--top

Top face panel

.cube-face.--bottom

Bottom face panel

.btn-3d

🔘 Springy 3D button that physically presses down when clicked

Example

<button class="btn-3d">Press Me</button>

.btn-3d.btn-3d--cyan

Electric cyan 3D spring button

.image-stack-3d

🃏 3D card deck that fans out across your screen when hovered

.stack-item.--back

Back photo in the fan deck

.stack-item.--middle

Middle photo in the fan deck

.stack-item.--front

Front photo in the fan deck

.carousel-3d

🎡 3D rotating carousel that loops smoothly

.carousel-3d-container

Inner rotating ring

.carousel-3d-item

Individual item along the 3D ring

Retro & Time Machine Classes

Authentic recreations of early web UI patterns — Windows 95, CRT monitors, Winamp, GeoCities — updated for modern GPU performance.

Class	Description
`.window-95`	🪟 Authentic Windows 95 dialog window with title bar and buttons
`.window-titlebar`	Windows 95 blue header bar
`.window-title`	Title text inside the Windows 95 bar
`.window-buttons`	Minimize, maximize, and close buttons container
`.win-btn`	Classic beveled square button
`.win-btn.win-close`	Red × close window button
`.window-content`	Inner content area of the window
`.crt-screen`	📺 Curved green phosphor CRT computer monitor
`.crt-scanlines`	Authentic retro scanlines overlay
`.crt-flicker`	Subtle retro monitor flicker effect
`.crt--green`	Classic green phosphor color variant
`.crt--amber`	Amber/orange phosphor CRT variant
`.winamp-player`	Classic 2005 Winamp media player skin UI shell
`.winamp-display`	LED-style song title display bar inside Winamp
`.winamp-eq`	Equalizer bar group container
`.visitor-counter`	Retro 90s LED visitor counter badge
`.counter-digits`	Monospace LED digit display for visitor counter
`.site-retro`	Authentic 1999 GeoCities-era homepage container
`.retro-header`	Retro site top header bar
`.retro-nav`	Horizontal navigation bar for retro sites
`.retro-footer`	Footer bar for retro personal homepage
`.polaroid-stack`	Scattered polaroid photo gallery with hover focus
`.polaroid`	Individual polaroid photo frame with white border and handwritten font
`.polaroid.--rotate-left`	Slight CCW rotation for natural scatter
`.polaroid.--rotate-right`	Slight CW rotation for natural scatter
`.polaroid.--on-top`	Center/top elevated polaroid (no rotation)
`.film-strip`	Horizontal cinema film reel with perforated border track
`.canvas`	Photoshop-like HTML canvas context with isolation
`.canvas-landscape`	16:9 landscape aspect ratio for canvas
`.canvas-portrait`	9:16 portrait aspect ratio for canvas
`.layer-back`	Background layer (z-index: 1) in canvas sandwich
`.layer-mid`	Midground focal layer (z-index: 2)
`.layer-front`	Foreground sparkle / detail layer (z-index: 3)
`.blend-multiply`	mix-blend-mode: multiply — shadows, vintage paper
`.blend-screen`	mix-blend-mode: screen — light leaks, sparkles
`.blend-overlay`	mix-blend-mode: overlay — intense contrast fusion

Aesthetic Themes

Apply an entire aesthetic world with a single class. Themes override color tokens, typography, and border styles in scope.

.theme-cyberpunk

High voltage neon cyan/magenta grid on deep void black

Example

<div class="theme-cyberpunk p-6"><h2 class="text-neon">NEO TOKYO</h2></div>

.theme-cottagecore

Earthy olive green tones, soft rounded warm cards

.theme-dark-academia

Vintage parchment beige, espresso borders, serif aesthetic

.theme-clean-girl

Matte minimalist neutral palette, butter shadows

.theme-y2k

Bubblegum chrome pink, holographic rainbow shimmer

Modifier System

BEM-style --modifier classes that extend base component behavior when combined.

Modifier	Used With	Effect
`.--sm`	.vibe-btn, .pill-tab, .vibe-badge	Compact/small size variant
`.--lg`	.vibe-btn, .vibe-card	Large size variant
`.--neon`	.vibe-badge, .marquee, .blink	Cyan neon glow variant
`.--sunset`	.text-gradient, .vibe-badge	Warm orange/gold gradient variant
`.--ocean`	.text-gradient	Teal deep sea gradient variant
`.--rainbow`	.text-gradient	Hue-rotating rainbow gradient
`.--mesh`	.bg-gradient	Layered mesh texture background
`.--pause-hover`	.marquee	Pause animation on hover
`.--cyan`	.btn-3d	Cyan drop extrusion on 3D button
`.--green`	.crt-screen	Phosphor green CRT color mode
`.--amber`	.crt-screen	Amber phosphor CRT color mode
`.--rotate-left`	.polaroid	Slight CCW natural scatter rotation
`.--rotate-right`	.polaroid	Slight CW natural scatter rotation
`.--on-top`	.polaroid	Center elevated polaroid (no rotation)
`.--float-slow/medium/fast`	.particle	Float animation speed for particles
`.--spin`	.particle	Continuous 360° rotation
`.--orbit`	.particle	Elliptical orbit animation
`.--twinkle-1/2/3`	.star	Varying speed twinkle cycles
`.--page1/2/3`	.page	Book page position (stagger offset)
`.--front/back/left/right/top/bottom`	.cube-face	3D cube face position
`.--back/.--middle/.--front`	.stack-item	Fan deck card layer position

Try in Playground Component Library →Class Cheatsheet ⚡ →Starter Templates →