Beercss? Should we use something different?

[philter87]

We are fighting a bit with beercss, because it automatically applies some classes to certain elements.

Should we move to the official material design library (I was able to make that work) or maybe mdui?

But then we might also need another library for adding flex design.

<script type="importmap">
        {
          "imports": {
            "lit": "https://cdn.jsdelivr.net/npm/lit@2/index.js",
            "lit/": "https://cdn.jsdelivr.net/npm/lit@2/",
            "@material/web/": "https://cdn.jsdelivr.net/npm/@material/web@1/",
            "@lit/localize": "https://cdn.jsdelivr.net/npm/@lit/localize/lit-localize.js",
            "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/reactive-element.js",
            "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/",
            "lit-element/lit-element.js": "https://cdn.jsdelivr.net/npm/lit-element@3/lit-element.js",
            "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@2/lit-html.js",
            "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@2/",
            "tslib": "https://cdn.jsdelivr.net/npm/tslib@2/tslib.es6.mjs"
          }
        }
   </script>
  <script type="module">
    import '@material/web/common.js'
  </script>
  <style>
    :root {
      --md-ref-typeface-brand: Inter;
      --md-ref-typeface-plain: Inter;
    }
  </style>
...

<md-filled-button onclick="getById('dialog-id').show()">Filled</md-filled-button>

  <md-dialog id="dialog-id">
    <div slot="headline">Title</div>
    <div slot="content">Dialog content</div>
  </md-dialog>

[signekb]

@philter87 where do you stand on this currently? :)

[philter87]

@philter87 where do you stand on this currently? :)

I am currently, okay with Beercss :) Let's see how it goes with the current sprint when we need to style according to designs