Material Components Web VS less-docs

https://github.com/firebase/firebase-ios-sdk/issues/6115

https://github.com/material-components/material-components-w...

Two examples that come to mind but there are plenty

I highly recommend https://github.com/material-components/material-components-web

Latest stable version: v12.0.0 Github stars: 15.7K Development: active Long of active development: 8 years Active maintainers: 2 Contributors: 380 Number of commits: 6835 License: MIT Used by: 6K Github projects Git repository: https://github.com/material-components/material-components-web

Material design by Google

One other thought: have you tried vanilla JS plus a widget library such as Material Design Web? It might be good to get more comfortable with vanilla JS, using fancy widgets only where needed, and then later when you consider using a framework it will be that much easier to learn and work with.

First off, for your issue, I think it's very helpful to learn design and layout from a design system like Material.

One interesting thing to note about this example is the use of @material/mdc-auto-init which will auto initialize all your material components instead of manually having to attach to each one. That should make it easier with working with the dom.

Today I've managed to scratch-build Material Design's top app bar, in particular its behaviour of sliding up/down if the user scrolls down/up, without relying on libraries like Material Components Web or Material-UI.

If you are using a CSS pre processor like Sass / Less, which I strongly recommend you do, then you can create Mixins to achieve this. For example

We're going to use CSS language to build this CSS framework. I know that we've preprocessors such as Sass, Less, or Stylus. I also know that these preprocessors are great for this specific purpose. But, I'll not use them. Just simple and plain CSS language. Why? Because, I want to minimize the barrier to follow this series. I mean if you're planning to read these articles, chances are high that you know CSS. But, I can't assume similar for these preprocessors. Even it might possible that you haven't heard about them at all. Still, towards the end, we'll port the framework using Stylus.

less/less-docs - Documentation for Less.