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!
Top comments (83)
you had me at "Without really doing anything,"
Lazyness is a virtue !
Same here xd
Me too!!
had to login just to say how chatgpt generated this looks.
no kidding, we need a new emoicton/reaction to flag this stuff (yes i know there's reporting but i require MOAR SARCASM)
this is so goood!, i just tried it for a quick interface for my api to showcase and i quickly remembered about this and it does wonder
Wow looks super nice!
you had me with the cute logo! thank you for sharing <3
Yep!
As a mainly backend focused dev, I couldn't be more happy. To have a way to reduce my time with frontend and ACTUALLY the actual tags of HTML makes me feel joyful.
That's a great idea. Always good to be joyful.
Hi! Your library seams nice and better than PicoCSS
Salut depuis l'Île de France par ailleurs 😉
Thanks a lot for your feedback !
Bonjour depuis Québec 🥐 !
Awesome!
This seems interesting, but I'm having a hard time finding a real use case for this in a long term project. Do you expect people to just replace this after a while? Is this just something where people are too lazy to write their own CSS and they use this instead and never do anything with CSS? Who is using this sort of thing?
This is mostly intended for demo and prototyping I'll say, for example code playgrounds, small apps, home labs dashboards, students projects, etc. and like you said people that don't really want to write CSS (like backend devs that just need a simple front UI). I think it answers quite a lot of use-cases in a more hobby-ist development.
However I do think it becomes less revelant in large projects or professional ones as usually you'd want more identity and branding (although matcha is customizable, using a CSS framework may be more suited in these case)
I think it fits very well for documentation pages and not only for demos or prototyping.
I'll definitely gonna use it in the freeCodeCamp's Technical Documentation Page project. :)
Thanks for sharing it!
I think you underestimate people's lazyness...
This is quite impressive; it's definitely going to be added to my favorites bar.
Looks really nice. Did you do this yourself?
Thanks !
Yes, I actually did this because I have a lot of small projects where I consistenly end up doing some kind of similar UI (mostly home lab dashboards and small apps) so I just decided to make it easier. That's also why it's not entirely "class-less", the syntax highlighting classes are enabled by default since I oftent use highlight.js in markdown generated docs but it's tedious to include both stylesheet from hljs to support dark/light modes
Oh that's really cool!
nice, this looks good!!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.