[HN Gopher] Matcha.css - Drop-in semantic styling library in pur...
       ___________________________________________________________________
        
       Matcha.css - Drop-in semantic styling library in pure CSS
        
       Author : popcalc
       Score  : 72 points
       Date   : 2024-05-23 15:31 UTC (7 hours 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.
        
       | 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.
        
       | 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 }          ?
        
         | jslakro wrote:
         | You have also websites to test them directly, this is one I
         | know https://www.cssbed.com/
        
       | 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
        
       | traviswt wrote:
       | Obligatory link to Swyx's Spark Joy repo:
       | https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...
        
       ___________________________________________________________________
       (page generated 2024-05-23 23:00 UTC)