DEV Community

Cover image for Make naked websites look great with matcha.css!
lowlighter πŸ¦‘
lowlighter πŸ¦‘

Posted on

Make naked websites look great with matcha.css!

Have you ever contemplated the bareness of starting from a "blank page" when beginning a new web project?

Blank page

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Matcha page

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

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!

GitHub logo lowlighter / matcha

🍡 Drop-in semantic styling library in pure CSS.

Checkout matcha.mizu.sh for a full overview!

Top comments (71)

Collapse
 
phalkmin profile image
Paulo Henrique

you had me at "Without really doing anything,"

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

Lazyness is a virtue !

Collapse
 
aliirz profile image
Ali Raza

Me too!!

Collapse
 
fromchiapasdev profile image
Axel Espinosa

Same here xd

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
andremantas profile image
AndrΓ© Mantas

had to login just to say how chatgpt generated this looks.

Collapse
 
jocomvag profile image
Jocom Vag

no kidding, we need a new emoicton/reaction to flag this stuff (yes i know there's reporting but i require MOAR SARCASM)

Collapse
 
fazicodes profile image
fazicodes

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
Image description

Collapse
 
documendous profile image
Documendous

Wow looks super nice!

Collapse
 
tpacce profile image
AngelloFD

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.

This sparks joy meme lady with the caption

Collapse
 
documendous profile image
Documendous

That's a great idea. Always good to be joyful.

Collapse
 
panditapan profile image
Pandita

you had me with the cute logo! thank you for sharing <3

Collapse
 
documendous profile image
Documendous

Yep!

Collapse
 
foxy4096 profile image
Luluz

This is quite impressive; it's definitely going to be added to my favorites bar.

Collapse
 
otomatyk profile image
Otomatyk

Hi! Your library seams nice and better than PicoCSS

Salut depuis l'Île de France par ailleurs πŸ˜‰

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

Thanks a lot for your feedback !

Bonjour depuis QuΓ©bec πŸ₯ !

Collapse
 
documendous profile image
Documendous

Awesome!

Collapse
 
leonblade profile image
James Stine

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?

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

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)

Collapse
 
uridevs profile image
Javi Arroyo

I think you underestimate people's lazyness...

Collapse
 
ricardogesteves profile image
Ricardo Esteves

nice, this looks good!!

Collapse
 
satabda_mandal_f845ac7589 profile image
Satabda Mandal

Haven't gone through the documentation but can anyone explain how it is beneficial than bootstrap or other css framework?? Is matcha.css compatible with single page framework or libraries like react or angular??

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

It's supposed to be a "drop-in" stylesheet and not a framework, meaning you're not expected to change your HTML document structure in any way (like adding adding classes, wrapper div, etc.).

See it really like switching from the default browser stylesheet to a more "stylised" one.
It still has some additional features (like classes for syntax highlighting or simple layout), but these are optional

It may or not work with react/angular depending on how you design your components. If they're mostly <div> with class on them it may not be very beneficial, but if you're using more precise one like <nav>, <menu>, <section>, etc. it'll work as advertised

Collapse
 
documendous profile image
Documendous

Yeah, this just makes your base styles look good from the beginning and then you can use something like tailwind to make it look even better (or more to your taste).

Collapse
 
documendous profile image
Documendous

Looks really nice. Did you do this yourself?

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

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

Collapse
 
documendous profile image
Documendous

Oh that's really cool!

Collapse
 
apperside profile image
Apperside

Very nice concept, I didn't try it but it looks to me that it only works if you are very strict about semantic, that it's not a bad thing btw

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

It'll definitely lose some efficiency, but can still be worth it since there are still style for styling text, paragraphs, hyperlinks, lists, etc.

Collapse
 
codecruncher86 profile image
Chris Newton

This is exactly what I have been looking for! Thanks for the share!

Collapse
 
ramonortegajr profile image
R A M

This is really another game changer for web developers, thanks for this will review it.

Collapse
 
closetgeekshow profile image
closetgeekshow

This is great! I made a little bookmarklet script to inject it on any site, been reading a lot of old old web pages lately and bare html is just so hard to read sometimes - this'll be a huge help.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.