dvs/repoUI

Fork 0

Files

T

dvs 20b365dbe2 docs: rewrite README in English

2026-08-28 09:03:52 +08:00

5.9 KiB

Raw Permalink Blame History

🎨 repoUI Component Style Library

A pure CSS modern web UI component library. Zero dependencies, plug-and-play, with light/dark theme support.

repoUI is a lightweight, elegant, themeable front-end component style library. Built on CSS variables (design tokens), it supports light / dark themes with one click, includes a complete icon font set, layout system, and dozens of common UI components. All styles are native CSS with no framework dependency — just drop it into any HTML project.

✨ Features

Feature	Description
🎨 Design Tokens	Complete CSS variable system (colors/fonts/spacing/radius/shadow/z-index)
🌗 Light/Dark Themes	Switch to dark mode with `data-theme="dark"`
🔠 Icon Fonts	Built-in hundreds of common icons covering dev/collab/code scenarios
📦 Pure CSS, Zero Dependencies	No JavaScript framework required
♻️ Plug-and-Play	Single CSS file — just `<link>` it in
🧩 Rich Components	20+ common UI components built in

🚀 Quick Start

Include

<!-- Add to <head> -->
<link rel="stylesheet" href="repoUI.css">

Simple Example

<!-- Buttons -->
<button class="repo-btn repo-btn--primary">Primary</button>
<button class="repo-btn repo-btn--secondary">Secondary</button>
<button class="repo-btn repo-btn--danger">Danger</button>

<!-- Card -->
<div class="repo-card">
  <div class="repo-card__header"><h3 class="repo-card__title">Title</h3></div>
  <div class="repo-card__body">Card content</div>
</div>

<!-- Tags -->
<span class="repo-tag repo-tag--success">Success</span>
<span class="repo-tag repo-tag--warning">Warning</span>
<span class="repo-tag repo-tag--danger">Error</span>

<!-- Tabs -->
<div class="repo-tabs">
  <div class="repo-tabs__item repo-tabs__item--active">Overview</div>
  <div class="repo-tabs__item">Code</div>
  <div class="repo-tabs__item">History</div>
</div>

Dark Theme

<!-- Set data-theme on the root element to switch to dark mode -->
<html data-theme="dark">

🧩 Component List

.repo-layout / .repo-layout__header / __sidebar / __main / __content — Page layout
.repo-row / .repo-col — Grid system
.repo-container / .repo-container--fluid — Container
.repo-tabs — Tabs
.repo-breadcrumb — Breadcrumb navigation

Basic Components

.repo-btn (+ --primary --secondary --danger --ghost --link --sm --lg --icon) — Buttons
.repo-input / .repo-textarea / .repo-input-group — Input fields
.repo-select — Select dropdown
.repo-checkbox / .repo-radio — Checkbox / Radio

Data Display

.repo-tag (+ --default --primary --success --warning --danger --outline) — Tags
.repo-badge (+ --primary --success --danger --warning --dot) — Badges
.repo-avatar (+ --xs --sm --md --lg --xl) — Avatars
.repo-card — Card
.repo-table (+ --border) — Table
.repo-pagination — Pagination
.repo-file-tree — File tree
.repo-diff — Code diff

Feedback & Overlay

.repo-tooltip (+ --top --bottom --left --right) — Tooltip
.repo-modal (+ --open) — Modal
.repo-drawer (+ --left) — Drawer
.repo-message (+ --success --error --warning --info) — Message notification
.repo-dropdown (+ --open) — Dropdown menu

Loading & Status

.repo-spinner (+ --sm --lg) — Loading spinner
.repo-skeleton (+ --text --circle --button) — Skeleton screen
.repo-progress — Progress bar

Code

.repo-code-block — Code block (with copy button, language label)
.repo-inline-code — Inline code

🎨 Design Tokens (CSS Variables)

All repoUI styles are driven by CSS variables, making them easy to customize:

:root {
  --repo-color-primary: #3b82f6;      /* Primary color */
  --repo-color-danger: #ef4444;       /* Danger color */
  --repo-color-success: #10b981;      /* Success color */
  --repo-color-warning: #f59e0b;      /* Warning color */
  --repo-font-family: -apple-system, "Segoe UI", sans-serif;
  --repo-radius-md: 6px;              /* Radius */
  --repo-spacing-4: 16px;             /* Spacing */
  /* ...more variables in repoUI.css */
}

Token groups:

Colors: --repo-color-* (primary/danger/success/warning/text/bg/border/link/icon)
Fonts: --repo-font-* (family/size/line-height)
Spacing: --repo-spacing-* (1~12)
Radius: --repo-radius-* (sm/md/lg/xl/full)
Shadows: --repo-shadow-* (xs~xl)
Z-index: --repo-z-* (dropdown/sticky/fixed/modal/popover/tooltip)
Layout: --repo-header-height / --repo-sidebar-width

🔠 Using Icons

repoUI includes a built-in icon font:

<!-- Basic operation icons -->
<span class="icon-download"></span>
<span class="icon-copy"></span>
<span class="icon-edit"></span>
<span class="icon-delete"></span>

<!-- Status icons -->
<span class="icon-success"></span>
<span class="icon-error"></span>
<span class="icon-warning"></span>
<span class="icon-running"></span>

<!-- GitHub & common icons (compatibility mapping) -->
<span class="icon-github"></span>
<span class="icon-branch"></span>
<span class="icon-pull-request"></span>
<span class="icon-issue"></span>

Icon class format: icon-*

📁 Project Structure

repoUI/
├── repoUI.css     # Complete style library (single file, ~60KB)
├── fonts/         # Icon font files
│   ├── repo-icons.eot
│   ├── repo-icons.ttf
│   └── repo-icons.woff
└── README.md      # This document

📄 License

This project is licensed under the MIT License. See LICENSE for details. You are free to use, modify, and distribute it, as long as you retain the copyright notice.

🙏 Thanks

Thanks for using repoUI Component Style Library! If you find it useful, feel free to give it a ⭐ or share it in your projects.

5.9 KiB Raw Permalink Blame History