Discussion: Responsive Design and general Theming

[Fruchuxs]

Hello everyone,

I'm a Software Product Manager and Developer, who also designed and developed many responsive website over the years since 2013 as a hobby and a side job.
In general the theming in home assistant is rly complicated for a web designer, because of the "yamlfication" and top level abstraction. I can't easily define CSS rules for general card theming, or overwrite some rules which means the "cascading" in cascading style sheets. I'm depended of strange mods like mod-card and for responsiveness on bootstrap grid card, which are all not perfect solutions.

In one of the last updates you deployed the grid card and I was happy at first and now very frustrated, because the grid card is not responsive. On the desktop I want four cards in a row; looks nice. Looked on my smartphone and .. nope, can't use this.

Standard lovelace has also responsive problems: oh nice two cards in a row, added some other cards and now the rows are very small and squeezed because loveleace means to use two rows. I first thought it's flexbox, but then figured out that is something with CSS and JS.
I don't have any possibilities to define that I always want two rows with a min-widt of x%/rem/em/px/etc. Some peoples suggesting use the panel mode and wrap horizontal and vertical stacks together, but this is also not responsive on a smartphone; all things are squeezed together and not useable anymore on a small screen. On the other hand its also not nice on a desktop, because the panel mode always define 100% for the container and my cards drifted away and scaled badly because I can't define a max-width, or breakpoints.

Also the configuration of wrapping cards together is somewhat complicated. I always hit the point I enable yaml mode, copy all the yaml stuff into visual studio code and define the yaml there, because the build-in yaml editor doesnt recognize tabs order automatically .... For me - as a developer, it's just frustrating.

So what is a possible solution?
Define a "unmanaged"-view which can used to drop own CSS / SCSS, maybe in combination with yaml-keys like mod-card, or design a more user friendly view which can be configured with breakpoints and rows. Maybe add more abstraction and let use configure the position of cards with drag and drop in a pre defined grid.

I would be happy if other have idea which can be discussed here. Looked for similar tickets .. but found nothing.