Buttons

Various button styles for different actions.

<button>Primary</button>
<button class="outline">Outline</button>
<button class="secondary">Secondary</button>
<button class="destructive">Destructive</button>
<button class="ghost">Ghost</button>
<button class="fill">Fill</button>
<button class="fab">+</button>
<button class="fab secondary">+</button>
<button class="fab destructive">+</button>
<button class="fab outline">+</button>
<button class="fab fill">+</button>
<button class="fab ghost">+</button>
<a role="button">Link button</a>
<button role="button" class="secondary">Link button secondary</a>

Forms

Styles for inputs, textareas, selects, and floating labels.

<input type="text" placeholder="Standard Input">
<input class="fill" type="text" placeholder="Fill Input">
<select>...</select>
<select class="fill" >...</select>
<textarea placeholder="Textarea"></textarea>

<div class="floating">
  <input type="email" id="float" placeholder=" " />
  <label for="float">Floating Label</label>
</div>

 
<label  >
<input type="checkbox" name="switch" role="switch"  >
My switch
</label>
 
<fieldset>
    <legend>Personal Information</legend>
    <input type="text" placeholder="First Name">
    <input type="text" placeholder="Last Name">
    <input type="email" placeholder="Email">
    <button> Send</button>
</fieldset>

Typography

Semantic styling for all text elements.

Table

Responsive and clean tables.

Container

The .container class centers content with a max-width of 1120px.

<div class="container">
  Your content here...
</div>

Grid System

A responsive grid system using CSS Grid. Use .grid and column utilities like .cols-2, .cols-3.

<div class="grid cols-3 gap-2">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Spacing Utilities

Utilities for gaps, margins, and paddings.

/* Gap (for flex/grid) */
.gap-1, .gap-2, .gap-3, .gap-4

/* Margin */
.mt-4, .mb-4

/* Padding */
.p-4

Card / Content Block

Use <article>, <section>, or a <div class="card"> to create bordered content blocks. They all share the same base style.

This is an Article

Used for self-contained content.

My Card

<article>
  <h4>Title</h4>
  <p>Content...</p>
</article>

<div class="card">
  ...
</div>


<article>
  <header>
     <img src="https://placehold.co/600x400" alt="" /> 
    <p>Content...</p>
  </header>
  <footer>
    <p>Footer</p>
  </footer>
</article>

<div class="card">
  ...
</div>

Accordion

A simple, semantic accordion using <details> and <summary>.

<details>
  <summary>Title</summary>
  <p>Content...</p>
</details>

Dialog (Modal)

Semantic modals using the <dialog> element. Includes a fullscreen variant.

<dialog id="myDialog" class="w-400-px w-100">
    <article>
      ... 
      <footer class="flex between items-center">
        <button class="ghost" onclick="myDialog.close()">Close</button>
        <button onclick="myDialog.close()"   >Send</button>
      </footer>
    </article>
</dialog>

Dropdown

A CSS-only dropdown menu, activated on hover.

<div class="dropdown">
  <button class="dropdown-toggle">Menu</button>
  <div class="dropdown-content">
    <a class="dropdown-item">...</a>
  </div>
</div>

Flex & Sizing Utilities

A collection of utilities for flexbox layouts, sizing, and visibility.

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.between { justify-content: space-between; }

/* Sizing */
.w-full { width: 100%; }

/* Visibility */
.hidden { display: none !important; }

Responsive Visibility

Show or hide elements based on screen size using responsive utility classes.

<!-- Show only on specific breakpoints -->
<div class="visible-sm">Mobile only</div>
<div class="visible-md">Tablet only</div>
<div class="visible-lg">Desktop only</div>

<!-- Hide on specific breakpoints -->
<div class="hidden-sm">Hidden on Mobile</div>
<div class="hidden-md">Hidden on Tablet</div>
<div class="hidden-lg">Hidden on Desktop</div>

Color Utilities

Apply colors using semantic classes like .bg-primary and .text-success, or use the full palette.

<div class="bg-primary">...</div>
<p class="text-success">Success message</p>
<div class="bg-red-500 text-red-50">...</div>

Full Color Palette

<div class="shadow">...</div>
<div style="box-shadow: var(--shadow-md);">...</div>

<div class="rounded-lg">...</div>
<div class="border">...</div>

<nav class="bottom-nav visible-sm">
  <ul>
    <li><a href="/search">Search</a></li>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/account">Account</a></li>
  </ul>
</nav>