DEV Community

Cover image for Make naked websites look great with matcha.css!

Make naked websites look great with matcha.css!

lowlighter πŸ¦‘ 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 an...
Collapse
 
phalkmin profile image
Paulo Henrique

you had me at "Without really doing anything,"

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

Lazyness is a virtue !

Collapse
 
fromchiapasdev profile image
Axel Espinosa

Same here xd

Collapse
 
aliirz profile image
Ali Raza

Me too!!

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
 
panditapan profile image
Pandita

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

Collapse
 
documendous profile image
Documendous

Yep!

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
 
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
 
fhmurakami profile image
Felipe Murakami • Edited

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!

Collapse
 
uridevs profile image
Javi Arroyo

I think you underestimate people's lazyness...

Collapse
 
foxy4096 profile image
Foxy4096

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

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
 
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
 
logarithmicspirals profile image
logarithmicspirals

This is awesome! I'll have to try this out on a project soon.

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.

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
 
guicadoret profile image
Guillaume CADORET

could be nice for info.cern.ch/hypertext/WWW/TheProj...
(but maybe a sacrilege..)

Collapse
 
kurealnum profile image
Oscar

This is SO amazing for beginners or anyone who just wants to see a pretty site without having to learn CSS.

Collapse
 
leonardorafael profile image
Leonardo Rafael Wehrmeister • Edited

I really like the semantic HTML + class-light/classless approach. There are others libs too, like Beer CSS.

Collapse
 
mtancoigne profile image
Manuel Tancoigne

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.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

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.

Great post, by the way. It's efficient and works well.

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

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 !

Collapse
 
teles profile image
Teles • Edited

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/

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

Thanks !
I wonder if GitHub pages actually accept new themes, I may look into it !

Collapse
 
hudy9x profile image
hudy9x

Thanks for sharing your awesome works. Love something simple but work

Collapse
 
rudransh61 profile image
Rudransh Bhardwaj

Broo yooo , it can actually make designing faster

Thanks

Collapse
 
lotfijb profile image
Lotfi Jebali

without doing anything πŸ˜‡πŸ˜‡πŸ˜‡

Collapse
 
percioandrade profile image
Percio Andrade

good :)

Collapse
 
algorodev profile image
Alex Gonzalez

love this library

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

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)

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

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)

Collapse
 
le_woudar profile image
Kevin Tewouda

Thank you for sharing! :)

Collapse
 
dr_kanya profile image
Umar Sani Kanya

Wow, so interesting I really love it, and would like to have more explanation on it.

Collapse
 
ppaanngggg profile image
ppaanngggg

lol, look so cool to me. I am really headache about style design

Collapse
 
ryver_dev profile image
Ryver

This is amazing!

Collapse
 
stokry profile image
Stokry

Really cool! I have something similar for my projects.

Collapse
 
krgreene profile image
Khalil Greene

Thanks for this. Simple and effective.

Collapse
 
officialphaqwasi profile image
Isaac Klutse

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.

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

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 !

Collapse
 
yowise profile image
a.infosecflavour

That's so cool!

Collapse
 
saurabhkurve profile image
Saurabh Kurve

Wow, This is quite interesting!

Collapse
 
shyam_10 profile image
Shyam raj

Wow, this is exactly what iam looking for, going to implement this for my next project. Thanku❀️

Collapse
 
nocer profile image
KAMALI INNOCENT

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?

Collapse
 
lowlighter profile image
lowlighter πŸ¦‘

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.css

The website also offer a custom builder if you want to add/remove features

Collapse
 
guibleme profile image
Guilherme Barbosa Leme

My gooodness this is god tier

Collapse
 
gwendolyn_dev profile image
gwennie

I can't wait to try this out. Thanks so much for sharing!

Collapse
 
fromchiapasdev profile image
Axel Espinosa

Really impressive library. I'll give it a try. Thanks for sharing πŸ’‘

Collapse
 
ghadzhigeorgiev profile image
Georgi Hadzhigeorgiev

That's actually very handy, thank you for bringing attention to it!

Collapse
 
usama4745 profile image
Usama

well that is so amazing

Collapse
 
miialainen profile image
Miia

I will try! :)

Collapse
 
jackrkennedy profile image
Jack Kennedy

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

Collapse
 
trinhryan profile image
Nguyễn Văn Trình

Thanks for sharing

Collapse
 
shawnpconroy profile image
Shawn P. Conroy

This is incredible work. I like the semantic approach because it's more meaningful and easier to read than a bunch of divs everywhere. I especially liked it here because I learned some new things just reading your documentation. No legacy workarounds here! I've read so many CSS framework docs and never learned new HTML. I've not heard of the ruby tag before and think that can be useful for some of my projects. I'm not sure if I'd heard about the menu tag or not, but I forgot it. I'll remember it now!

As a drop in lightweight semantic styling library, this is fantastic. I've been rewriting some smaller websites I maintain for community groups and decided to drop this in, and it works as a great foundation for several of them. With some key CSS on top of it.

The thing that really had me scratching my head is that apparently your aside style in a section doesn't have a max-width. And so when I put in my ul with long lis it took up the full width of the section. In my CSS file I slapped on a max-wdith: 33% or similar because an aside shouldn't be that big by default.

Since I often find that many of the frameworks are not right enough that I end up with enough of my own code, I think I will use this for many a small and medium project where warranted.

Collapse
 
kansoldev profile image
Yahaya Oyinkansola • Edited

This is nice, I have never heard of drop-in CSS libraries before, is it like a new thing in the CSS world?

Collapse
 
bossysmaxx profile image
BossySmaxx

man that is great!! this is what I needed for my blogging website

Collapse
 
legaciespanda profile image
Ernest Obot

Wow 😳

Collapse
 
lucasfrazao profile image
Lucas Frazao

I'm so happy to find this post, thx for sharing!

Collapse
 
amandamartindev profile image
Amanda

It says a lot about me that I was sold on trying it before I read the article bc of the cute logo

Collapse
 
vegeta03x profile image
Aditya Bagale

Seems like a decent start for a begineer like me!!

Collapse
 
zonxen profile image
Jovan Emmanuel

Cool, instant beautify!πŸ”₯

Collapse
 
eddiegulay profile image
Eddie Gulay

Image description

Collapse
 
hernan_bruno_0710bf7373c7 profile image
Hernan Bruno

Excellent !

Collapse
 
realcodycordova profile image
Cody Cordova

love this

Collapse
 
ahmad_elkomey_work profile image
Ahmad ElKomey

Lovely! Good to know. Thanks for sharing.

Collapse
 
alexcatchick profile image
Alex Catchick

good work!