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, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use of the full range of available HTML elements.
+ Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use
+ of the full range of available HTML elements.
-
✓No build steps
-
✓No dependencies
-
✓No JavaScript
-
✓No configuration needed
-
✓No refactoring required
-
✓ gzipped (can be further reduced)
+
+ ✓
+ No build steps
+
+
+ ✓
+ No dependencies
+
+
+ ✓
+ No JavaScript
+
+
+ ✓
+ No configuration needed
+
+
+ ✓
+ No refactoring required
+
+
+ ✓
+ gzipped (can be further reduced)
+
🍵 Fun Fact: This very page is styled using matcha.css!
@@ -78,20 +147,19 @@
- Works seamlessly with any document and covers a broader range of HTML elements compared to similar libraries.
- It remains unobtrusive by leveraging CSS pseudo-elements and offers extensive browser support.
+ Works seamlessly with any document and covers a broader range of HTML elements compared to similar libraries. It remains unobtrusive by leveraging CSS pseudo-elements and offers
+ extensive browser support.
Reversible
- Simply include its <link rel="stylesheet"> to get started,
- and remove it whenever necessary without the need for document refactoring or cleanup.
+ Simply include its <link rel="stylesheet"> to get started, and remove it whenever necessary without the need for document
+ refactoring or cleanup.
Semantic
Adapts styling based on elements hierarchy, providing intuitive behaviors such as
- implicit submenus when nesting <menu> elements,
- required field indicator (*) when a <label> is paired with <input required>,
- etc.
+ implicit submenus when nesting <menu> elements, required field indicator (*) when a <label> is paired with <input required>, etc.
- To utilize matcha.css, just include the following line in the <head> section of your document.
- It's that simple!
+ To utilize matcha.css, just include the following line in the <head> section of your document. It's that simple!
- Assets are hosted on Vercel but matcha.css is also available on
+ Assets are hosted on Vercel but matcha.css is also available on
and CDN services that distributes npm packages such as JSdelivr.
- All published versions are available in the /v/ directory.
- By default, the main branch is served.
+ All published versions are available in the /v/ directory. By default, the main branch is served.
- Each subdirectory available in github.com/lowlighter/matcha/styles is also served directly from this website.
- For example, if you only wish to include the @syntax-highlighting styles rather than using the default build or a custom one, you could use:
+ Each subdirectory available in github.com/lowlighter/matcha/styles is also served directly from this
+ website. For example, if you only wish to include the @syntax-highlighting styles rather than using the default build or a custom one, you could use:
- However note that unless you provide your own CSS variables, you will most likely need to include the @root package as it contains all matcha.css variables definition.
+ However note that unless you provide your own CSS variables, you will most likely need to include the @root package as it contains
+ all matcha.css variables definition.
+ matcha.css defines also defines its CSS variables using the :host pseudo-class, which
+ makes it compatible with shadow DOMs.
+
+
+
+ *The following element is contained within a shadow DOM.
+ It is isolated from the rest of the document so you may import matcha.css again and use other custom styles
+ without conflicts.
+
+
+