![Cover image for Make naked websites look great with matcha.css!](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fivsygiubvfu4y1li5mu9.png)
Have you ever contemplated the bareness of starting from a "blank page" when beginning a new web project?
index.html
Notice the lack of an...
For further actions, you may consider blocking this person and/or reporting abuse
you had me at "Without really doing anything,"
Lazyness is a virtue !
Me too!!
Same here xd
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
![Image description](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fga12848e54ehywrm253w.png)
Wow looks super nice!
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.
you had me with the cute logo! thank you for sharing <3
Yep!
This is quite impressive; it's definitely going to be added to my favorites bar.
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 you underestimate people's lazyness...
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!
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!!
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??
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 advertisedYeah, 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).
This is really another game changer for web developers, thanks for this will review it.
could be nice for info.cern.ch/hypertext/WWW/TheProj...
(but maybe a sacrilege..)
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
It'll definitely lose some efficiency, but can still be worth it since there are still style for styling text, paragraphs, hyperlinks, lists, etc.
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.
This is exactly what I have been looking for! Thanks for the share!
This is awesome! I'll have to try this out on a project soon.
This is SO amazing for beginners or anyone who just wants to see a pretty site without having to learn CSS.
I really like the semantic HTML + class-light/classless approach. There are others libs too, like Beer CSS.
I mostly use Water.css (I even have a bookmarklet to apply it to naked websites), but I'll definitively take a look at Matcha.
Wow, This is quite interesting!
Wow, this is exactly what iam looking for, going to implement this for my next project. Thanku❤️
Its seems to be super great though I am not sure if you have to be having internet for it to work?
How exactly can I use it?
If you use the directly the
<link>
provided you'll indeed need internet since it's a remote domain, but you can also fetch a local copy by just going to matcha.mizu.sh/matcha.cssThe website also offer a custom builder if you want to add/remove features
My gooodness this is god tier
I can't wait to try this out. Thanks so much for sharing!
Really impressive library. I'll give it a try. Thanks for sharing 💡
That's actually very handy, thank you for bringing attention to it!
well that is so amazing
I will try! :)
I never thought I would find you here (haha). The profile picture is the same as on GitHub. I'm a big fan of your metrics repo.
Thanks a lot !
Yeah I've not been very active on the metrics repo recently, but I'm actually planning to go back with new ideas and in a way that'll make it more maintenable in the future too !
without doing anything 😇😇😇
good :)
love this library
This is truly amazing!
All the best for the future.
Also, is there any way, I can contribute to this project? (as a front-end developer or technical writer)
I heard from some feedbacks that they were some accessibility issues (mainly to some color being hard to distinguish and links that should have kept underline).
It'd be nice to have some insights and advices from more knowledgeable people on these kind of subjects, because front-end is not my specialty ahah x)
Thank you for sharing! :)
Wow, so interesting I really love it, and would like to have more explanation on it.
lol, look so cool to me. I am really headache about style design
This is amazing!
Really cool! I have something similar for my projects.
Thanks for this. Simple and effective.
Thanks for sharing. This is going to bring joy to beginner programmers. At least you will get something beautiful to see before you start writing css.
I hope so !
And when programmers want to dwelve more into CSS and design, they can just remove the matcha.css stylesheet for a smooth migration without having to refactor their code that much !
That's so cool!
So nice! It would be awesome to be easily able to use matcha as page theme for GitHub Pages rendering README.md files just like these ones pages.github.com/themes/
Thanks !
I wonder if GitHub pages actually accept new themes, I may look into it !
Thanks for sharing your awesome works. Love something simple but work
Broo yooo , it can actually make designing faster
Thanks
Thanks for sharing
This is amazing, as a beginner in the web dev space, css styling can be so daunting and hard to get started, this is a game changer
man that is great!! this is what I needed for my blogging website
This is nice, I have never heard of drop-in CSS libraries before, is it like a new thing in the CSS world?
Wow 😳