What's the best way to learn CSS for home assistant

Configuration Frontend
1

Hi, I hope this is the right place to post this question. Lately i’ve been becoming a bit more ‘advanced’ in my home-assistant integrations. Maybe not advanced, but certainly have been integrating a lot more custom cards and wanting to take more control over the look-and-feel of the UX.

I’ve looked at the W3 Schools CSS Tutorial to get familiar with CSS, but I see a lot of things being used outside of just inline editing which i’d like to get more familiar with.

So yes… I understand how to do this:

style:
  background-color: #FF0000

But there are some really great CSS-heavy cards out there, and when I copy the snippets they work, but Im not sure what a lot of that is… Particularly the element selectors.

Here are some head-scratching examples.

 style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
          box-shadow:none;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
  • How can i learn what $: means
  • What does the pipe do? It seems to be at the start of every style invocation.
  • What is : and :host. Are these Psuedo classes/elements? What does HA support?
  • how can i identify the attributes (.mdc-dialiog) that are available for editing so i know what they are and what i can do with them?
    *why do some of these things have – (are these variables?)

I recently discovered swiper-card through this awesome implementation. When i reviewed his git repo, i discovered how he moved pagination bullets to the top of the page, instead of overlapping at the bottom as mine was.

type: custom:mod-card
  style: 
    swipe-card:
      $: |
        .swiper-pagination {
          top: 2px;
          height: 1vw;
          }
  card:

Anyway, I guess my question is –

how can i get more proficient at understand what this stuff does, what’s available etc.

Right now i parrot and copy the work of others… its been cool, but i also hate to bother folks about how they did something when i dont really understand enough. Does anyone have or know any resources that might help accelerate the learning curve.

1 Like
2

OK – I think my new rule for learning how to take advantage of these capabilities is… “Start Small” Instead of trying to use 4 different custom cards that are nested and trying to understand CSS, i’ll start with one card and build from there.

I found this link… It’s been really helpful and walks through examples for pretty much everything.

Hopefully this helps someone else who is trying to do the same thing

5 Likes