Lovelace: A responsive grid card – themable-grid

nervetattoo · December 16, 2020, 6:07am

I want to share an experimental responsive grid layout card I’ve built as an alternative to the new grid card. It works like the grid card (minus square support) but its responsive and columns are configurable in your theme instead of as card config. I use grid cards in panel mode to handle layouts and I find that I want to use one responsive 3, 2, 1 columns grid for most main layouts.

Its functionality is best show in a simple video:
themable-grid-demo

It is experimental because of two things that’s not very common:

Configure with theme properties. With no global variables support this were the best idea I had for how to configure a lovelace card globally.
Its built using Svelte, not lit-element. I wanted to try Svelte just for fun and I wanted to show that you can use other frameworks than lit-element to build cards.

Card is not in HACS until I finalise it further. You need to install manually. I want to get feedback on the idea and possible further direction. Grab it here: https://github.com/nervetattoo/themable-grid

nervetattoo · December 16, 2020, 10:21am

There is one caveat as mentioned on GitHub: the child cards get a wrapping div which might or might not be a problem for any custom styling you do with card mod. The column and row styling for the children apply to that wrapper.

nervetattoo · December 17, 2020, 12:16pm

1.1 out, marking the real first release in a way. You can now specify arbitrary breakpoints, as many as you like. Card config can also be set on the card as well as on the theme. If you set it on a single card it will not be shared with the rest, kind of defeating my intended purpose, but nice for overriding.

Config format in your theme is now like this:

frontend:
  themes:
    my_theme:
      themable_grid:
        padding: 0
        gap: 8px
        breakpoints:
          - name: mobile
            mq: (max-width: 767px)
            columns: 1
          - name: tablet
            mq: (min-width: 768px) and (max-width: 1023px)
            columns: 2
          - name: desktop
            mq: (min-width: 1024px)
            columns: 3

This is the default config if you don’t configure the grid. But it showcases how you can supply any number of breakpoints.

nervetattoo · December 18, 2020, 8:49am

Added PR to get it into HACS as with 1.2 I’m quite happy with where it stands.
It now supports setting specific styles on the cards for specific breakpoints as well as for all breakpoints. Meaning you can now tell a card to span all columns on desktop only. I also renamed the default breakpoints based on intention, so mobile, tablet, desktop.

This now powers my layouts instead of the native grid card. Ideally I’d like to see this functionality in the built-in grid card though. Would love your thoughts on viability of that @baloob

uiguy · December 19, 2020, 10:56am

Please integrate or start the steps to integrate into official. There are so many custom components these days that it is getting quite messy… just have a look at the lyric integration about 3 different ways, each in varying stages of neglect, that pretty much do the same thing. This fragmented approach makes it really really really difficult for newbie to get up and running… I am more than happy to help with documentation and testing, bit you wouldn’t want me coding anything…

uiguy · December 20, 2020, 12:09pm

Live in HACS now… woop woop

nervetattoo · December 20, 2020, 2:01pm

Yey. Also with a change to how it’s configured. Turns out nested theme props broke the config check … I never realized because reload themes does not run a check and just using that it worked fine. Config now is on the root Lovelace config. Might look into adding support in HA for it in themes because themes should support keys for card specific config imo.

My end goal is also to eventually land on a responsive grid that can be merged into core yes, but experimentation first via a custom card is a good place to start.

MrJelly17 · March 23, 2021, 7:07pm

Hi, how to apply any styles to the cards? Like border: none ?

Nic0205 · May 25, 2021, 8:47am

Hey @nervetattoo ,

this approach looks amazing. For sadness i´m quite new to the home assistant stuff.
Could you give me an advice (as a noob) how to use this card?

For now I put `type: ‘custom:themable-grid’
cards:

  - type: markdown
    content: First
  - type: markdown
    content: Second
  - type: markdown
    content: Third`

in the raw-config editor of Lovelace at the top. But how can I use your card now?

Sorry for this stupid questions, but I still learn more - day for day…

nervetattoo · May 25, 2021, 9:33am

I’m not sure I follow. With that config you are using the card.
Your formatting were off but I assume this is what you have?

- type: 'custom:themable-grid'
  cards:
    - type: markdown
      content: First
    - type: markdown
      content: Second
    - type: markdown
      content: Third`

Remember that it is intended to be used in panel mode views, so here is a complete YAML dashboard with 1 view (tab in HA) that uses themable-grid:

name: Home
themable_grid:
  breakpoints:
    - columns: 1
      mq: '(max-width: 767px)'
      name: small
    - columns: 2
      mq: '(min-width: 768px) and (max-width: 1023px)'
      name: medium
    - columns: 3
      mq: '(min-width: 1024px)'
      name: large
  gap: 8px
  padding: 8px
views:
  - title: Overview
    icon: mdi:home-assistant
    panel: true
    cards:
    - type: 'custom:themable-grid'
      cards:
        - type: markdown
          content: First
        - type: markdown
          content: Second
        - type: markdown
          content: Third`

Nic0205 · May 25, 2021, 12:11pm

cool! Thank you.

Just another (perhaps the last) question: If I want two columns in mobile - what do i have to change?

I tried it with

themable_grid:
  breakpoints:
    - columns: 2
      mq: '(max-width: 767px)'
      name: small
    - columns: 2
      mq: '(min-width: 768px) and (max-width: 1023px)'
      name: medium
    - columns: 3
      mq: '(min-width: 1024px)'
      name: large

But that does not take any effect…

Could you help me once again?

Nic0205 · May 26, 2021, 11:16am

I tried different approaches - but I can’t figure it out.

My last try was:

name: Home
themable_grid:
  breakpoints:
    - columns: 1
      mq: '(max-width: 767px)'
      name: small
    - columns: 2
      mq: '(min-width: 768px) and (max-width: 1023px)'
      name: medium
    - columns: 3
      mq: '(min-width: 1024px)'
      name: large
  gap: 8px
  padding: 8px
  grid: null
  grid-column: null
  large: 2
views:
  - title: Overview
    icon: 'mdi:home-assistant'
    panel: true
    cards:
      - type: 'custom:themable-grid'
        cards:
          - type: markdown
            content: First
          - type: markdown
            content: Second
          - type: markdown
            content: Third`

@nervetattoo could you help me once again?

Nic0205 · May 28, 2021, 7:29am

hmmm - it’s driving me crazy

I changed it to:

name: Home
themable_grid:
  breakpoints:
    - columns: 2
      name: small
    - columns: 2
      name: medium
    - columns: 2
      name: large

And the result is still three cards in a row:

jonkristian · July 26, 2021, 9:26pm

Confirmed this, it’s not working on 2.1.0 but if you go back to 2.0.1 it seems to work.

akeslo · February 23, 2022, 11:41pm

Nic0205:

themable_grid:
  breakpoints:
    - columns: 2
      mq: '(max-width: 767px)'
      name: small
    - columns: 2
      mq: '(min-width: 768px) and (max-width: 1023px)'
      name: medium
    - columns: 3
      mq: '(min-width: 1024px)'
      name: large

Confirmed working on 2.0.1, thanks! Same issue on my side with 2.1.0