About shade.css

shade.css is a minimal CSS framework that styles your clean HTML with no need for classes. Just add our stylesheet and your semantic markup becomes a professionally designed website.

We provide sensible defaults for all HTML elements while keeping things lightweight. Perfect for documentation, personal sites, prototypes, and any project where you want content to look great without complex frameworks.

Why Go Classless?

Classless frameworks work with your HTML structure as it is, without requiring you to learn custom classes:

Less complexity - no classes to learn or maintain
Better structure - encourages proper semantic HTML
More portable - content works across different systems
Faster development - focus on content, not styling decisions

Get Started Quickly

Installation Options

Download

Core stylesheet:

style.min.css (minified: 5.7KB)

Optional themes:

light-theme.css (0.47KB)
dark-theme.css (0.47KB)

CDN Link

Use our CDN for quick setup:

<link rel="stylesheet" href="https://shade-css.pages.dev/style.min.css">

Basic Usage

Add this to your <head> section:

<link rel="stylesheet" href="style.min.css">
<!-- or -->
<link rel="stylesheet" href="https://shade-css.pages.dev/style.min.css">

Add a theme if you want:

<link rel="stylesheet" href="dark-theme.css">
<!-- or -->
<link rel="stylesheet" href="light-theme.css">

That's it! Your HTML now has clean, responsive styling.

What's Included

shade.css styles all standard HTML elements beautifully:

Typography

Responsive text that reads well on any device
Consistent spacing throughout your content
Well designed headings with clear hierarchy
Nice looking blockquotes, code blocks, and preformatted text

Layout

Mobile friendly responsive design
Comfortable reading width for content
Good spacing between sections
Flexible layout without complex grid systems

UI Elements

Clean button styles for interactive elements
Nice form controls with consistent styling
Responsive tables that work on all screens
Styled navigation and lists

Accessibility

Good color contrast for readability
Clear focus styles for keyboard navigation
Works with semantic HTML structure
Respects motion preferences

HTML Examples

See how shade.css styles standard HTML with no extra classes:

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph. It has strong text, emphasized text, and a link. You can also use inline code and abbr.

This is a blockquote. It shows quoted content from another source.
— Source

// This is a code block
function example() {
  console.log('Hello, world!');
}

Lists

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

Forms

Tables

Name	Date	Status
Project Alpha	Jan 15, 2024	Completed
Project Beta	Mar 22, 2024	In Progress
Project Gamma	Jun 05, 2024	Planning

Customization

shade.css uses CSS variables for easy customization. Change these to match your style:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --accent-color: #e74c3c;
  --text-color: #333333;
  --background-color: #ffffff;
  --border-color: #e0e0e0;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --line-height: 1.6;
  --border-radius: 4px;
  --spacing-unit: 1rem;
}

Make Your Own Theme

Create a CSS file with your custom variables and include it after shade.css:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="custom-theme.css">

Add Your Own Styles

Include your own CSS after shade.css for additional components:

<style>
  .custom-component {
    /* Your styles here */
  }
</style>

Our Approach

shade.css follows these principles:

No classes needed - works with plain HTML
Accessible - good contrast and navigation
Lightweight - small file size for fast loading
Customizable - easy to change with CSS variables
Content focused - makes your content look good
Modern - uses current CSS features

Browser Support

shade.css works in all modern browsers including:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Older browsers will still work with basic styling.