CSS Variables Showcase

This demonstration showcases the power and flexibility of CSS variables (custom properties) beyond just color management.

Info: All styling in this demo is controlled by CSS variables, making it highly maintainable and consistent.

Current CSS Variable Values

Typography

Base Font Size:

Line Height:

Heading Font:

Spacing

Spacing Unit:

Spacing Medium:

Spacing Large:

Colors

Primary:

Secondary:

Accent:

Animation/Transition

Fast:

Medium:

Slow:

Button System

All buttons are styled using CSS variables for consistent sizing, spacing, and behavior.

Button with Badge

Code Example

        .btn {

          padding: var(--spacing-small) var(--spacing-medium);

          border-radius: var(--border-radius-small);

          transition: all var(--transition-speed-fast) var(--transition-timing);

        }

        .btn-primary {

          background-color: var(--primary-color);

          color: white;

        }

Form Elements

Form inputs use variables for consistent styling and transitions.

Code Example

        input, select, textarea {

          padding: var(--spacing-small) var(--spacing-medium);

          margin-bottom: var(--spacing-medium);

          border: var(--border-width) solid #ddd;

          border-radius: var(--border-radius-small);

          transition: border-color var(--transition-speed-fast) var(--transition-timing);

        }

        input:focus {

          border-color: var(--primary-color);

          box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);

        }

Layout Components

Responsive layouts powered by CSS variables.

Grid Layout

Card 1

Card 2

Card 3

Card 4

Two Column Layout

Main Content

This is the main content area. Its width is controlled by the --content-width variable.

Sidebar

This is the sidebar. Its width is controlled by the --sidebar-width variable.

Progress Bar using Variables

Code Example

        .grid {

          display: grid;

          grid-template-columns: repeat(auto-fill, minmax(calc(var(--container-width) / 4 - var(--column-gap)), 1fr));

          gap: var(--column-gap);

        }

        @media (max-width: 768px) {

          :root {

            --base-font-size: 14px;

            --spacing-unit: 6px;

            --container-width: 100%;

          }

        }

Components & Utilities

Alerts

Success! Operation completed successfully.

Error! Something went wrong.

Tooltips

Loading Spinner

Animated Element

This card uses animation timing from CSS variables

Table with Variable Styling

Name	Email	Role
John Doe	john@example.com	Developer
Jane Smith	jane@example.com	Designer
Bob Johnson	bob@example.com	Manager

Benefits of CSS Variables

1. Global Changes with a Single Edit

Change a variable in one place, and it updates everywhere it's used across your entire site.

2. Consistent Design System

Maintain a consistent design language with predefined spacing, typography, animations, and more.

3. Simplified Theming

Create dark/light modes or multiple themes by changing a small set of variables instead of hundreds of CSS properties.