beercss VS sakura

We aim to create the following app: a left drawer displaying links to different pages, and when a click happens on a link, the right section prints the corresponding page. The style is powered with the Material Design CSS BeerCSS:

These articles form a series focusing on RiotJS paired with BeerCSS, designed to guide you through creating components and mastering best practices for building production-ready applications. I assume you have a foundational understanding of Riot; however, feel free to refer to the documentation if needed: https://riot.js.org/documentation/

This article covers how to create an Riot input component, using the Material Design CSS BeerCSS. Before starting, make sure you have a base application running, or read my previous article Setup Riot + BeerCSS + Vite.

Building Material Design application with RiotJS is pretty easy with BeerCSS, before starting, make sure you have created a Riot project running with Vite: https://dev.to/steeve/riotjs-vitejs-tutorial-fpn

👉 https://www.beercss.com

This is a very current point. Instead of having components for everything, why not directly use semantic HTML? You can have dialogs, buttons, cards among others, writing clean and unified HTML throughout the system. As semantic HTML is part of the web platform, it is independent of any framework/ecosystem, so you open up the range of options to use anything on your system. It's a blank page, ready to be colored however you want. I recommend a class-light approach as done at https://www.beercss.com. There are others too, just google it.

Join the community: https://github.com/beercss/beercss

- https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming. It comes with several existing themes, which can be found in the css folder of this repository.

If you do want to use a framework and get up and running quickly, but you still want to know what's going on and have some ability to customize it, maybe you can start with one of the really minimal CSS frameworks like Milligram or Sakura and then add your own modifications.

I'm a fan of Sakura[0] for this purpose. About the same size, with a recently-added dark version, which can do the OS-choice switch without javascript.

[0] https://oxal.org/projects/sakura/

I agree. That is why I actually just decided to use different css files for different themes in sakura.css [1] (it comes in at 3.8k / ~1.8k gzipped)

I also had friends who didn't want to understand CSS, and adding in media queries, variables, and dark mode support would only just confuse them even more.

[1]: https://github.com/oxalorg/sakura