[HN Gopher] Matcha.css - Drop-in semantic styling library in pur...
___________________________________________________________________
Matcha.css - Drop-in semantic styling library in pure CSS
Author : popcalc
Score : 277 points
Date : 2024-05-23 15:31 UTC (1 days ago)
(HTM) web link (matcha.mizu.sh)
(TXT) w3m dump (matcha.mizu.sh)
| TekMol wrote:
| 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?
| croes wrote:
| There is a link to the CSS under Usage.
|
| https://matcha.mizu.sh/#usage
|
| https://matcha.mizu.sh/matcha.css
| 0cf8612b2e1e wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| aitchnyu wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Love it
| zeamp wrote:
| Here we go again...
| runlaszlorun wrote:
| 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 wrote:
| > 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 wrote:
| > 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 wrote:
| Isn't what you want basically *,
| *::before, *::after { all: unset } ?
| p4bl0 wrote:
| Ah, yes, I didn't know about the _all_ property! Thanks
| :).
| LoganDark wrote:
| Doesn't `all: unset` do this already? As in, it even
| removes all user-agent default styles.
| p4bl0 wrote:
| Indeed!
| freedomben wrote:
| 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!
| jslakro wrote:
| You have also websites to test them directly, this is one I
| know https://www.cssbed.com/
| red_hare wrote:
| 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"
| nithou wrote:
| 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 wrote:
| 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?
| bryanrasmussen wrote:
| 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 wrote:
| > 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 wrote:
| Underline links are subjectively ugly and it looks like
| outdated design.
| digging wrote:
| 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 wrote:
| 8% of men are colour blind. Not taking that into account when
| designing UI is ... interesting to put it lightly.
| silverwind wrote:
| Afaik, there is no black/white/blue variant of color
| blindness.
| nozzlegear wrote:
| 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.
| traviswt wrote:
| Obligatory link to Swyx's Spark Joy repo:
| https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...
| password4321 wrote:
| 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.
| chadsix wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| At least you can turn on the visible scrollbars in macOS. I
| do.
| mushufasa wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Ok this made me laugh xD
| efilife wrote:
| So this is just another classless css framework? They are coming
| out faster than js frameworks. The logo is beautiful btw
| selimnairb wrote:
| Why are there still new CSS frameworks being made? Why isn't this
| stuff a solved problem?
| dinkleberg wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| site down https://github.com/lowlighter/matcha
| thatxliner wrote:
| Looks like a GitHub markdown render
| against_entropy wrote:
| It looks like an encapsulated math-specific tailwind
| novoreorx wrote:
| 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
___________________________________________________________________
(page generated 2024-05-24 23:01 UTC)