NoCSS Framework

A classless CSS framework that styles semantic HTML intelligently using CSS selectors, :has(), and contextual detection. Zero classes needed.

Live Demo • Documentation • Components

Quick Start

CDN (unpkg)

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/nocss-framework@latest/dist/nocss.min.css">

<!-- Optional: JavaScript helpers -->
<script src="https://unpkg.com/nocss-framework@latest/dist/nocss.js" defer></script>

npm

npm install nocss-framework

// Import in your JavaScript
import 'nocss-framework/dist/nocss.css';

Download

Download the latest release and include the CSS file:

<link rel="stylesheet" href="path/to/nocss.min.css">

<article>
  <h2>Card Title</h2>
  <p>Automatically styled as a beautiful card.</p>
  <footer>
    <button>Action</button>
  </footer>
</article>

Features

✨ Zero Classes - Write semantic HTML only 🎯 Intelligent Detection - Styles adapt to HTML structure 📱 Responsive - Mobile-first with automatic breakpoints 🌙 Dark Mode - Built-in system preference detection ♿ Accessible - ARIA-aware styling ⚡ Lightweight - ~60KB minified CSS

Documentation

Full documentation available in docs/README.md

Installation

npm install nocss-framework

Browser Support

Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+

Contributing

See CONTRIBUTING.md

Support

If you find NoCSS useful, consider supporting its development:

🎉 Ko-fi

☕ Buy Me a Coffee

License

MIT License - see LICENSE

⭐ Star this repo • 💖 Support • 🐛 Report Issues