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.
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.
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?
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 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.
> 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 */
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!
Color blind people could add css extension that underline / highlight links.
Blind people use a screen reader / braille display, they not need an underline.
> 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.
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.)
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.
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.
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
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.
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.
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.
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.
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.
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
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.