A lightweight, semantic HTML framework. Just ~18KB of thoughtful CSS (3.8KB gzipped).
- Lightweight: ~18KB uncompressed, 3.8KB gzipped
- Semantic: Style HTML elements directly without classes
- Customizable: Simple CSS custom properties for everything
- Accessible: WCAG compliant with proper focus management
- Responsive: Mobile-first with sensible defaults
- Dark Mode: Built-in support with manual or automatic switching
npm install acorn.cssImport in JavaScript/TypeScript:
// Import everything
import 'acorn.css';
// Or import specific build
import 'acorn.css/dist/acorn.css';
import 'acorn.css/dist/acorn.min.css';Import in CSS:
@import 'acorn.css';Uncompressed:
<link rel="stylesheet" href="https://unpkg.com/acorn.css@latest/dist/acorn.css">Minified:
<link rel="stylesheet" href="https://unpkg.com/acorn.css@latest/dist/acorn.min.css">Download the latest release and include the CSS file in your project.
Simply write semantic HTML and acorn.css will style it beautifully:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="path/to/acorn.css">
</head>
<body>
<main>
<h1>Hello World</h1>
<p>Write semantic HTML and get beautiful designs automatically.</p>
<button>Click Me</button>
</main>
</body>
</html>Override CSS variables to customize the framework:
:root {
--primary: #41aaea;
--space-2: 1rem;
--text-base: 1rem;
--container-default: 60rem;
--border-radius: 0.25rem;
}Manual Toggle:
<html data-theme="light"> <!-- or "dark" -->Automatic (with JavaScript):
// Detect system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDark.matches) {
document.documentElement.setAttribute('data-theme', 'dark');
}CSS Only:
@media (prefers-color-scheme: dark) {
:root {
--primary: #6ec3f8;
--white: #151513;
--black: #f5f5f5;
}
}<button>Primary</button>
<button data-variant="secondary">Secondary</button>
<button data-variant="tertiary">Tertiary</button>
<button data-variant="link">Link</button>
<button data-destructive>Delete</button><main>Default container (60rem)</main>
<div data-container="narrow">Reading width (45rem)</div>
<div data-container="wide">Wide layout (80rem)</div>
<div data-container="full">Full viewport width</div><nav data-scroll="horizontal">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact" aria-current="page">Contact</a></li>
</ul>
</nav>All modern browsers (Chrome, Firefox, Safari, Edge) and their mobile variants.
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Build CSS only
npm run build:cssMIT © Jo Murgel
Contributions are welcome! Please open an issue or submit a pull request.