Pure Admin

Lightweight, data-focused HTML/CSS admin framework built with SCSS and a comprehensive component system.

Links

• Live Demo — demo.pureadmin.io (try every theme in the browser)
• Main Site — pureadmin.io (themes catalog, CLI docs, project templates)
• pureadmin CLI — npm (npx pureadmin create, npx pureadmin themes add)

Features

• Lightweight - Minimal footprint, no JavaScript dependencies for styling
• Data-focused - Optimized for admin dashboards and data-heavy applications
• RTL Support - Full right-to-left language support using CSS Logical Properties
• Themeable - Multiple themes available, easy to create custom themes
• Responsive - Mobile-first responsive design
• BEM Architecture - Clean, maintainable CSS with pa- prefixed classes
• 10px rem base - Simple calculations (1.6rem = 16px)

Packages

Package	Version	Description
@keenmate/pure-admin-core		Core framework with default theme
@keenmate/pure-admin-theme-audi		Audi-inspired red theme
@keenmate/pure-admin-theme-corporate		Professional blue/gray theme
@keenmate/pure-admin-theme-dark		Dark theme with color variants
@keenmate/pure-admin-theme-express		Bold yellow/red logistics theme
@keenmate/pure-admin-theme-minimal		Clean minimal theme

Quick Start

Installation

npm install @keenmate/pure-admin-core

CSS Only

<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-core/dist/css/main.css">

Or with a bundler:

import '@keenmate/pure-admin-core/dist/css/main.css';

With a Theme

npm install @keenmate/pure-admin-theme-audi

<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-theme-audi/dist/audi.css">

SCSS Customization

// Override variables before importing
$primary-color: #your-color;
$sidebar-width: 280px;

// Import the framework
@import '@keenmate/pure-admin-core/src/scss/main';

Components

Pure Admin includes a comprehensive set of components:

• Layout - Header, sidebar, footer, responsive grid
• Navigation - Navbar, sidebar navigation, tabs, breadcrumbs
• Content - Cards, tables, lists, alerts, callouts
• Forms - Inputs, selects, checkboxes, validation states
• Feedback - Modals, toasts, tooltips, loaders
• Data - Statistics, badges, labels, timeline, data display patterns (fields, desc tables, banded rows, dot leaders, accent grids)
• Interactive - Command palette, detail panels, profile panel

Component Example

<div class="pa-card">
  <div class="pa-card__header">
    <h3>Card Title</h3>
  </div>
  <div class="pa-card__body">
    <p>Card content goes here.</p>
  </div>
  <div class="pa-card__footer">
    <button class="pa-btn pa-btn--primary">Save</button>
  </div>
</div>

Grid System

Flexible grid system with responsive breakpoints:

<div class="pa-row">
  <div class="pa-col-md-50">Half width on medium+</div>
  <div class="pa-col-md-50">Half width on medium+</div>
</div>

• .pa-col-{5-100} - Percentage widths (5% increments)
• .pa-col-1-2, .pa-col-1-3, .pa-col-1-4 - Fraction widths
• .pa-col-sm-*, .pa-col-md-*, .pa-col-lg-*, .pa-col-xl-* - Responsive variants

RTL Support

Full right-to-left language support. Simply add dir="rtl" to your HTML element:

<html dir="rtl" lang="ar">

All components automatically mirror. Use logical utilities for RTL-aware spacing:

• .ms-* / .me-* - margin-inline-start/end
• .ps-* / .pe-* - padding-inline-start/end
• .text-start / .text-end - logical text alignment

Layout Utilities

Height and flex utilities for dynamic layouts:

<!-- Full height card in flex container -->
<div class="d-flex flex-column h-screen">
  <div class="pa-card flex-1 d-flex flex-column">
    <div class="pa-card__header">Fixed Header</div>
    <div class="pa-card__body flex-1 overflow-auto">Scrollable Content</div>
  </div>
</div>

• .h-full, .h-screen - 100% / 100vh height
• .min-h-full, .min-h-screen - Minimum heights
• .flex-1, .flex-auto - Flex grow/shrink utilities
• .flex-grow, .flex-shrink-0 - Individual flex properties

Theme Modes

Themes support light/dark modes via CSS classes on <body>:

<body class="pc-mode-dark">

The Dark theme also supports color accent variants:

<body class="pa-color-blue">
<!-- or pa-color-green, pa-color-red -->

JS contract (important for charts, SVG, canvas)

The mode/variant classes go on <body>, not <html>. CSS custom-property values are inherited parent → child only, so reading vars from document.documentElement (<html>) returns the :root (dark-default) values regardless of which mode is active — the override on <body> never propagates upward. Always read theme vars from document.body:

// ✅ correct — sees the active mode's values
const styles = getComputedStyle(document.body);
const textColor = styles.getPropertyValue('--pa-text-color-1').trim();

// ❌ wrong — reads <html>, misses .pc-mode-light overrides on <body>
getComputedStyle(document.documentElement).getPropertyValue('--pa-text-color-1');

Plain CSS (stylesheets, inline style=) using var(--pa-*) is unaffected — it updates live when the class on <body> changes.

Re-rendering on mode/variant change

Code that snapshots CSS vars at draw time (D3 charts, canvas, baked SVG fills, web components reading attributes) needs to know when the user toggles mode or variant. Whatever code flips the body class should also dispatch a window event, e.g.:

// Mode toggler
document.body.classList.toggle('pc-mode-dark');
window.dispatchEvent(new CustomEvent('pa:theme-change', { detail: { kind: 'mode' } }));

Charts and other snapshot-style code listen and re-render:

function renderChart() {
  const styles = getComputedStyle(document.body);
  const accent = styles.getPropertyValue('--pa-accent').trim();
  // ...draw chart with `accent`
}

renderChart();
window.addEventListener('pa:theme-change', renderChart);

The demo's settings-panel.js already follows this convention. If you don't re-render, the page will look correct except for the snapshotted nodes, which keep stale colors until a hard reload.

Docker Deployment

The demo server runs in Docker with themes baked in at build time. Themes not included in the image are downloaded on-demand from pureadmin.io when a user requests them.

make docker-build
docker compose up -d

Configure which themes are baked in via the THEMES_URL build arg in the Dockerfile. Additional themes are fetched lazily at runtime with a 10-minute negative cache for failed lookups.

Development

Prerequisites

• Node.js 18+
• npm 9+
• Make (recommended, or use npm commands directly)

Setup

# Clone the repository
git clone https://github.com/KeenMate/pure-admin.git
cd pure-admin

# Install dependencies and build
make setup

# Build all packages (core + themes)
make build-all

# Run demo server
make dev
# Open http://localhost:3000

Make Commands

make setup       # Install dependencies
make build       # Build core CSS
make build-all   # Build core + all themes
make dev         # Development mode with demo server
make watch       # Watch for changes
make clean       # Clean dist directories
make publish     # Publish to npm

Without Make

If you don't have Make installed, use npm directly:

npm install                # Install dependencies
npm run build:all          # Build everything
npm run dev                # Development mode

Repository Structure

pure-admin/
├── packages/
│   ├── core/           # @keenmate/pure-admin-core
│   ├── theme-audi/     # @keenmate/pure-admin-theme-audi
│   ├── theme-corporate/
│   ├── theme-dark/
│   ├── theme-express/
│   └── theme-minimal/
├── demo/               # Demo site (localhost:3000)
└── docs/               # Documentation

Documentation

• Component Examples: Run the demo server and browse components
• HTML Snippets: See packages/core/snippets/ for copy-paste examples
• SCSS Variables: See packages/core/src/scss/variables/

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.

Credits

Built with care by KeenMate.