EdibleCSS

About EdibleCSS

EdibleCSS is a classless CSS framework that styles semantic HTML5 elements automatically. No classes, no JavaScript, no build step required. Just write clean HTML and get professional styling instantly.

Perfect for developers who want to focus on content and functionality without worrying about design. Ideal for prototypes, documentation, internal tools, and personal projects.

Key Features

• 🎨 Zero Classes: Write semantic HTML5. EdibleCSS styles everything automatically.
• 📦 Tiny Size: Only 3.7 KB gzipped. Loads and parses in milliseconds.
• 🌙 Dark Mode: Automatic dark mode support via prefers-color-scheme.
• 📱 Responsive: Mobile-first design with responsive typography and spacing.
• ♿ Accessible: WCAG 2.1 AA compliant with proper contrast and focus states.
• 🖨️ Print Ready: Optimized print styles for clean, readable documents.

Installation

Choose your preferred installation method:

CDN (Recommended)

The fastest way to get started. Add one line to your HTML:

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

Or use unpkg:

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

NPM

Install via npm for use in build processes:

npm install @svmukhin/edible-css

Then import in your CSS or JavaScript:

@import '@svmukhin/edible-css/dist/edible.css';

Download

Download the CSS file directly from CDN:

• edible.css (24 KB uncompressed)
• edible.min.css (16 KB minified)

Live Demo

This page itself demonstrates EdibleCSS. Everything you see is styled with zero CSS classes.

Typography Example

This is a paragraph with bold text, italic text, and highlighted text.

This is a blockquote. It's great for emphasizing important quotes or notes.

Form Example

Table Example

List Example

Unordered List

• First item
• Second item with nested list:
  • Nested item 1
  • Nested item 2
• Third item

Ordered List

1. First step
2. Second step
3. Third step

Features & Specifications

Styled Elements

EdibleCSS provides beautiful default styles for 50+ HTML5 elements:

• Typography: h1-h6, p, a, strong, em, small, mark, del, ins, sub, sup
• Code: code, pre, kbd, samp, var, blockquote, cite
• Lists: ul, ol, li, dl, dt, dd (with nested support)
• Tables: table, thead, tbody, tr, th, td (with responsive overflow)
• Forms: input (all types), textarea, select, button, fieldset, legend, label
• Media: img, video, audio, iframe, svg, picture, canvas
• Semantic: nav, main, article, aside, section, header, footer, address, figure
• Interactive: details, summary, dialog, progress, meter

Design System

• Colors: GitHub-inspired palette with light/dark modes
• Typography: 1.25 modular scale (16px → 18px responsive)
• Spacing: Consistent 8px grid system
• Fonts: System font stack for optimal performance

Browser Support

Supports all modern browsers:

• Chrome/Edge (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)

Performance

• Load + parse time: <100ms on modern connections
• Zero JavaScript overhead
• No runtime computation

Examples

See EdibleCSS in action with these live examples:

• Basic Example - Simple page with common HTML elements
• Typography - Headings, paragraphs, lists, and text formatting
• Forms - Input fields, buttons, and form layouts
• Tables - Data tables with various configurations
• Navigation - Navigation menus and links

All examples use only semantic HTML - no classes required!

Philosophy

Just add HTML.

EdibleCSS is built on the principle that semantic HTML should look good by default. No classes, no complexity, no learning curve. Write clean, accessible markup and EdibleCSS handles the rest.

Perfect For:

• 📝 Documentation sites
• 🛠️ Internal tools and dashboards
• 🚀 Rapid prototyping
• 📚 Personal blogs and notes
• 🧪 Demo pages and experiments
• 📧 HTML emails (with limitations)

Not For:

• Complex component-based UIs (use a component framework)
• Highly custom designs (use custom CSS)
• Marketing landing pages (too opinionated)

Quick Start

Get started in 3 simple steps:

1. Add the CDN link to your HTML <head>
2. Write semantic HTML5 markup
3. That's it! Your page is styled.

<!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://cdn.jsdelivr.net/npm/@svmukhin/edible-css@latest/dist/edible.min.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Welcome to My Site</h1>
      <p>This is a paragraph. No classes needed!</p>
    </article>
  </main>

  <footer>
    <p>© 2026 Your Name</p>
  </footer>
</body>
</html>