10 ms·

Matcha.css – Drop-in semantic styling library in pure CSS

296 points by popcalc 2y ago

TekMol 2y ago
Not sure I get it. It sounds like it is a css file which styles standard html elements. But I'm not sure. If so, where is the css file? And what are those 200 files in the git repo?
- deleted 2y ago
  [deleted]
- deleted 2y ago
  [deleted]
- croes 2y ago
  There is a link to the CSS under Usage. https://matcha.mizu.sh/#usage https://matcha.mizu.sh/#usage https://matcha.mizu.sh/matcha.css https://matcha.mizu.sh/matcha.css
- 0cf8612b2e1e 2y ago
  These classless libraries are for quick/MVP style web apps where you just need to give the user one or two forms and some help documentation. I use them all the time for internal stuff because it lets me write some dirty html and have the backend do the real work while not looking browser-default-hideous. If you need something more complicated, these are probably not meant for you.
  - easyThrowaway 2y ago
    Yep. I love the idea behind those libraries but I can't think of any production environment where I would use them without crippling any future change. You'd be forced to silo every custom component from the main stylesheet.
    - lowlighter 2y ago
      Yeah I don't think this is meant to be used for a production environment. I wrotten this mostly to style my hobby projects effortlessly Anyway more "professional contexts" probably have their own branding too, so the added value is probably negligeable in this case
- lowlighter 2y ago
  Yes it's exactly as you guessed it The hundreds of files in the repo are just for maintainability and organization, but in the end it'll result in a single file to include, although you can also individually select which part you want to include if you'd like
utcursch 2y ago
Looks promising -- I have been using Simple.css: https://simplecss.org/ https://simplecss.org/ A cursory look suggests that matcha.css is a little more advanced. Will give it a shot.
- aitchnyu 2y ago
  And looks more 2020s than 2010s. The prejudice was imparted to me from other devs and I comply to avoid unfavorable first impressions with my software.
- dsego 2y ago
  There is a whole slew of classless (semantic) css libraries. Some examples: - https://andybrewer.github.io/mvp/ - https://oxal.org/projects/sakura/ - https://yegor256.github.io/tacit/ - https://chimera-demo.vercel.app/ - https://watercss.kognise.dev/ - https://missing.style/ Alas, matcha doesn't even look that promising. There is no demo page to quickly see styled elements, the color palette is garish and the default button hover is illegible, with dark background on dark text. It certainly needs more polish.
  - lowlighter 2y ago
    I actually love sakura, but I wanted something more complete like having syntax-highlighting styles out-of-the-box and still have some utilities classes. The demo page is supposed to be the website itself which is intended as a documentation too (you also have a basic website previewer at the begining). It definitely needs some more polish, but I wasn't expecting this being posted on HN this early
    - dsego 2y ago
      Ah, completely missed the documentation being the demo, didn't want to sound that negative. There is definitely a lot of hard work put into it.
blackhaj7 2y ago
Love it
zeamp 2y ago
[flagged]
runlaszlorun 2y ago
I love little libraries like this. I currently use pico.css and will check this one out. This is what our standard DOM elements in the browser should look like. But given that they don’t, there’s libraries like this. I googled what “classless” meant for this library after another user commented and found the link below if folks are interested in similar libraries. https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css
- kevincox 2y ago
  > This is what our standard DOM elements in the browser should look like. I agree with this, but it would also be a nightmare for people trying to make their own styles. Even the current default styles are a bit annoying for this. I've long dreamt of some sort of way to switch between some sort of chrome vs content styles. So for my navbar and embedded visualizations/interactive elements I switch to chrome mode and get minimal default styles (maybe just font size, font family and text colour) but the main content of the article can get the user's preferred styles.
  - p4bl0 2y ago
    > I agree with this, but it would also be a nightmare for people trying to make their own styles. Even the current default styles are a bit annoying for this. The obvious solution would be a CSS instruction that really reset (like everything to 0, none, etc. — not to default styles) all properties for the selected elements and its children. Something like: :root { default-style: none; } /* could be "none" for reset, or "default" to apply the user-agent default style */
    - shiomiru 2y ago
      Isn't what you want basically *, *::before, *::after { all: unset } ?
      - p4bl0 2y ago
        Ah, yes, I didn't know about the all property! Thanks :).
