The intent was to create a simple and minimalistic UI, with a scalable design (for smartphone and tablets, but also for PC monitors). I achieved this thanks to Layout Card Gridder, which allows you to set 2 breakpoints and relative cards layout.
Home View now has only one Breakpoint since I don’t need the third column (gridaeas 50% - 50% and 100%).
Clear and Slate Theme now have two options: you can decide if you want a Compact Header or hide it at all. Please check the yaml files and see the comments.
Splitted the popups code into another file for better organization.
Used CSS min for better visualization on mobile, thanks to KTibow
Code Changes
From
- type: 'custom:button-card'
entity: light.entity # Change this to the entity you want to control
icon: 'mdi:led-strip-variant'
name: Light
size: 30%
styles:
img_cell:
# You can adjust padding of the icon
- padding-left: 30px
- justify-content: start
card:
- margin: 5px
- width: 100px
- height: 100px
- ...
To
- type: 'custom:button-card'
entity: light.entity # Change this to the entity you want to control
icon: 'mdi:led-strip-variant'
name: Light
size: 30%
styles:
img_cell:
# You can adjust padding of the icon
- padding-left: 30px
- justify-content: start
card:
- margin: 5px
- width: min(25vw, 100px)
- height: min(25vw, 100px)
- ...