matcha.css

matcha.css

Drop-in semantic styling library in pure CSS.

5.0
1 review

11 followers

matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents. Ideal for fast prototyping, static HTML pages, Markdown-generated documents, etc.
matcha.css gallery image
matcha.css gallery image
matcha.css gallery image
matcha.css gallery image
matcha.css gallery image
matcha.css gallery image
matcha.css gallery image
matcha.css gallery image
Free
Launch Team
Anima Playground
AI with an Eye for Design
Promoted

What do you think? …

Simon L.
I've often ended up reusing somewhat the same UI and utility classes from different CSS frameworks in my smaller projects and prototypes. This is why I've decided to create matcha.css, because usually nobody wants to bother with CSS in a first draft when the focus isn't the UI: they just want an usable design. This drop-in library provides styling for a large range HTML elements without the need of refactoring your HTMLs documents (similarly to a default browser stylesheet), respect user's preferences over dark mode, and include useful extras like layouts, utility and syntax highlighting classes, etc. while remaining fairly small (~6 kB gzipped). As it comes with no build steps, no dependencies, no JavaScript and it doesn't require any configuration or refactoring, it is ideal for fast prototyping, static HTML pages, Markdown-generated documents, etc. Similar libraries exist, but are often less complete and feels a bit more dated compared to matcha.css. Hope you'll appreciate this!
Wung Mattew
Nice lib! I like the style and cute logo.
Simon L.
@mattewwung Thanks a lot ! The style is heavily inspired from GitHub's Primer design guidelines which I find really nice too. As for the logo it's supposed to be a cup of matcha tea looking like a cat (because cat are cute and it's also a play on word because matcha sound like "chat", which means "cat" in French😄)