Matcha.css – Drop-in semantic styling library in pure CSS | Hacker News Reader

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

matcha.mizu.sh

296 pointspopcalc57 comments

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.

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.

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.

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?

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

The only thing I picked up on is probably <aside> should be floated the other side on RTL. I need to go fix this on my Arabic CSS myself now that I thought about it.

Here's a possible all-CSS solution:

https://stackoverflow.com/a/69630308/17917884

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

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

> 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 */

Isn't what you want basically

   *, *::before, *::after { all: unset }

?

Ah, yes, I didn't know about the all property! Thanks :).

Doesn't `all: unset` do this already? As in, it even removes all user-agent default styles.

Indeed!

Having been building websites since the mid 90's, I think the biggest challenge with that is actually breaking existing sites. Nowadays when you start a new site you almost always start with CSS, but that wasn't always the case and even today there are still sites that use the default styles as a baseline and just tweak as they go.

If we replace the default styles, a ton of sites are going to look very different than they were intended. We could do an "opt in" though that should be very easy to declare (similar to new versions of HTML, such as HTML 5) and get you on the new default style. I think that would be great!

You have also websites to test them directly, this is one I know https://www.cssbed.com/

I love pico.css! It's the sweet spot for me in being quick and easy to learn but still very capable.

Flask + HTMX + AlpineJS + PicoCSS is currently my "All Python and HTML SPA"

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

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?

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.

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

Underline links are subjectively ugly and it looks like outdated design.

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

8% of men are colour blind. Not taking that into account when designing UI is ... interesting to put it lightly.

Afaik, there is no black/white/blue variant of color blindness.

I’m not blind or color blind, but I prefer links to be underlined as a visual cue that it’s going to take me to a different page instead of doing something javascripty.

Looks promising -- I have been using Simple.css: https://simplecss.org/

A cursory look suggests that matcha.css is a little more advanced. Will give it a shot.

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.

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.

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

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.

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

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.

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.

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.

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.

At least you can turn on the visible scrollbars in macOS. I do.

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.

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

Top 10-ish: https://news.ycombinator.com/item?id=39793513#39795288

Another list mentioned in that discussion that includes screenshots: 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.

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

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.

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

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.

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

Ok this made me laugh xD

It looks like an encapsulated math-specific tailwind

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

Looks like a GitHub markdown render

As a grandpa, I love this.

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

Love it

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?

There is a link to the CSS under Usage.

https://matcha.mizu.sh/#usage

https://matcha.mizu.sh/matcha.css

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.

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.

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

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

Reply on news.ycombinator.com