ZyroxCSS Documentation

A modern, utility-first CSS framework built for rapid UI development and modern design aesthetics.

ZyroxCSS provides lightweight, customizable components using CSS custom properties for effortless theme adjustments and responsive layouts.

Accordion

Build vertically collapsing accordions for presenting content in compact spaces.

<div class="accordion">
  <div class="accordion__header">Header</div>
  <div class="accordion__body">Content</div>
</div>

Alerts

Provide contextual feedback messages for typical user actions.

<div class="alert alert--success">Success</div>
<div class="alert alert--danger">Error message</div>
<div class="alert alert--warning">Warning message</div>
<div class="alert alert--info">Info message</div>

Avatar

Display user profile pictures or icons in various sizes and styles.

<img src="img.jpg" alt="Avatar" class="avatar">
<img src="img.jpg" alt="Avatar Large" class="avatar avatar--lg">

Badges

Small status indicators for highlighting metadata, counts, or categories.

<span class="badge badge--primary">Primary</span>
<span class="badge badge--secondary">Secondary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--danger">Danger</span>

Buttons

Interactive button styles for actions, forms, and navigation controls.

Variants

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--danger">Danger</button>
<button class="btn btn--warning">Warning</button>
<button class="btn btn--outline">Outline</button>
<button class="btn btn--ghost">Ghost</button>

Sizes

<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary">Default</button>
<button class="btn btn--primary btn--lg">Large</button>
<button class="btn btn--primary btn--xl">Extra Large</button>

States & Modifiers

<button class="btn btn--primary btn--loading"><span class="btn__content">Loading</span></button>
<button class="btn btn--primary" disabled>Disabled</button>
<button class="btn btn--primary btn--icon">&plus;</button>

Button Groups

<div class="btn-group">
  <button class="btn btn--primary">Left</button>
  <button class="btn btn--primary">Middle</button>
  <button class="btn btn--primary">Right</button>
</div>

Cards

Flexible containers for organizing grouped information and media elements.

<div class="card">
  <div class="card-body">Content</div>
</div>

Carousel

A slideshow component for cycling through elements like images or text blocks.

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">Item</div>
  </div>
</div>

Code Block

Preformatted code presentation with dark themes and overflow protection.

console.log("Hello World");

<pre class="code-block"><code>console.log("Hello World");</code></pre>

Dropdowns

Toggleable contextual overlays for displaying lists of links or actions.

<div class="dropdown">
  <button type="button" class="dropdown-toggle btn btn--primary">Menu</button>
</div>

File Uploader

Custom dropzone areas for file selection and drag-and-drop support.

<div class="form-file">
  <input type="file" id="file">
  <label for="file">Drag & Drop</label>
</div>

Forms

Form controls and layouts for user input processing.

Basic Inputs

<div class="form-group">
  <label class="form-label form-label--required">Username</label>
  <input type="text" class="form-control" placeholder="Enter username">
  <span class="form-text">Choose a unique username.</span>
</div>

<textarea class="form-control form-textarea" placeholder="Tell us about yourself"></textarea>

<select class="form-select">
  <option>Option 1</option>
</select>

Form States

<input type="text" class="form-control form-control--error" value="Invalid input">
<span class="form-text form-text--error">This field is required.</span>

<input type="text" class="form-control form-control--success" value="Valid input">
<span class="form-text form-text--success">Looks good!</span>

Checkboxes, Radios, and Switches

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check1">
  <label class="form-check-label" for="check1">Default Checkbox</label>
</div>

<div class="form-check form-check--switch">
  <input type="checkbox" id="switch1">
  <label class="form-check-label" for="switch1">Toggle Switch</label>
</div>

Floating Labels

<div class="form-floating">
  <input type="text" class="form-control" id="floatInput" placeholder="Name">
  <label for="floatInput">Your Name</label>
</div>

Glassmorphism

Frosted glass visual effects with backdrop blur filters.

<div class="glass">Glass Container</div>

Modals

Dialog boxes for critical user interactions or extra information displays.

<div class="modal">
  <div class="modal-content">Modal Content</div>
</div>

Navbar

Header navigation controls with support for brand logos and action links.

<nav class="navbar">
  <div class="container">
    <a href="#" class="brand">Brand</a>
    <ul class="nav-menu">
      <li><a href="#" class="nav-link is-active">Home</a></li>
      <li><a href="#" class="nav-link">Features</a></li>
    </ul>
  </div>
</nav>

Transparent Variant

<nav class="navbar navbar--transparent">
  <div class="container">
    <a href="#" class="brand">Transparent</a>
    <ul class="nav-menu">
      <li><a href="#" class="nav-link is-active">Home</a></li>
      <li><a href="#" class="nav-link">About</a></li>
    </ul>
  </div>
</nav>

Pagination

Sequence navigation for paginated dataset viewing.

<div class="pagination">
  <div class="page-item">1</div>
  <div class="page-item">2</div>
  <div class="page-item">3</div>
</div>

Progress Bars

Visual indicators representing task completion status.

<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

Sidebar

Vertical sidebar layout navigation for dashboard interfaces.

<nav id="sidebar" class="sidebar">
  <a href="#" class="sidebar__item">Sidebar Menu</a>
</nav>

Skeletons

Placeholder loaders for rendering wireframe states during data loading.

<div class="skeleton" style="height: 24px;"></div>
<div class="skeleton" style="height: 16px; width: 60%;"></div>

Spinner

Animated loading indicators for background operations.

<div class="spinner"></div>

Table

Data tables with support for zebra striping and hover states.

<table class="table table--striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

Tabs

Tabbed interface elements for switching between related content panes.

<div class="tabs">
  <button class="tab-link active">Tab 1</button>
  <button class="tab-link">Tab 2</button>
</div>

Tooltips

Hoverable popups that provide contextual help or details.

<div class="tooltip">Hover Me
  <span class="tooltip-text">Tooltip Text</span>
</div>