@svmukhin/edible-css

v1.0.5

Published

2 days ago

A primitive, classless CSS framework for developers with no design skills. Style semantic HTML5 with a single <link> tag.

0High
0Medium
0Low

svmukhin

css classless framework semantic-html no-classes drop-in

EdibleCSS: "Just add HTML"

A primitive, classless CSS framework for developers with no design skills. Style semantic HTML5 with a single <link> tag.

Features

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)

Installation

CDN (Recommended)

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

npm install @svmukhin/edible-css

Then 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

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" />

Usage

EdibleCSS is designed with one principle: "Just add HTML." Write semantic HTML5 markup and get professional styling automatically—no classes, no configuration, no decisions.

Getting Started

Add the CDN link to your HTML <head>
Write semantic HTML5
Done!

That's it. Your page is now styled.

Live Examples

See EdibleCSS in action with these live demos (hosted on GitHub Pages):

All examples use only semantic HTML—no CSS classes required.

Quick Start Template

<!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>&copy; 2026 Your Name</p>
    </footer>
  </body>
</html>

Common Patterns

Navigation Menu:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Form Example

<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>

What Gets Styled

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

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 */
}

Browser Support

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.

Customization

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;
}

Philosophy

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

Development

# 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:a11y

License

MIT License - see LICENSE for details.

Contributing

Contributions are welcome! However, please note that EdibleCSS is intentionally minimal and opinionated. New features must align with the Constitution principles.

Commit Message Format

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 changes
style: - Code style changes (formatting, missing semi-colons, etc)
refactor: - Code refactoring
test: - Adding or updating tests
chore: - 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.

Credits

Created by Sergei Mukhin

Inspired by classless CSS frameworks: Tacit, Water.css, new.css, MVP.css, and sakura.