nithou 2y ago
Looks interesting, but removing the underline for links and only rely on colour except on hover is a big no on the accessibility side
- progx 2y ago
  Color blind people could add css extension that underline / highlight links. Blind people use a screen reader / braille display, they not need an underline. Who else needs underline?
  - deleted 2y ago
    [deleted]
  - bryanrasmussen 2y ago
    the theory is everyone needs underline because not clear otherwise things are links - therefore needing underline come under people with visual disabilities but not thoroughly blind and cognitive issues like not having had any coffee yet despite being up all night, can't think of others offhand.
  - dixits 2y ago
    > Color blind people could add css extension that underline / highlight links. imo, if you're building a new library, this level of accessibility should be baked in. Given the aim of the library to have better css defaults, expecting developers to override the link styling to add underlines or expecting the users to install browser extensions to do that, feels like a weird requirement.
    - silverwind 2y ago
      Underline links are subjectively ugly and it looks like outdated design.
      - digging 2y ago
        Those are objectively bad reasons for abdicating accessibility though. Subjectively, I also don't agree that it's ugly. There are also other options like border-bottom or dashed underline or pseudo-elements with additional symbols. (However, I'm not sure color-only link distinction is actually an issue. It's never been considered problematic in accessibility reviews of the corporate sites/apps I work on professionally.)
traviswt 2y ago
Obligatory link to Swyx's Spark Joy repo: https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-in-css-frameworks https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...
- password4321 2y ago
  Top 10-ish: https://news.ycombinator.com/item?id=39793513#39795288 https://news.ycombinator.com/item?id=39793513#39795288 Another list mentioned in that discussion that includes screenshots: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css There are so many options! The most valuable info at this point is how usage works out in practice.
