lowlighter 🦑
Posted on May 24, 2024
Have you ever contemplated the bareness of starting from a "blank page" when beginning a new web project?
index.html
Notice the lack of any styling or custom attributes.
<html>
<body>
<h1>Hello world!</h1>
<p>
This is my new project, and it's still under construction.
Please be indulgent 😊
</p>
<p>
Also, check out my work on <a href="https://github.com/octocat">GitHub</a>!
</p>
<blockquote>
<p>
Imagination is more important than knowledge
</p>
<cite>Albert Einstein</cite>
</blockquote>
<menu>
<li>Home</li>
<li>
About me
<menu>
<li>My works</li>
<li>My passions</li>
</menu>
</li>
<li>Contact</li>
</menu>
<form>
<h2>Contact me</h2>
<label>
Your email:
<input type="email" name="email" placeholder="Your email" required>
</label>
<label>
Your message:
<small>255 characters max</small>
<textarea name="message" placeholder="Your message" required></textarea>
</label>
<button type="submit">Send</button>
</form>
</body>
</html>
Ouch! If you showed that to your friends while claiming you're a web developer, they would start questioning what you're really doing...
Default browser stylesheets are usually pretty bare-bones, and it can be frustrating to not have something "visually nice" when you're prototyping apps, generating static HTML pages, Markdown-generated documents, etc., and don't want to delve into CSS intricacies too early.
Good news! I have something perfect for you: matcha.css!
Just add the following into your document and see the magic happen:
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
Without really doing anything, we got a page that respects user preferences on light/dark mode, nice fonts and proper spacing, our <menu> actually looks like a menu, and our <form> is also pretty nice with even "mandatory field" indicators for required inputs.
All of that without any build steps, JavaScript, configuration, or refactoring.
It's because matcha.css uses semantic styling. For example, it assumes that <menu> nested in another <menu> should result in a submenu, while a <label><input required></label> should clarify to the user that the input is mandatory.
There are a few more "drop-in" CSS libraries out there, but I believe this is the most complete one as it provides additional modern styles out-of-the-box like syntax highlighting, simple layouts, utility classes, etc.
matcha.css is also easily customizable (it does not have any !important rules, and even provide a helper to create custom builds) and while being also reversible (if you ever decide to migrate out, just remove the stylesheet).
And last but not least, it's totally free and open-source!
lowlighter
/
matcha
🍵 Drop-in semantic styling library in pure CSS. Highly customizable and perfect for simple websites and prototyping web apps!
Checkout matcha.mizu.sh for a full overview!
Posted on May 24, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related