Repolode
Submit
vladocar

vladocar/Sumi.css

A minimalist CSS framework that styles plain semantic HTML with almost no classes, shipped as a single file with no build step.

View on GitHubWebsite
Stars
128
Forks
0
Open issues
2
Last commit
yesterday

What is it?

Sumi.css is a CSS framework built around classless styling: headings, forms, tables, cards, accordions, modals and navigation are styled from the bare HTML elements, and classes are only needed for specific adjustments. It ships as one file of about 6.7 KB minified and gzipped, with no JavaScript and no dependencies, and can be downloaded or loaded from a jsDelivr CDN.

The framework supports light and dark modes that follow the system setting, with a data-theme attribute to force either mode. Colors, fonts, sizes and radii are exposed as CSS custom properties prefixed with --s-, so themes can be adjusted globally or per element. Element styles have zero specificity, so custom CSS overrides them without !important.

It also includes grid and flex layout classes, form validation states via aria-invalid, loading spinners, tooltips, and a fluid type scale. The project provides a component reference page and a step-by-step tutorial, and it targets current versions of Chrome, Edge, Firefox and Safari.

Key features

  • 01Styles plain semantic HTML elements without requiring classes.
  • 02Single CSS file with no JavaScript and no dependencies.
  • 03Automatic light and dark mode with a data-theme override.
  • 04Theming through CSS custom properties prefixed with --s-.
  • 05Zero-specificity element styles that are easy to override.
  • 06Grid, flex and container layout classes.
  • 07Accessibility support including focus rings, ARIA states and reduced motion.

Use cases

  • Quickly styling a static site, documentation page or personal homepage without a build pipeline.
  • Prototyping a form-heavy or table-heavy internal tool with minimal markup changes.
  • Adding a consistent themed look to a project that already has hand-written HTML.
  • Building custom components on top of shared color and spacing tokens.

Quick start

  1. 1

    Download sumi.min.css into your project

  2. 2

    Link the stylesheet in your HTML head, or load it from the jsDelivr CDN

Things to know

  • Relies on modern CSS features, so older browsers show plainer hover and focus colors.

Topics

#css#css-framework#classless#minimalist#dark-mode#theming#responsive-design#css-grid

FAQ

What is Sumi.css?
A minimalist CSS framework that styles plain semantic HTML with almost no classes, shipped as a single file with no build step. Sumi.css is a CSS framework built around classless styling: headings, forms, tables, cards, accordions, modals and navigation are styled from the bare HTML elements, and classes are only needed for specific adjustments. It ships as one file of about 6.7 KB minified and gzipped, with no JavaScript and no dependencies, and can be downloaded or loaded from a jsDelivr CDN.
Is Sumi.css free to use? What license does it have?
Sumi.css is open source under the MIT license. Check the license terms before using it in commercial products.
Is Sumi.css still maintained?
Actively maintained. The last commit to Sumi.css was on Oct 21, 2026.
What can I use Sumi.css for?
Quickly styling a static site, documentation page or personal homepage without a build pipeline. Prototyping a form-heavy or table-heavy internal tool with minimal markup changes. Adding a consistent themed look to a project that already has hand-written HTML. Building custom components on top of shared color and spacing tokens.
How do I install Sumi.css?
Download sumi.min.css into your project Link the stylesheet in your HTML head, or load it from the jsDelivr CDN
Where can I get Sumi.css?
The source code and installation instructions are on GitHub: https://github.com/vladocar/Sumi.css

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects