New entities card

Good morning all,

with Home Assistant releasing their “Dashboard chapter 2”, it seems the shift will soon go to tile card design. Maybe this is the moment to update other cards as well, within these guidelines.

I want to help, but I only understand HTML, CSS and JS. Not Python and the import, functions and structure used on Github (yet…)

Does someone maybe want to help me in updating the entities card in Home Assistant?

I recreated the design below using plain HTML/CSS,. This is what I think will match the tile card. I used the example from the current entities card. (Entities card - Home Assistant) .

Feel free to let me know what you think!

image

Regards,

Douwe

If you do so, make sure to use overridable CSS variables where possible, and do not hardcode fonts and styling inside the card itself…

I don’t know if this is the preferred way to proceed on this. But to me it is more likely that the current cards in HA itself are going to be updated all together, and we get rid of the Mushroom cards and convert them into proper HA cards (without any reference to Mushroom).

Great initiative! And good luck…

1 Like

Thank you!

I will not… Most of my pull requests for Home Assistant at the moment are to fix this hardcoding. Last example was with the “new” badges, they hardcoded variables in the style :smiling_face_with_tear:, which defeats the purpose of using variables.

That sounds great!
Would love to help out with that, although not sure hoot setup a development environment locally atm.
There are plenty of places that need some serious attention/love to fix hard-coded styling and separate these from function…

What tutorials did you used to get up-and-running and provide a local development environment, and finally make the pull requests?