Matcha.css Files

📦 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

🎨 Styles

• 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 (highlightjs.org)
• @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

💕 Sponsors