Quick Start

Add one line to your HTML and you're done:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrew-bierman/juice.css@0.0.2/out/juice.min.css">

That's it. Your semantic HTML now looks like this page.

See the full starter 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://cdn.jsdelivr.net/gh/andrew-bierman/juice.css@0.0.2/out/juice.min.css">
</head>
<body>
    <header>
        <h1>Welcome</h1>
        <p>Your content here.</p>
    </header>
    <main>
        <section>
            <h2>Section Title</h2>
            <p>Just write semantic HTML. No classes needed.</p>
        </section>
    </main>
    <footer>
        <p>Made with juice.css</p>
    </footer>
</body>
</html>

Features

Feature	Description
Zero Config	Drop in a single CSS file - no build step, no classes
Dark Mode	Automatic theme switching via `prefers-color-scheme`
Responsive	Optimized for mobile, tablet, and desktop
Lightweight	~16KB minified (auto theme), ~11KB (single theme)
Accessible	Semantic HTML with proper focus states and contrast
Customizable	Override CSS variables for instant theming

Perfect For

Documentation: Write docs in plain HTML or Markdown-to-HTML and get beautiful output
Prototypes: Spin up demos and MVPs without wrestling with CSS
Internal Tools: Make admin panels and dashboards look polished instantly
Learning: Focus on HTML semantics without worrying about styling

Installation Options

Just add this to your <head>:

Automatic Theme (Recommended)

Automatically switches between light and dark based on system preference:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrew-bierman/juice.css@0.0.2/out/juice.min.css">

Always Light

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrew-bierman/juice.css@0.0.2/out/juice-light.min.css">

Always Dark

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrew-bierman/juice.css@0.0.2/out/juice-dark.min.css">

Unminified versions also available without .min for debugging.

Theming

juice.css uses CSS variables for theming. You can customize any of these:

:root {
  --background-body: #ffffff;
  --background: #f5f5f7;
  --background-alt: #ffffff;
  --selection: rgba(0, 122, 255, 0.2);
  --text-main: #1d1d1f;
  --text-bright: #000000;
  --text-muted: #86868b;
  --links: #007aff;
  --focus: rgba(0, 122, 255, 0.4);
  --border: #d2d2d7;
  --code: #1d1d1f;
  --button-base: #007aff;
  --button-hover: #0051d5;
  --scrollbar-thumb: #d2d2d7;
  --scrollbar-thumb-hover: #86868b;
  --form-placeholder: #86868b;
  --form-text: #1d1d1f;
  --variable: #34c759;
  --highlight: rgba(255, 214, 10, 0.5);
}

Runtime Theming

Override variables at runtime without recompiling:

<style>
  :root {
    --links: #ff2d55;
    --button-base: #ff2d55;
  }
</style>

Typography

This is a paragraph with bold text, italic text, and a link. The typography uses Apple's San Francisco font stack with optimized spacing and hierarchy.

All Heading Levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

Unordered List

iPhone
iPad
Mac
- MacBook Air
- MacBook Pro
- iMac
Apple Watch

Ordered List

Design
Develop
Test
Deploy

Blockquote

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

Code

Inline code looks like this: const greeting = "Hello, World!";

Code blocks with syntax-friendly colors:

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("juice.css"));

Inline Elements

Highlighted text, ~~deleted text~~, inserted text, small text, _subscript, ^superscript, Cmd+C, sample output, variable, CSS

Quotes

Inline quotes: Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

Contact Information

juice.css Project
Email: hello@juice.css
Phone: 1-800-555-1234
GitHub: andrew-bierman/juice.css

Dialog Example

Forms

Contact Information Name Email Website Phone Password Quantity Search Date Time Date & Time File Upload Message Favorite Product Favorite Color

Preferences Subscribe to newsletter I agree to the terms and conditions Light Mode Dark Mode Auto Volume

Tables

Apple Product Lineup
Product	Category	Price	Released
iPhone 15 Pro	Smartphone	$999	September 2023
MacBook Pro 14"	Laptop	$1,599	November 2023
iPad Pro	Tablet	$799	May 2024
Apple Watch Series 9	Wearable	$399	September 2023
AirPods Pro	Audio	$249	September 2023

Images & Media

Mountain landscape at sunset — Images are responsive and include rounded corners

Video

Videos are also responsive with rounded corners

Details & Summary

What makes juice.css different?

juice.css is inspired by Apple's design system with beautiful typography, spacing, and colors. It's also faster than water.css, served via Cloudflare's global CDN with 35ms average latency.

Can I customize the colors?

Yes! juice.css uses CSS variables for all colors and spacing. Just override the variables in your own stylesheet to customize the look.

Does it support dark mode?

Absolutely! The default juice.css automatically switches between light and dark modes based on your system preference using prefers-color-scheme.

Horizontal Rules

Use horizontal rules to separate content:

Content continues here...

Progress & Meter

Progress bar:

70%

Meter (optimum):

80%

Meter (suboptimum):

50%

Meter (low):

20%

Definition Lists

juice.css: A classless CSS framework inspired by Apple's design system
Classless: No CSS classes required - just write semantic HTML
Theme: Automatic dark mode support via CSS variables

🧃 juice.css v0.0.2