Putting together a responsive dashboard (handling titles and sections)

Configuration Frontend
1

I’m new to home assistant and after a few months working my way through integrations and automations, it is time for me to start focusing on dashboards.

I’d like to build something similar to the Creston OS design. It is clean and would be easy enough for the whole family to adopt it. The idea is to use out of the box cards and functionality as much as possible (combined with the Google Theme). I’m open to custom cards or something like that as a last resort.

I experimented with with the horizontal stack and grid cards.
Adding a title to those kind of give me that section separation but if I make it look exactly the way I want on a mobile device it won’t look good on a tablet, I can’t figure out how to make the grid or stack responsive.

I’m shooting for something as close to this as possible:

image
image990×657 127 KB

It should be responsive and adapt to small screen lit his:

image

I appreciate any help and/or suggestions.

2

Look at tile card and picture glance card

3

Thanks, I think those cards are perfect for what I’m trying to achieve but the question remains, how can I make it response?

Take a look at the screenshot, section quick actions shows as a single row in the tablet view, taking all available with. In the phone screen it is two rows instead.

4
5

Thanks, these are the same i tried that doesn’t appear to be responsive.
lets say I add for tiles to the to horizontal stack card.

On a table or desktop where the screen is large, they will appear as for small tiles in the center of the screen.

On a phone where we should have a max of two tiles per row, they will still display 4, making them two small.

It sounds like something obvious, that should be there, but I can’t find it.

6

Yes

Add tile into horizontal stack and place the individual horizontal stacks into a vertical stack

Or some combination of this

You can also skip the tiles and use buttons directly in the horizontal and vertical stacks

These should all scale as needed but you have some options for sizing

7

I see what you are saying but I don’t think it works for the very same reasons I described.
I’m coming to a conclusion it is not possible with out of the box components (which comes as a shock to me). They say a picture is worth a thousand words so here is a picture of what you suggested. I put it together really quick by just throwing buttons out there for some of the lights I have downstairs:

image
image1357×660 39.5 KB

My observations:

  1. The vertical stack has a fixed with, it won’t screech to fill the available space.
  2. The horizontal stack is now limited by the fixed width of the vertical stack.
  3. The horizontal stack will shrink items to fit in the available with. No matter how many items you throw in there they will be in one row within that available space.

I can see it working for different use cases but not for these one.
It looks awful on a desktop or large screen tablet (when compared to the desired effect).

And it looks unusable on a mobile device since the buttons will keep shrinking to fit in the same row instead of breaking into another one.