return to table of content

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

runlaszlorun
9 replies
2d23h

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

kevincox
6 replies
2d23h

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
4 replies
2d21h

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
1 replies
2d20h

Isn't what you want basically

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

?

p4bl0
0 replies
2d4h

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

LoganDark
1 replies
2d18h

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

p4bl0
0 replies
2d4h

Indeed!

freedomben
0 replies
2d4h

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!

red_hare
0 replies
2d1h

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"

jslakro
0 replies
2d22h

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

nithou
8 replies
2d20h

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
7 replies
2d8h

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?

dixits
2 replies
2d7h

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
1 replies
2d3h

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

digging
0 replies
2d2h

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

logrot
1 replies
2d4h

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

silverwind
0 replies
2d3h

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

nozzlegear
0 replies
1d23h

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.

bryanrasmussen
0 replies
2d7h

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.

mushufasa
5 replies
2d16h

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.

lowlighter
1 replies
2d

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

qingcharles
0 replies
22h16m

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

kitd
0 replies
2d12h

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.

freedomben
0 replies
2d4h

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?

dixits
0 replies
2d7h

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.

TekMol
5 replies
3d1h

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?

0cf8612b2e1e
2 replies
3d1h

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
1 replies
2d10h

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
0 replies
1d23h

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
0 replies
2d

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
4 replies
2d23h

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.

dsego
2 replies
2d5h

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
1 replies
2d

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
0 replies
1d23h

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.

aitchnyu
0 replies
2d9h

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.

Fischgericht
4 replies
2d18h

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
3 replies
2d18h

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
1 replies
2d17h

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
0 replies
2d1h

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.

boxed
0 replies
2d11h

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

selimnairb
3 replies
2d7h

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

dinkleberg
1 replies
2d7h

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
0 replies
2d

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
0 replies
2d1h

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.

unsober_sailor
1 replies
2d16h

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

lowlighter
0 replies
1d23h

Ok this made me laugh xD

thatxliner
0 replies
2d3h

Looks like a GitHub markdown render

novoreorx
0 replies
2d

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
0 replies
1d13h

As a grandpa, I love this.

efilife
0 replies
2d12h

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

chadsix
0 replies
2d18h

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.

blackhaj7
0 replies
2d23h

Love it

against_entropy
0 replies
2d3h

It looks like an encapsulated math-specific tailwind