deleted 2y ago
[deleted]
chadsix 2y ago
I appreciate the preview functionality which lets you see how it would look on another website. Really intuitive and makes sense on a css-page.
Fischgericht 2y ago
For 30 years we had proportional scroll bars as a standard control. You could see how much of a document your current window is showing. You could click onto the bar to easily jump to a section relative to the document size. You could use the arrow buttons on the top and bottom of the scroll bar. You could tab to it and use the keyboard. If you were impaired in vision or motion, you could use your operating system settings to increase contrast or make them bigger. And now it's 2024, and people on the web routinely cripple scroll bars to make them an UX nightmare. The enshittification of UI/UX in browsers due to CSS allowing to completely ruin OS-provided standard controls that used to work just fine is a disgrace. Please don't use this.
- spartanatreyu 2y ago
  Hard disagree. OS provided standards controls became worse over time. (see: Apple's disappearing scrollbar and rounded checkboxes) We can't easily change those, but we can use CSS to at least improve upon those standard controls.
  - Fischgericht 2y ago
    I'm using Windows 10 and Linux, and both provide working standard controls. Just because Apple is on a mission to ruin their standard controls does not mean those on other operating systems should artificially be forced to also get their UX ruined. I know HN looks dated. But the very textarea control I am writing in right now can be resized with a standard grab handle, and has working scrollbars and keyboard navigation.
    - WorldMaker 2y ago
      With Windows 11 Microsoft is trying to copy Apple's homework. The Windows 11 standard controls are still subtly better than Apple's, as Microsoft still has a lot of dedicated accessibility teams that have strong voices, but some of Microsoft's designers in the Windows 11 era are giving the impression that they want to be as bad as Apple, if not worse, if they were given the choice and didn't have accessibility teams to be accountable to.
mushufasa 2y ago
I love the concept of re-invigorating html as the only source of truth for document layout -- and I totally see this being productive for documents that don't need complex design. That said, I don't love the default design choices here -- colors and "polish." I'm not a professionally trained designer, but I've hand rolled enough software that users eventually complained about to sense when something "feels off" compared to what a really good designer creates with a background in color theory, information density, gradient shadings etc. If the author is here, have you considered leveraging the aesthetics from other FOSS projects like bulma or tailwind, or collaborating with a professional designer? I know jgthms is sometimes on this site.
- kitd 2y ago
  There's a section on the site where you can create your own custom build allowing you some control over basic styling choices. But yes, designers trying to conform to a corporate look can spend hours on spacing etc. I suspect this isn't for them.
- dixits 2y ago
  I agree! One example of something that feels off is the button styling on hover, dark backgrounds with black text doesn't work well aesthetically or for accessibility. Having a more polished default set-up will be the cherry on top.
- freedomben 2y ago
  I get the "feels off" too, but I've had that happen with designer-made things too. It looks good enough that to me it seems as though someone with some decent design skills and/or a newer designer created it. The longer I look at it the better it looks overall, but the stronger the "slightly feels off" feeling gets. Pretty wild! Edit: I think maybe the color on the tea cup is what is feeling a little off to me. Overall I love the logo, but I perhaps if the tea cup color was changed to be closer to the background color at the top?
- lowlighter 2y ago
  Thanks for the constructive feedback! To be honest I was kind of taken aback seeing this on HN because it was posted before I could do a show hn myself I'm not a frontend dev nor a designer so it can be indeed apparent that I lack knowledge on color theory, accessibility concerns and other aspects that may seem obvious for other people. Probably hence the "artisanal" feel too. I'll research more about the things you mentioned in the future. As for collaboration with a professional designer I'm open to receive advices, but I don't plan especially on hiring one as it's a side project. I don't think currently that professionals are the target audience for it, but I guess it'll definitely appeal more to hobbyist
unsober_sailor 2y ago
Ten points to whomever delves the deepest when recursively previewing the site's preview. I'm disappointed with Safari's performance on mobile[1]. What a creative way to demonstrate the lib. I'm excited to give this a try; I hope it's as graceful as demonstrated! 1. https://ibb.co/sHrc0Fc https://ibb.co/sHrc0Fc
- lowlighter 2y ago
  Ok this made me laugh xD
efilife 2y ago
So this is just another classless css framework? They are coming out faster than js frameworks. The logo is beautiful btw
avidphantasm 2y ago
Why are there still new CSS frameworks being made? Why isn’t this stuff a solved problem?
- dinkleberg 2y ago
  This is not a CSS framework, this is a stylesheet you import when you don’t want to think about CSS or styling but want a site that looks alright.
  - lowlighter 2y ago
    Yes this is exactly the goal of this project Some people aren't specialized in front-end (or they just find it boring) so they're more the target audience. I did this because I wanted to avoid having to redo an UI each time I started a new hobby project While there are customization options, it's really intended as just being an include without the need of changing anything else in your documents
- WorldMaker 2y ago
  A lot of CSS is about art and aesthetics. CSS work will never be "done". There will always be new stylesheets and "frameworks" as long as artists want to express themselves in the medium of the web.
ndz 2y ago
site down https://github.com/lowlighter/matcha https://github.com/lowlighter/matcha
thatxliner 2y ago
Looks like a GitHub markdown render
against_entropy 2y ago
It looks like an encapsulated math-specific tailwind
novoreorx 2y ago
I think we may need a tool to generate classless CSS frameworks like this, so that everyone can fine-tune color palette, paddings, font sizes an so on
leggomuhgreggo 2y ago
As a grandpa, I love this.

296 points by popcalc 2y ago

Not sure I get it. It sounds like it is a css file which styles standard html elements. But I'm not sure. If so, where is the css file? And what are those 200 files in the git repo?

deleted 2y ago
[deleted]
deleted 2y ago
[deleted]
croes 2y ago
There is a link to the CSS under Usage. https://matcha.mizu.sh/#usage https://matcha.mizu.sh/#usage https://matcha.mizu.sh/matcha.css https://matcha.mizu.sh/matcha.css
0cf8612b2e1e 2y ago
These classless libraries are for quick/MVP style web apps where you just need to give the user one or two forms and some help documentation. I use them all the time for internal stuff because it lets me write some dirty html and have the backend do the real work while not looking browser-default-hideous. If you need something more complicated, these are probably not meant for you.
- easyThrowaway 2y ago
  Yep. I love the idea behind those libraries but I can't think of any production environment where I would use them without crippling any future change. You'd be forced to silo every custom component from the main stylesheet.
  - lowlighter 2y ago
    Yeah I don't think this is meant to be used for a production environment. I wrotten this mostly to style my hobby projects effortlessly Anyway more "professional contexts" probably have their own branding too, so the added value is probably negligeable in this case
lowlighter 2y ago
Yes it's exactly as you guessed it The hundreds of files in the repo are just for maintainability and organization, but in the end it'll result in a single file to include, although you can also individually select which part you want to include if you'd like

utcursch 2y ago

Looks promising -- I have been using Simple.css: https://simplecss.org/ https://simplecss.org/ A cursory look suggests that matcha.css is a little more advanced. Will give it a shot.

aitchnyu 2y ago
And looks more 2020s than 2010s. The prejudice was imparted to me from other devs and I comply to avoid unfavorable first impressions with my software.
dsego 2y ago
There is a whole slew of classless (semantic) css libraries. Some examples: - https://andybrewer.github.io/mvp/ - https://oxal.org/projects/sakura/ - https://yegor256.github.io/tacit/ - https://chimera-demo.vercel.app/ - https://watercss.kognise.dev/ - https://missing.style/ Alas, matcha doesn't even look that promising. There is no demo page to quickly see styled elements, the color palette is garish and the default button hover is illegible, with dark background on dark text. It certainly needs more polish.
- lowlighter 2y ago
  I actually love sakura, but I wanted something more complete like having syntax-highlighting styles out-of-the-box and still have some utilities classes. The demo page is supposed to be the website itself which is intended as a documentation too (you also have a basic website previewer at the begining). It definitely needs some more polish, but I wasn't expecting this being posted on HN this early
  - dsego 2y ago
    Ah, completely missed the documentation being the demo, didn't want to sound that negative. There is definitely a lot of hard work put into it.

blackhaj7 2y ago

Love it

zeamp 2y ago

[flagged]

runlaszlorun 2y ago

I love little libraries like this. I currently use pico.css and will check this one out. This is what our standard DOM elements in the browser should look like. But given that they don’t, there’s libraries like this. I googled what “classless” meant for this library after another user commented and found the link below if folks are interested in similar libraries. https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css

kevincox 2y ago
> This is what our standard DOM elements in the browser should look like. I agree with this, but it would also be a nightmare for people trying to make their own styles. Even the current default styles are a bit annoying for this. I've long dreamt of some sort of way to switch between some sort of chrome vs content styles. So for my navbar and embedded visualizations/interactive elements I switch to chrome mode and get minimal default styles (maybe just font size, font family and text colour) but the main content of the article can get the user's preferred styles.
- p4bl0 2y ago
  > I agree with this, but it would also be a nightmare for people trying to make their own styles. Even the current default styles are a bit annoying for this. The obvious solution would be a CSS instruction that really reset (like everything to 0, none, etc. — not to default styles) all properties for the selected elements and its children. Something like: :root { default-style: none; } /* could be "none" for reset, or "default" to apply the user-agent default style */
  - shiomiru 2y ago
    Isn't what you want basically *, *::before, *::after { all: unset } ?
    - p4bl0 2y ago
      Ah, yes, I didn't know about the all property! Thanks :).

nithou 2y ago

Looks interesting, but removing the underline for links and only rely on colour except on hover is a big no on the accessibility side

progx 2y ago
Color blind people could add css extension that underline / highlight links. Blind people use a screen reader / braille display, they not need an underline. Who else needs underline?
- deleted 2y ago
  [deleted]
- bryanrasmussen 2y ago
  the theory is everyone needs underline because not clear otherwise things are links - therefore needing underline come under people with visual disabilities but not thoroughly blind and cognitive issues like not having had any coffee yet despite being up all night, can't think of others offhand.
- dixits 2y ago
  > Color blind people could add css extension that underline / highlight links. imo, if you're building a new library, this level of accessibility should be baked in. Given the aim of the library to have better css defaults, expecting developers to override the link styling to add underlines or expecting the users to install browser extensions to do that, feels like a weird requirement.
  - silverwind 2y ago
    Underline links are subjectively ugly and it looks like outdated design.
    - digging 2y ago
      Those are objectively bad reasons for abdicating accessibility though. Subjectively, I also don't agree that it's ugly. There are also other options like border-bottom or dashed underline or pseudo-elements with additional symbols. (However, I'm not sure color-only link distinction is actually an issue. It's never been considered problematic in accessibility reviews of the corporate sites/apps I work on professionally.)

traviswt 2y ago

Obligatory link to Swyx's Spark Joy repo: https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-in-css-frameworks https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

password4321 2y ago
Top 10-ish: https://news.ycombinator.com/item?id=39793513#39795288 https://news.ycombinator.com/item?id=39793513#39795288 Another list mentioned in that discussion that includes screenshots: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css There are so many options! The most valuable info at this point is how usage works out in practice.

deleted 2y ago

[deleted]

chadsix 2y ago

I appreciate the preview functionality which lets you see how it would look on another website. Really intuitive and makes sense on a css-page.

Fischgericht 2y ago

For 30 years we had proportional scroll bars as a standard control. You could see how much of a document your current window is showing. You could click onto the bar to easily jump to a section relative to the document size. You could use the arrow buttons on the top and bottom of the scroll bar. You could tab to it and use the keyboard. If you were impaired in vision or motion, you could use your operating system settings to increase contrast or make them bigger. And now it's 2024, and people on the web routinely cripple scroll bars to make them an UX nightmare. The enshittification of UI/UX in browsers due to CSS allowing to completely ruin OS-provided standard controls that used to work just fine is a disgrace. Please don't use this.

spartanatreyu 2y ago
Hard disagree. OS provided standards controls became worse over time. (see: Apple's disappearing scrollbar and rounded checkboxes) We can't easily change those, but we can use CSS to at least improve upon those standard controls.
- Fischgericht 2y ago
  I'm using Windows 10 and Linux, and both provide working standard controls. Just because Apple is on a mission to ruin their standard controls does not mean those on other operating systems should artificially be forced to also get their UX ruined. I know HN looks dated. But the very textarea control I am writing in right now can be resized with a standard grab handle, and has working scrollbars and keyboard navigation.
  - WorldMaker 2y ago
    With Windows 11 Microsoft is trying to copy Apple's homework. The Windows 11 standard controls are still subtly better than Apple's, as Microsoft still has a lot of dedicated accessibility teams that have strong voices, but some of Microsoft's designers in the Windows 11 era are giving the impression that they want to be as bad as Apple, if not worse, if they were given the choice and didn't have accessibility teams to be accountable to.

mushufasa 2y ago

I love the concept of re-invigorating html as the only source of truth for document layout -- and I totally see this being productive for documents that don't need complex design. That said, I don't love the default design choices here -- colors and "polish." I'm not a professionally trained designer, but I've hand rolled enough software that users eventually complained about to sense when something "feels off" compared to what a really good designer creates with a background in color theory, information density, gradient shadings etc. If the author is here, have you considered leveraging the aesthetics from other FOSS projects like bulma or tailwind, or collaborating with a professional designer? I know jgthms is sometimes on this site.

kitd 2y ago
There's a section on the site where you can create your own custom build allowing you some control over basic styling choices. But yes, designers trying to conform to a corporate look can spend hours on spacing etc. I suspect this isn't for them.
dixits 2y ago
I agree! One example of something that feels off is the button styling on hover, dark backgrounds with black text doesn't work well aesthetically or for accessibility. Having a more polished default set-up will be the cherry on top.
freedomben 2y ago
I get the "feels off" too, but I've had that happen with designer-made things too. It looks good enough that to me it seems as though someone with some decent design skills and/or a newer designer created it. The longer I look at it the better it looks overall, but the stronger the "slightly feels off" feeling gets. Pretty wild! Edit: I think maybe the color on the tea cup is what is feeling a little off to me. Overall I love the logo, but I perhaps if the tea cup color was changed to be closer to the background color at the top?
lowlighter 2y ago
Thanks for the constructive feedback! To be honest I was kind of taken aback seeing this on HN because it was posted before I could do a show hn myself I'm not a frontend dev nor a designer so it can be indeed apparent that I lack knowledge on color theory, accessibility concerns and other aspects that may seem obvious for other people. Probably hence the "artisanal" feel too. I'll research more about the things you mentioned in the future. As for collaboration with a professional designer I'm open to receive advices, but I don't plan especially on hiring one as it's a side project. I don't think currently that professionals are the target audience for it, but I guess it'll definitely appeal more to hobbyist

unsober_sailor 2y ago

Ten points to whomever delves the deepest when recursively previewing the site's preview. I'm disappointed with Safari's performance on mobile[1]. What a creative way to demonstrate the lib. I'm excited to give this a try; I hope it's as graceful as demonstrated! 1. https://ibb.co/sHrc0Fc https://ibb.co/sHrc0Fc

lowlighter 2y ago
Ok this made me laugh xD

efilife 2y ago

So this is just another classless css framework? They are coming out faster than js frameworks. The logo is beautiful btw

avidphantasm 2y ago

Why are there still new CSS frameworks being made? Why isn’t this stuff a solved problem?

dinkleberg 2y ago
This is not a CSS framework, this is a stylesheet you import when you don’t want to think about CSS or styling but want a site that looks alright.
- lowlighter 2y ago
  Yes this is exactly the goal of this project Some people aren't specialized in front-end (or they just find it boring) so they're more the target audience. I did this because I wanted to avoid having to redo an UI each time I started a new hobby project While there are customization options, it's really intended as just being an include without the need of changing anything else in your documents
WorldMaker 2y ago
A lot of CSS is about art and aesthetics. CSS work will never be "done". There will always be new stylesheets and "frameworks" as long as artists want to express themselves in the medium of the web.

ndz 2y ago

site down https://github.com/lowlighter/matcha https://github.com/lowlighter/matcha

thatxliner 2y ago

Looks like a GitHub markdown render

against_entropy 2y ago

It looks like an encapsulated math-specific tailwind

novoreorx 2y ago

I think we may need a tool to generate classless CSS frameworks like this, so that everyone can fine-tune color palette, paddings, font sizes an so on

leggomuhgreggo 2y ago

As a grandpa, I love this.