suCSS: Elevating Semantic HTML

suCSS is a minimalist and classless CSS framework designed to provide a lightweight and elegant foundation for web development. Keep your projects streamlined and stylish with a framework that doesn't suCC(S) 💼

Features

• Automatic dark mode toggling
• Full responsiveness out of the box
• Sleek local fonts for sans-serif and monospace
• Intuitive defaults for standard HTML elements
• Remarkable lightweightness (just 8KB minified)

Usage

You can use suCSS by including the following links in your HTML file:

<link rel="stylesheet" href="https://speyll.github.io/suCSS/reset-min.css">
<link rel="stylesheet" href="https://speyll.github.io/suCSS/suCSS-min.css">

Alternatively, you can download the CSS files and include them locally in your project.

Demo

Check out the live demo to see suCSS in action.

Changelog

2026-10-30

• Darkened the light-theme accent, accent-hover, and link colours to meet WCAG AA contrast.
• Kept native checkbox and radio widgets, themed with accent-color, instead of replacing them.
• Made RTL-aware spacing and alignment use logical properties (margin-inline, float: inline-end).
• Respected prefers-reduced-motion for smooth scrolling.
• Fixed invalid or ineffective declarations (font-size: .875, scrollbar-height, grid-row-gap, table white-space).
• Added focus-visible styles for form controls and summaries.
• Moved the dark-mode image dimming into an --img-opacity custom property so explicit light/dark choices always win.
• Hid decorative # and list markers from assistive technology where CSS alternative text is supported.
• Introduced --hover-bg/--hover-text and applied them to links on hover and :focus-visible, so fills and foregrounds stay a matched pair in both themes (including list markers).

License

suCSS is licensed under the MIT License.