CSS Tags
Search

Theme
Theme creator

Tune semantic inputs, preview them live, then export a trailing CSS layer.

Starting points
Color
Shape and spacing
Typography
Export theme

Load the generated file after css-tags.

Using documentation defaults.
GitHub

Getting Started

Get your project running with CSS Tags in three simple steps.

Get your project running with CSS Tags in three simple steps.

1. Include the CSS

Add the stylesheet to the <head> of your HTML file.

<!-- Published npm package, pinned for predictable output -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-tags@0.1.0/index.css">

Other installation methods:

Download

For production use, host the file yourself:

  1. Download the latest index.css file
  2. Place it in your project’s CSS directory
  3. Link to it: <link rel="stylesheet" href="your-css-folder/index.css">

Install from npm

Install the published package when your project has a build step:

Terminal window
npm install css-tags
@import "css-tags";

2. Write Semantic HTML

Use semantic HTML first, then add a custom tag, class, or data-* host where the component needs one. The styles are applied automatically.

<layout-page>
  <header slot="header">...</header>
  <main slot="main">
    <layout-center max-width="65ch">
      <h1>My Awesome Article</h1>
      <p>This content is perfectly centered and readable.</p>
    </layout-center>
  </main>
</layout-page>

3. Customize Your Theme (Optional)

Create a <style> tag or a local CSS file to override the default design tokens. The entire design system will adapt instantly.

:root {
  --primary-h: 280;      /* Changes the theme to purple */
  --font-family-sans: 'Inter', sans-serif;
  --radius-md: 0.75rem;  /* Makes corners more rounded */
  --space-md: 1.25rem;   /* Increases base spacing */
}

Your First Component

Let’s create a complete page to see CSS Tags in action:

Your first CSS Tags card

This is the rendered result of the HTML below.
Hello, CSS Tags!

This card is styled by the shipped stylesheet and responds to its container.

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First CSS Tags Page</title>


  <!-- Add CSS Tags -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-tags@0.1.0/index.css">
</head>
<body>


  <layout-center max-width="70ch">
    <card>
      <card-body>
        <h1>Hello, CSS Tags!</h1>
        <p>This card is automatically styled with responsive design and theme support.</p>
        <layout-cluster gap="var(--space-sm)">
          <button class="form-button btn-primary">Get Started</button>
          <button>Learn More</button>
        </layout-cluster>
      </card-body>
    </card>
  </layout-center>


</body>
</html>

What Just Happened?

Let’s break down what makes CSS Tags special:

  1. Semantic Tags: <card>, <card-body>, and <layout-center> are custom HTML tags that describe your content’s structure, not its appearance.

  2. Design Tokens: var(--space-lg) and var(--accent) are CSS custom properties that create a consistent design system.

  3. Automatic Theming: The page automatically adapts to your system’s light or dark mode preference.

  4. Responsive by Default: All components are mobile-friendly without additional configuration.

Core Concepts

Declarative Styling

Control appearance through HTML attributes using the modern CSS attr() function:

<!-- Size, color, and spacing controlled by attributes -->
<text size="lg" weight="bold" color="accent">Large bold text</text>


<!-- Layout adapts to container size -->
<layout-grid min-item-size="300px">
  <card>Item 1</card>
  <card>Item 2</card>
  <card>Item 3</card>
</layout-grid>

Design Token System

Everything uses CSS custom properties for consistent theming:

/* Change one value, update entire theme */
:root {
  --primary-h: 280; /* Purple theme */
  --space-md: 1.25rem; /* Larger spacing */
}

Container Queries

Components respond to their container, not viewport:

<!-- Card adapts when container is 400px+ wide -->
<card>
  <card-media>...</card-media>
  <card-body>...</card-body>
</card>

Auto-Contrast

Text colors automatically adjust for readability:

<!-- Text stays readable on any background -->
<text contrast>Always readable text</text>

Using Design Tokens

CSS Tags comes with a complete design token system:

Spacing

<box p="var(--space-md)">Padded content</box>
<box m="var(--space-lg)">Content with margin</box>

Colors

<button class="form-button btn-primary">Accent Button</button>
<button class="form-button btn-success">Success Button</button>
<button class="form-button btn-error">Error Button</button>

Typography

<text size="lg">Large text</text>
<text size="sm" weight="bold">Small bold text</text>

Layout Components

CSS Tags includes powerful layout primitives:

Resize the browser or documentation sidebar to see the grid adapt to the space available.

Responsive grid

No media query or JavaScript required.
Analytics
12.4k visits
Orders
318 today
Conversion
4.8 percent

Center Content

<layout-center max-width="60ch">
  <p>Centered content with max width for readability.</p>
</layout-center>

Responsive Grid

<layout-grid min-item-size="250px" gap="var(--space-md)">
  <card>Card 1</card>
  <card>Card 2</card>
  <card>Card 3</card>
</layout-grid>

Vertical Stack

<layout-stack gap="var(--space-md)">
  <h1>Title</h1>
  <p>Description</p>
  <button>Action</button>
</layout-stack>

Flexible Row

<layout-cluster gap="var(--space-sm)">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</layout-cluster>
<layout-sidebar side-width="300px">
  <aside slot="aside">Sidebar content</aside>
  <main>Main content</main>
</layout-sidebar>

UI Components

The previews below use the semantic state attributes that the CSS already understands.

Feedback and status

Status changes both the surface and contrast text.
Changes saved
Your profile is now up to date.
ReadyNeeds reviewDraft

Cards

<card>
  <card-media><img src="image.jpg" alt="Card image"></card-media>
  <card-body>
    <h3>Card Title</h3>
    <p>Card content...</p>
    <button>Action</button>
  </card-body>
</card>

Alerts

<alert-message status="success" role="status">Saved successfully.</alert-message>
<div data-alert status="warning" role="alert">Payment needs attention.</div>
<div class="alert alert-error" role="alert">The upload failed.</div>

Badges

<badge status="success">New</badge>
<badge status="warning">Beta</badge>

Customization

Override design tokens to match your brand:

Brand Colors

:root {
  --primary-h: 240;    /* Blue primary */
  --success-h: 160;    /* Green success */
  --error-h: 355;      /* Red error */
}

Typography

:root {
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
}

Spacing & Borders

:root {
  --space-md: 1.25rem;   /* Base spacing unit */
  --radius-md: 0.75rem;  /* Base border radius */
  --shadow-md: 0 4px 6px oklch(0% 0% 0% / 0.1);
}

Next Steps

Browser Support

The complete theme supports Chrome and Edge 119+, Firefox 128+, and Safari 16.5+. Newer platform features remain progressive enhancements. See the browser support contract for the baseline, fallback expectations, and testing policy.