A primitive, classless CSS framework for developers with no design skills. Style
semantic HTML5 with a single <link> tag.
- Zero Classes - Style pure HTML5 elements only, no CSS classes required
- No JavaScript - Pure CSS solution with zero runtime dependencies
- Single Link Tag - Just add
<link rel="stylesheet" href="edible.css">and you're done - Responsive by Default - Works on mobile, tablet, and desktop automatically
- Adaptive Dark Mode - Automatic light/dark theme based on user preference
- Accessible - WCAG 2.1 AA compliant with proper contrast and focus indicators
- Tiny - 24.8KB uncompressed, 3.8KB gzipped
- Modern Browsers - Chrome, Firefox, Safari, Edge (last 2 versions)
Add this line to your HTML <head>:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@svmukhin/edible-css@latest/dist/edible.min.css"
/>Or via unpkg:
<link
rel="stylesheet"
href="https://unpkg.com/@svmukhin/edible-css@latest/dist/edible.min.css"
/>npm install @svmukhin/edible-cssThen import in your CSS or JavaScript:
@import "@svmukhin/edible-css/dist/edible.css";Or link to node_modules/@svmukhin/edible-css/dist/edible.css in your HTML.
Download the CSS file directly from CDN:
- edible.css (24.8KB uncompressed)
- edible.min.css (16KB minified)
Then include it in your project:
<link rel="stylesheet" href="path/to/edible.min.css" />EdibleCSS is designed with one principle: "Just add HTML." Write semantic HTML5 markup and get professional styling automatically—no classes, no configuration, no decisions.
- Add the CDN link to your HTML
<head> - Write semantic HTML5
- Done!
That's it. Your page is now styled.
See EdibleCSS in action with these live demos (hosted on GitHub Pages):
All examples use only semantic HTML—no CSS classes required.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page</title>
<link
rel="stylesheet"
href="https://unpkg.com/@svmukhin/edible-css@latest/dist/edible.min.css"
/>
</head>
<body>
<header>
<h1>Welcome to My Site</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Just Write HTML</h2>
<p>Use semantic HTML5 elements. EdibleCSS handles the rest.</p>
<p>No classes, no thinking, no decisions. Just content.</p>
</article>
</main>
<footer>
<p>© 2026 Your Name</p>
</footer>
</body>
</html>Navigation Menu:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav><form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="[email protected]" />
<label for="message">Message:</label>
<textarea id="message" rows="5"></textarea>
<button type="submit">Send</button>
</form>Data Table:
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Admin</td>
</tr>
</tbody>
</table>Content Article:
<article>
<h2>Article Title</h2>
<p>Paragraph text with <strong>bold</strong> and <em>italic</em>.</p>
<blockquote>
<p>A quote looks great automatically.</p>
</blockquote>
</article>EdibleCSS styles 50+ HTML5 elements including:
- Typography: h1-h6, p, a, strong, em, small, mark, code, pre, blockquote
- Forms: input, textarea, select, button, fieldset, legend, label
- Tables: table, thead, tbody, tfoot, tr, th, td, caption
- Lists: ul, ol, li, dl, dt, dd
- Media: img, figure, figcaption, audio, video
- Semantic: nav, main, article, section, aside, header, footer
- Interactive: details, summary, dialog
Dark mode works automatically based on your operating system or browser setting. No configuration needed.
/* Automatically switches when user enables dark mode */
@media (prefers-color-scheme: dark) {
/* Dark mode styles applied */
}EdibleCSS works in all modern evergreen browsers:
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
Legacy browsers (IE11) are not supported.
EdibleCSS is intentionally not customizable. It provides one opinionated design that looks professional out of the box.
If you need to override styles, EdibleCSS uses low-specificity element selectors, so your own CSS will take precedence:
/* Your custom styles override EdibleCSS */
h1 {
color: purple;
}EdibleCSS follows four core principles:
- Zero Classes - No CSS classes whatsoever
- No JavaScript Required - Pure CSS solution
- Minimal Configuration - Single link tag to get started
- For Non-Designers - Built for developers with no design skills
# Install dependencies
npm install
# Build CSS
npm run build
# Run tests
npm test
# Run visual regression tests
npm run test:visual
# Run accessibility tests
npm run test:a11yMIT License - see LICENSE for details.
Contributions are welcome! However, please note that EdibleCSS is intentionally minimal and opinionated. New features must align with the Constitution principles.
This project uses Conventional Commits for automated versioning and changelog generation. Please format your commit messages as:
<type>(<scope>): <description>
[optional body]
[optional footer]
Types:
feat:- New feature (bumps minor version)fix:- Bug fix (bumps patch version)docs:- Documentation only changesstyle:- Code style changes (formatting, missing semi-colons, etc)refactor:- Code refactoringtest:- Adding or updating testschore:- Maintenance tasks
Examples:
git commit -m "feat: add print stylesheet"
git commit -m "fix(forms): correct input border radius"
git commit -m "docs: update CDN installation instructions"For breaking changes, add ! after the type or include BREAKING CHANGE: in
the footer to bump the major version.
Created by Sergei Mukhin
Inspired by classless CSS frameworks: Tacit, Water.css, new.css, MVP.css, and sakura.