Release 1.0.0 · lowlighter/matcha

📦 Features

Use matcha.css the way you want
- Drop-in stylesheet
  - <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
- Using the NPM package
  - Published as @lowlighter/matcha
  - Can also be imported from any CDN that serves NPM packages
- À la carte
  - Include any style from lowlighter/matcha/styles directly
  - All 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)
- Preset builds with fixed sets of styles
  - Default: matcha.css (~7.23kB)
  - Lite: matcha.lite.css (~5.16kB)
  - Utility classes only: matcha.utilities.css (~2.0kB)
  - Istanbul coverage only: matcha.istanbul.css (~1.6kB)
Create custom builds from matcha.mizu.sh/build
- Choose included styles and customize properties
- Toggle minification on/off
- Provide raw CSS code to hotpatch
Comprehensive documentation and examples
- Every styling is documented with examples and code snippets
  - Toggle color scheme of each example
- Website previewer

Semantic styling
- Sectioning
- Navigation
- Headings
- Flow
- Collapsibles
- Modals
- Anchors
- Abbreviations
- Styling and emphasis
- Annotations
- Computing
- Forms
- Bars
- Lists
- Tables
- Media
Extras
- @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