Welcome to CleanUI

A lightweight, modern CSS library inspired by iOS and macOS aesthetics. Packed with components, animations, and advanced features like form validation, sortable tables, and toast stacking.

Installation

Download the files and include them in your project:

<link rel="stylesheet" href="CleanUI.css">
<script src="CleanUI.js"></script>

Or grab them directly from this repo:

Components

Buttons

<button class="btn animate-pulse">Primary</button>
<button class="btn btn-secondary">Secondary</button>

Cards

<div class="card animate-slide lazy-load">
  <h2 class="heading">Card Title</h2>
  <p>Content here.</p>
</div>

Form Validation

<form class="form-validate">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" class="input" data-validate="email" placeholder="Enter email">
    <span class="form-error">Invalid email</span>
    <span class="form-success">Looks good!</span>
  </div>
  <button class="btn">Submit</button>
</form>

Tables (Sortable/Filterable)

<div class="search-bar">
  <input type="text" class="input table-filter" placeholder="Filter table...">
</div>
<table class="table table-striped table-hover">
  <thead>
    <tr><th class="sortable">Name</th><th class="sortable">Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>25</td></tr>
    <tr><td>Bob</td><td>30</td></tr>
  </tbody>
</table>

Toasts (Variants/Stacking)

<button class="btn" data-toast="Success!" data-toast-type="success">Success</button>
<button class="btn" data-toast="Error!" data-toast-type="error">Error</button>
<button class="btn" data-toast="Info!" data-toast-type="info">Info</button>

Modal

<button class="btn" data-modal="modal-demo">Open Modal</button>
<div class="modal" id="modal-demo">
  <div class="modal-content animate-fade">
    <h2 class="heading">Modal Demo</h2>
    <p>This is a modal!</p>
    <button class="btn">Close</button>
  </div>
</div>

Tooltips (Advanced)

<div class="tooltip">
  <button class="btn">Hover Me</button>
  <span class="tooltip-text" data-position="right">Rich <em>content</em></span>
</div>

Carousel

<div class="carousel animate-slide lazy-load">
  <div class="carousel-inner">
    <div class="carousel-item">Slide 1</div>
    <div class="carousel-item">Slide 2</div>
    <div class="carousel-item">Slide 3</div>
  </div>
  <button class="carousel-btn prev">❮</button>
  <button class="carousel-btn next">❯</button>
</div>

Datepicker

<div class="datepicker">
  <input type="text" class="input" placeholder="Select date">
  <div class="datepicker-calendar">
    <div class="datepicker-header">
      <button class="datepicker-btn prev">❮</button>
      <span class="datepicker-month-year"></span>
      <button class="datepicker-btn next">❯</button>
    </div>
    <div class="datepicker-days"></div>
  </div>
</div>

Charts

<div class="chart">
  <div class="chart-bar"></div>
</div>
<div class="chart">
  <div class="chart-pie"></div>
</div>

Image Gallery

View

View

<div class="image-gallery animate-fade lazy-load">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/200" alt="Image" loading="lazy">
    <div class="gallery-overlay"><span>View</span></div>
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/200" alt="Image" loading="lazy">
    <div class="gallery-overlay"><span>View</span></div>
  </div>
</div>

Rating Stars

<div class="rating">
  <span class="rating-star">★</span>
  <span class="rating-star">★</span>
  <span class="rating-star">★</span>
  <span class="rating-star">★</span>
  <span class="rating-star">★</span>
</div>

Themes

Switch between themes using the dropdown in the top-right corner.

• Light: Default clean look.
• Dark: Sleek dark mode.
• High-Contrast: Accessibility-focused.

Customize via CSS variables:

:root {
  --primary: #ff9500;
  --background: #f0f0f0;
}

Animations

<div class="card animate-fade">Fade</div>
<div class="card animate-slide">Slide</div>
<div class="card animate-bounce">Bounce</div>
<div class="card animate-pulse">Pulse</div>

Live Editor

Try CleanUI live! Edit the code below and see the result instantly.