🍵 Drop-in semantic styling library in pure CSS. Highly customizable and perfect for simple websites and prototyping web apps!
MIT License
Bot releases are hidden (Show)
.layout-simple
may now be applied on elements other than body
body
is not your main root element:user-valid
and :user-invalid
styles into the @form-validation
rules
Published by lowlighter 4 months ago
Published by lowlighter 4 months ago
/v/
directory with all published releases of matcha.css
/v/1.0.0/
), pin a minor (e.g. /v/1.0/
), pin a major (e.g. /v/1/
), or use /v/latest/
or /v/main/
main
branch (i.e. they're the same as using /v/main/
)--light-
or --dark-
--light-
/--dark-
counterpart rather than being hard-coded). Unless you've manually overriden them in the past, chances are you're not impacted in any way by this changesummary
is displayed with border-radius
to correctly crop details
backgroundpre
is displayed with -webkit-text-size-adjust: 100%;
to avoid scaling issues on Safari iOSform code
is displayed with --bg-subtle
to contrast with form
already having --bg-muted
button.default:hover
being invisible on light modemenu
is displayed as flex-direction: column
on small screens for accessibility and to avoid submenus from appearing outside of viewport@utilities
@code-editor
.editor
is displayed with -webkit-text-size-adjust: 100%;
to avoid scaling issues on Safari iOSPublished by lowlighter 5 months ago
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
mod.css
stylesheets are also aliased to their respective parent directory for convenience (e.g. /styles/@root/mod.css
can be accessed through /@root.css
)matcha.css
(~7.23kB)matcha.lite.css
(~5.16kB)matcha.utilities.css
(~2.0kB)matcha.istanbul.css
(~1.6kB)@layouts
: provide semantic layouts for your documents@utilities
: provide utility classes for colors, backgrounds, flashes, typography, display, flexbox, and more@syntax-highlighting
: provide styles for syntax highlighting to be used with highlight.js
@code-editor
: provide styles to create simple code editors@istanbul-coverage
: provide styles to display code coverage reports@discrete-scrollbars
: style scrollbars to be discrete@break-words
: style elements to improve text wrapping