npm package: @svmukhin/edible-css
Description: A primitive, classless CSS framework for developers with no design skills. Style semantic HTML5 with a single <link> tag.
Author: Sergei Mukhin
Latest version: 1.2.1

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

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@svmukhin/edible-css@latest/dist/edible.min.css"
/>
```

Or via unpkg:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@svmukhin/edible-css@latest/dist/edible.min.css"
/>
```

### npm

```bash
npm install @svmukhin/edible-css
```

Then import in your CSS or JavaScript:

```css
@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](https://unpkg.com/@svmukhin/edible-css@latest/dist/edible.css)
  (24.8KB uncompressed)
- [edible.min.css](https://unpkg.com/@svmukhin/edible-css@latest/dist/edible.min.css)
  (16KB minified)

Then include it in your project:

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

1. Add the CDN link to your HTML `<head>`
2. Write semantic HTML5
3. Done!

That's it. Your page is now styled.

### Live Examples

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

- **[Basic Example](https://svmukhin.github.io/edible-css/examples/basic.html)**
- **[Typography](https://svmukhin.github.io/edible-css/examples/typography.html)**
- **[Forms](https://svmukhin.github.io/edible-css/examples/form.html)**
- **[Tables](https://svmukhin.github.io/edible-css/examples/table.html)**
- **[Navigation](https://svmukhin.github.io/edible-css/examples/navigation.html)**

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

### Quick Start Template

```html
<!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:**

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

### Form Example

```html
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="you@example.com" />

  <label for="message">Message:</label>
  <textarea id="message" rows="5"></textarea>

  <button type="submit">Send</button>
</form>
```

**Data Table:**

```html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Admin</td>
    </tr>
  </tbody>
</table>
```

**Content Article:**

```html
<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.

```css
/* 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:

```css
/* Your custom styles override EdibleCSS */
h1 {
  color: purple;
}
```

## Philosophy

EdibleCSS follows four core principles:

1. **Zero Classes** - No CSS classes whatsoever
2. **No JavaScript Required** - Pure CSS solution
3. **Minimal Configuration** - Single link tag to get started
4. **For Non-Designers** - Built for developers with no design skills

## Development

```bash
# 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](LICENSE) for details.

## Contributing

Contributions are welcome! However, please note that EdibleCSS is
intentionally minimal and opinionated. New features must align with the
[Constitution](docs/constitution.md) principles.

### Commit Message Format

This project uses [Conventional Commits](https://www.conventionalcommits.org/)
for automated versioning and changelog generation. Please format your commit
messages as:

```text
<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:**

```bash
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](https://github.com/svmukhin)

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