• Home
  • About
Post header banner
User's profile
lowlighter 🦑 Published on May 24 • 2 min read

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. Highly customizable and perfect for simple websites and prototyping web apps!

Checkout matcha.mizu.sh for a full overview!