Live, auto-updating repository dashboard—celebrating code, community, and classical design.
| Stat | Live Badge | Description |
|---|---|---|
| ⭐ Stars |  |
Number of users who starred this repository |
| 🍴 Forks |  |
Times this repo was forked |
| 🐞 Open Issues |  |
Active issues for improvement or bug fixes |
| 👥 Contributors |  |
People who contributed code |
| 🕒 Last Commit |  |
Most recent update |
| 📦 Repo Size |  |
Total repository size |
| 📝 License |  |
MIT open source license |
| 💎 Top Language |  |
Primary programming language |
- Created: 2025-10-06
- Current Version:
- Main Language:
- Owner: @wecoded-dev
- License:
Made with 👑 Royal CSS & Classical Inspiration
This documentation provides a comprehensive and deeply detailed explanation of the Classic CSS Framework and its components based on the provided source code. The framework is a masterpiece collection of ultra-professional, classical CSS modules, each tailored for supreme design excellence and modern usability across UI elements.
- Overview
- Core Principles
- Component Modules
- Global Design Tokens
- Responsive Design
- Dark Mode
- Accessibility
- Print Styles
- Utility Classes
- Animation Classes
Classic CSS is a modular CSS framework bringing classical elegance and modern power to web UI design. It incorporates historical art, architectural inspiration, and legacy color palettes for cards, buttons, forms, tables, progress bars, alerts, badges, sliders, and testimonials, each featuring advanced gradients, shadows, typography, and responsive design.
<!-- Main CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/Classic.css">
<!-- Components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/alerts.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/badges.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/buttons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/cards.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/check-&-radio.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/forms.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/input.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/progress.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/sliders.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/tables.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/testimonials.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wecoded-dev/Classic-CSS/text.css">
- Classical Color Palettes: Inspired by historical eras and art, with gradients and museum-grade shades.
- Sophisticated Shadows: Deep, multi-layered shadows evoke depth and luxury.
- Advanced Typography: Carefully chosen font families for elegance and readability.
- Responsive Architecture: Designed to scale gracefully across device sizes.
- Theme & Variant Support: Historical era variants, metallics, and minimal/maximal options.
- Accessibility: Motion reduction, high contrast, and semantic structure.
- Print Perfection: Styles for optimal print output.
File: cards.css
.card— Base card container.- Variants:
.card-renaissance,.card-baroque,.card-neoclassical,.card-empire - Content:
.card-title,.card-subtitle,.card-text,.card-body,.card-actions - Images:
.card-img-masterpiece,.card-img-renaissance,.card-img-baroque,.card-img-gallery - Gallery frame:
.card-gallery-frame - Animation:
.card-animate-masterpiece,.card-animate-classical,.card-animate-glow,.card-parchment-aged
- Gradients & Textures: Gold, parchment, marble, velvet backgrounds.
- Borders: Gold, silver, wood, velvet border-image gradients.
- Shadows: Classic, elegant, museum.
- Typography: Serif, sans, script fonts.
- Animations: Fade-in, entrance, glow, parchment aging.
- Responsive Spacing: Adapts padding and font-size for device width.
- Utility Classes: Embossed, debossed, gold-foil, textured backgrounds.
File: buttons.css
.btn— Base button.- Variants:
.btn-renaissance,.btn-baroque,.btn-victorian,.btn-art-nouveau,.btn-art-deco,.btn-gold,.btn-silver,.btn-bronze,.btn-platinum,.btn-rose-gold - Sizing:
.btn-sm,.btn-md,.btn-lg,.btn-xl - Outlines:
.btn-outline,.btn-outline-gold,.btn-outline-silver - Ghosts:
.btn-ghost - Embossed/Debossed:
.btn-embossed,.btn-debossed - Icon:
.btn-icon,.btn-icon-only - Groups:
.btn-group - Animation:
.btn-ripple,.btn-pulse,.btn-glow,.btn-float,.btn-spin,.btn-typewriter
- Gradients: Gold, silver, bronze, historical eras.
- Shadows: Classic, elegant, embossed, debossed, glow.
- Typography: Serif, sans, script, monospace fonts.
- States: Disabled, loading, success, warning, error.
- Icon Integration: Icon buttons, hover transforms.
- Groups: Inline and responsive vertical button groups.
- Animations: Ripple, pulse, glow, float, spin, typewriter effect.
File: forms.css
- Container:
.form-container - Groups:
.form-group - Labels:
.form-label - Inputs:
.form-input,.form-input-renaissance,.form-input-baroque,.form-input-gold,.form-input-silver - Textarea:
.form-textarea - Checkbox/Radio:
.form-check,.form-check-input,.form-check-box,.form-check-radio - Select:
.form-select - Range:
.form-range - Actions:
.form-actions,.form-btn,.form-btn-primary,.form-btn-secondary - Feedback:
.form-feedback,.form-feedback.valid,.form-feedback.invalid - Layout:
.form-row,.form-col-2,.form-col-3,.form-inline - Animation:
.form-animate-focus,.form-animate-glow,.form-floating-label
- Color Palettes: Parchment, ivory, velvet, marble, gold-leaf.
- Borders: Gold, silver, bronze, wood.
- Shadows: Classic, elegant, embossed.
- Typography: Serif, sans, script, monospace.
- Validation States:
.valid,.invalidclasses for inputs and feedback. - Layout: Grid rows, columns, inline forms.
- Animations: Field focus, label float, pulse glow.
- Variants: Renaissance, baroque, gold, silver.
- Accessibility: Reduced motion, high contrast.
- Utility Classes: Textured, embossed, debossed, gold-foil.
File: tables.css
- Container:
.table-container - Base:
.table - Variants:
.table-renaissance,.table-baroque,.table-gold,.table-silver - Striped:
.table-striped - Hover:
.table-hover - Bordered:
.table-bordered - Borderless:
.table-borderless - Responsive:
.table-responsive,.table-mobile-collapse - Caption:
.table-caption - Sizing:
.table-sm,.table-lg,.table-xl - Alignment:
.table-text-center,.table-text-right,.table-text-left - Animation:
.table-animate-rows,.table-highlight-row,.table-sort-glow,.table-pulse
- Color Palettes: Parchment, ivory, velvet, marble, gold-leaf, silver.
- Borders: Gold, silver, bronze, wood, velvet.
- Shadows: Classic, elegant, museum.
- Typography: Serif, sans, script, monospace.
- Variants: Historical era themes.
- Striped/Hover: Odd row highlighting, row hover.
- Interactive: Sortable headers, action buttons, pagination.
- Responsive: Collapses to blocks on mobile, sticky headers.
- Animations: Row enter, highlight, sort glow, pulse.
- Utility Classes: Textured, embossed, gold-foil.
File: progress.css
- Container:
.progress-container-royal - Bar:
.progress-royal,.progress-royal-bar - Historical:
.progress-egyptian,.progress-greek,.progress-roman,.progress-medieval - Artist:
.progress-van-gogh,.progress-rembrandt,.progress-monet - Circular:
.progress-circular-royal,.progress-circular-royal-inner,.progress-circular-royal-track,.progress-circular-royal-overlay,.progress-circular-royal-content - Stepped:
.progress-stepped-royal,.progress-step-royal,.progress-step-royal-label - Label:
.progress-label-royal,.progress-title-royal,.progress-percentage-royal,.progress-caption-royal - Animation:
.progress-step-royal.active
- Color Palettes: Antique parchment, royal ivory, gilded velvet, gold gradients.
- Shadows: Palace, cathedral, golden.
- Typography: Palace, royal, illuminated, manuscript, Latin.
- Progress Types: Linear, circular, stepped.
- Historical/Artist Variants: Egyptian, Greek, Roman, Van Gogh, Rembrandt, Monet.
- Animations: Bar slide, circular glow, shine, step pulse, orbit, crown sparkle.
- Responsive: Bar and circular size adapts.
- Utility Classes: Print perfection.
File: alerts.css
- Container:
.alert-container-royal - Base:
.alert-royal,.alert-royal-icon,.alert-royal-content,.alert-royal-title,.alert-royal-message,.alert-royal-actions - Types:
.alert-royal-success,.alert-royal-warning,.alert-royal-error,.alert-royal-info - Historical:
.alert-egyptian,.alert-greek,.alert-roman,.alert-renaissance - Sizing:
.alert-royal-sm,.alert-royal-lg,.alert-royal-xl - Buttons:
.alert-btn-royal,.alert-btn-royal-primary,.alert-btn-royal-secondary,.alert-btn-royal-ghost - Animation:
.alert-animate-glow,.alert-animate-border-flow,.alert-animate-float,.alert-animate-shake - Dismissible:
.alert-royal-dismissible,.alert-royal-close - Banner/Toast/Floating:
.alert-royal-banner,.alert-royal-toast,.alert-royal-floating
- Color Palettes: Royal parchment, imperial ivory, gold, silver, bronze, illuminated.
- Gradients: Success, warning, error, info, royal gold.
- Shadows: Palace, cathedral, golden.
- Typography: Palace, royal, illuminated, manuscript, Latin.
- Animations: Entrance, pulse, glow, border flow, float, shake.
- Variants: Dismissible, banner, toast, floating.
- Accessibility: Motion reduction, high contrast.
- Print Perfection: Optimized print output.
File: badges.css
- Base:
.badge-royal - Types:
.badge-royal-success,.badge-royal-warning,.badge-royal-error,.badge-royal-info - Historical:
.badge-egyptian,.badge-greek,.badge-roman,.badge-medieval,.badge-renaissance,.badge-baroque - Sizing:
.badge-royal-sm,.badge-royal-md,.badge-royal-lg,.badge-royal-xl - Shapes:
.badge-royal-pill,.badge-royal-square - Styles:
.badge-royal-outline,.badge-royal-ghost - Icon:
.badge-royal-with-icon,.badge-royal-icon - Status:
.badge-royal-status,.badge-royal-status-offline,.badge-royal-status-warning,.badge-royal-status-error - Animation:
.badge-animate-glow,.badge-animate-float,.badge-animate-spin,.badge-animate-pulse - Grouping:
.badge-group-royal,.badge-group-stacked,.badge-group-justified - Ribbon/Crown/Seal:
.badge-royal-ribbon,.badge-royal-crown,.badge-royal-seal,.badge-royal-seal-lg,.badge-royal-seal-xl - Counter:
.badge-royal-counter[data-count]
- Color Palettes: Royal parchment, imperial ivory, gold, silver, bronze, illuminated.
- Gradients: Success, warning, error, info, royal gold.
- Shadows: Palace, cathedral, golden.
- Typography: Palace, royal, illuminated, manuscript, Latin.
- Shapes: Pill, square, outline, ghost.
- Icon Integration: Animated sparkle.
- Status Indicators: Pulse for online, color for warning/error.
- Counter: Animated number badge.
- Animations: Entrance, glow, float, spin, pulse.
- Group Layouts: Inline/stacked/justified badge groups.
- Responsive: Sizing adapts for device width.
- Print Styles: Optimized output.
File: sliders.css
- Container:
.slider-container-royal - Base:
.slider-royal - Types:
.slider-egyptian,.slider-greek,.slider-roman,.slider-renaissance,.slider-baroque - Sizing:
.slider-royal-sm,.slider-royal-lg,.slider-royal-xl - Range Track:
.slider-royal-range,.slider-royal-range-fill - Vertical:
.slider-royal-vertical - Marks:
.slider-royal-marks,.slider-marks-container,.slider-mark,.slider-mark.active - Animation:
.slider-animate-glow,.slider-animate-thumb-pulse,.slider-animate-thumb-orbit - Labels:
.slider-label-royal,.slider-title-royal,.slider-value-royal,.slider-caption-royal - Grouping:
.slider-group-royal,.slider-group-horizontal,.slider-group-stacked - Range Slider:
.range-slider-royal,.range-slider-track,.range-slider-fill,.range-slider-thumb
- Color Palettes: Royal parchment, imperial ivory, gold, silver, bronze, illuminated.
- Gradients: Gold, silver, bronze, historical era tracks.
- Shadows: Palace, cathedral, golden.
- Typography: Palace, royal, illuminated, manuscript, Latin.
- Thumb & Track: Advanced styling and animation for thumb, range fill.
- Marks: Custom marks with active state.
- Animations: Entrance, thumb pulse, orbit, range fill glow.
- Labeling: Custom label and captions.
- Grouping: Horizontal, vertical, stacked.
- Accessibility: Motion reduction, high contrast.
- Print Styles: Optimized output.
File: testimonials.css
- Container:
.testimonials-container-royal - Card:
.testimonial-royal - Content:
.testimonial-royal-content,.testimonial-royal-quote,.testimonial-royal-author,.testimonial-royal-avatar,.testimonial-royal-info,.testimonial-royal-name,.testimonial-royal-title,.testimonial-royal-company,.testimonial-royal-rating,.testimonial-royal-star - Historical:
.testimonial-egyptian,.testimonial-greek,.testimonial-roman,.testimonial-renaissance - Sizing:
.testimonial-royal-sm,.testimonial-royal-lg,.testimonial-royal-xl - Variants:
.testimonial-royal-quote-only,.testimonial-royal-minimal,.testimonial-royal-featured - Grid:
.testimonials-grid-royal,.testimonials-grid-royal-compact,.testimonials-grid-royal-grand - Carousel:
.testimonials-carousel-royal,.testimonials-carousel-track,.testimonial-carousel-item,.testimonials-carousel-nav,.testimonial-carousel-btn,.testimonial-carousel-dots,.testimonial-carousel-dot - Animation:
.testimonial-animate-float,.testimonial-animate-glow,.testimonial-animate-stagger
- Color Palettes: Royal parchment, imperial ivory, gold, silver, bronze, illuminated.
- Gradients: Accent gold, silver, bronze, historical era themes.
- Shadows: Palace, cathedral, golden.
- Typography: Palace, royal, illuminated, manuscript, Latin.
- Content Structure: Quote, author, avatar, name, title, company, rating stars.
- Animations: Entrance, avatar orbit, star twinkle, quote float, glow, staggered entrance.
- Grid & Carousel: Testimonial grid layouts, carousel with navigation and dots.
- Variants: Minimal, featured, quote-only.
- Accessibility: Motion reduction, high contrast.
- Print Styles: Optimized output.
All modules use custom properties (:root variables) for consistent theming:
- Color Palettes: Museum-grade, historical, metallic, illuminated.
- Gradients: Gold, silver, bronze, wood, velvet, parchment, artist palettes.
- Shadows: Classic, elegant, palace, cathedral, golden, museum.
- Typography: Serif, sans, illuminated, manuscript, Latin.
- Border Radius: Gentle, classic, grand, ornate, pill.
- Animation Timing: Multiple cubic-bezier themes for smooth transitions.
- Spacing: Padding and margin scales.
Each module includes media queries for:
- 1200px, 768px, 480px breakpoints: Adjusts padding, font-size, layout.
- Table collapse: Converts tables into block elements for mobile.
- Card, badge, button, testimonial, slider sizes: Shrinks appropriately for small screens.
- prefers-color-scheme: dark media queries provide:
- Background colors switch to deep velvet, parchment, or marble.
- Text and border colors adjust for legibility.
- Accent colors re-tinted for optimal contrast.
- prefers-reduced-motion: Removes transitions and animations on supported elements.
- prefers-contrast: high: Increases border widths, contrast for key interactive elements.
- Focus States: Outlines and highlights for keyboard navigation.
- Semantic Structure: Consistent semantic HTML for all interactive and content elements.
- @media print rules for all modules:
- Colors revert to black/white for clarity.
- Borders solid black.
- Shadows and backgrounds removed for minimalism.
- Textured backgrounds:
.texturedclasses for cards, forms, tables. - Embossed/Debossed:
.embossed,.debossedclasses for elevated effect. - Gold Foil:
.gold-foilclasses for metallic overlay. - Custom Properties: Inline style overrides via custom properties.
- Animation classes are available for all modules, e.g.:
.animate-float,.animate-glow,.animate-spin,.animate-stagger,.animate-border-flow,.animate-pulse- Keyframes provide entrance, glow, float, shake, typewriter, highlight, and more.
- Museum-grade backgrounds:
--input-bg-royal-parchment,--input-bg-imperial-ivory,--input-bg-gilded-velvet,--input-bg-carrara-marble,--input-bg-vermeil-gold,--input-bg-sterling-silver,--input-bg-patina-bronze,--input-bg-illuminated - Stateful accent gradients:
--input-accent-gold,--input-accent-silver,--input-accent-bronze - History-themed gradients:
--input-egyptian,--input-greek,--input-roman,--input-medieval,--input-renaissance,--input-baroque
- Palace, cathedral, and golden shadow presets for layered effects:
--input-shadow-palace,--input-shadow-cathedral,--input-shadow-golden
- Various classical font families:
--input-font-palace,--input-font-royal,--input-font-illuminated,--input-font-manuscript,--input-font-latin
- Multiple ease presets for natural movement:
--ease-royal,--ease-crown,--ease-throne,--ease-scepter,--ease-orb,--ease-coronation
.input-container-royal: Large, bordered, shadowed container for groups of inputs, with classical background SVG parchment pattern and glow overlays.
.input-royal: Main input style. Includes background gradients, "engraved" border, deep shadows, classical font, animated entrance and focus effects.- Placeholder uses a calligraphic font and subdued color.
- Gold border and glow, animated border effect on focus.
- Uses a pseudo-element for the glowing animated border.
.input-royal-success,.input-royal-warning,.input-royal-error: Change border/background for "success", "warning", and "error" states. On focus, border and glow use state color.
.input-egyptian,.input-greek,.input-roman,.input-renaissance: Themed backgrounds, borders, and fonts for historical eras.
.input-royal-sm,.input-royal-lg,.input-royal-xl: Padding, font size, border-radius, and sometimes border thickness are adjusted for small, large, and extra-large inputs.
.input-royal-outline: Transparent background, solid border..input-royal-ghost: Subtle colored background, faint border, blurred background, minimal style..input-royal-pill: Fully rounded, pill-shaped input.
.input-group-royal: Flex container for input + icon..input-icon-royal: Absolutely positioned icon (usually left), color and scale animate on input focus..input-royal-with-icon: Extra left padding for icon space..input-group-royal-right: For right-aligned icons.
.textarea-royal,.textarea-royal-lg,.textarea-royal-xl: Styled multi-line text fields, with size variants.
.select-royal: Custom dropdown arrow using SVG, styled focus state.
.input-group-royal-stacked: Vertical stack of inputs..input-group-royal-horizontal: Horizontal arrangement (becomes vertical on smaller screens).
.input-animate-glow: Infinite border glow on focus..input-animate-success: Animated background for success state..input-animate-float: Slight float and glow on focus.
.input-label-royal: Uppercase, bold, decorated label with animated gold underline on focus..input-helper-royal: Italic, subtle helper text..input-counter-royal: Character counter, absolutely positioned.
.input-floating-royal: Label floats above input on focus or when value is present, using transitions and background gradients.
- Padding, font size, and spacing scale down at 1200px, 768px, and 480px breakpoints.
- Icons and labels scale for mobile.
- Adapts backgrounds, borders, font colors for dark themes using
prefers-color-scheme: dark.
- Disables transitions/animations for users with reduced motion enabled.
- Increases border thickness for high-contrast mode.
- Print styles invert to black/white for clarity.
- Provides a complete, historically-inspired typography system.
- Includes color and gradient palettes, heading/body/list styles, font families, scale, animation, and layout utilities.
- Museum-grade text colors:
--text-gold-primary,--text-gold-secondary,--text-gold-accent,--text-velvet-primary,--text-velvet-secondary,--text-parchment-primary,--text-parchment-secondary,--text-ink-primary,--text-ink-secondary,--text-ink-muted - Gold, silver, bronze, and historical gradients for text.
- Shadows for royal, golden, and embossed effects.
- Classical serif, display, script, monospace, Latin, and illuminated fonts.
- XS to 9XL variables for fine-grained font sizing.
- Same set of custom timing functions as input.css for matching animation feel.
.text-container-royal: Main container for text blocks, with parchment background, deep borders, shadows, padding, and blurred background.
.h1-royal,.h2-royal,.h3-royal,.h4-royal,.h5-royal,.h6-royal: Large, classical type, strong shadow, animated entrance..h1-royalfeatures an animated gold gradient underline.
.p-royal: Base paragraph style..p-royal-lg,.p-royal-sm: Large/small paragraph variants..lead-royal: Large, subtle, secondary-colored lead text.
.text-gold,.text-silver,.text-bronze: Gold/silver/bronze gradient text, usingbackground-clip: text..text-embossed: Embossed effect with gradient and shadow..text-illuminated: Blackletter/Unifraktur font, glowing gold..text-script: Script font, slightly larger..text-monospace: Monospaced font, subtle background and border.
.text-egyptian: Display font, gold gradient, "Eye of Horus" prefix..text-greek: Italic, gradient, Latin font..text-roman: Bold, deep red shadows, display font..text-renaissance: Script font, larger, gentle shadow..text-baroque: Illuminated font, gold glow.
.text-xsthrough.text-9xlset font size by scale.
.text-italic,.text-underline(with gold underline),.text-uppercase,.text-lowercase,.text-capitalize.text-center,.text-right,.text-left,.text-justify
.text-thin,.text-light,.text-normal,.text-medium,.text-semibold,.text-bold,.text-extrabold,.text-black
.text-columns-2,.text-columns-3: Multi-column text with column rules..text-indent: 2rem indent first line..text-dropcap: Large illuminated drop cap for first letter.
.list-royal: Unordered list, no native bullets, custom gold triangle marker..list-item-royal: List item with padding, font, gold marker..list-royal-ordered: Ordered list with gold gradient number markers.
- Keyframes for fade-in (
textEntrance), animated underline, text glow, floating, and reveal. .text-animate-glow: Animated shadow/glow..text-animate-float: Floating effect..text-animate-reveal: Reveal animation usingclip-path..text-animate-stagger: Staggered entrance for children.
This documentation covers every detail in exactness and completeness based on the source files, providing a 100% correct and deeply analyzed guide to using the Classic CSS Framework.