# Installation
Via npm
Install the package from npm:
npm install acorn.cssThen import in your JavaScript/TypeScript:
// Import everything
import 'acorn.css';
// Or import specific build
import 'acorn.css/dist/acorn.css';
import 'acorn.css/dist/acorn.min.css';Or import in your CSS:
@import 'acorn.css';Via CDN
<link rel="stylesheet" href="https://unpkg.com/acorn.css@latest/dist/acorn.min.css">Quick start - customize with CSS variables
:root {
--primary: #41aaea;
--space-2: 1rem;
--text-base: 1rem;
--container-default: 60rem;
--border-radius: 0.25rem;
}# Core Principles
- Lightweight: ~18KB of CSS (3.8KB gzipped), no JavaScript required
- 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
# Customization
Customize the framework using straightforward CSS custom properties:
--primary,--secondary,--accent- Brand colors with light/dark variants for your design system.
--space-1through--space-5- Spacing scale using rule of 2: 8px, 16px, 32px, 64px, 128px.
--text-xsthrough--text-3xl- Typography scale (1.25 ratio) for consistent text sizing.
--container-narrow/default/wide- Container widths: 45rem (reading), 60rem (default), 80rem (wide).
--border-radius- Base border radius applied to buttons, inputs, and interactive elements.
Dark Mode
The framework includes built-in dark mode support using the data-theme attribute:
<html data-theme="light"> <!-- Light mode (default) -->
<html data-theme="dark"> <!-- Dark mode -->For automatic theme detection based on user preferences, you can use CSS media queries instead:
/* Auto dark mode using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
:root {
/* Apply dark mode colors automatically */
--primary: #6ec3f8;
--white: #151513;
--black: #f5f5f5;
/* ... other dark mode variables */
}
}Or implement with JavaScript to respect system preferences while allowing manual override:
// Auto mode with system preference detection
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
} else if (prefersDark.matches) {
document.documentElement.setAttribute('data-theme', 'dark');
}Note: This demo uses manual theme switching with the toggle button in the bottom-right corner. Your implementation can choose manual control, automatic detection, or both!
This text wraps around the
right-aligned image on desktop but stacks normally on mobile devices. The framework handles this responsive
behavior automatically using container queries.
