Why not Card Mod?

[kattcrazy]

I'm interested in this, but I wonder what the benefits are? Can someone either tell me or link an answer. Thanks :)

The list in the documentation basically tells me it has a different name!

[dcapslock]

Check out my comment on a similar discussion.

Also since then UUX has evolved so you can check the CHANGELOG for new features which make UIX unique.

[kattcrazy]

Looks pretty cool actually. Foundries are helpful!

[kattcrazy]

Feature	Card-mod	UIX
Forge (custom lovelace element)	No	Yes
Foundries (reusable forges)	No	Yes
Macros (reusable jinja templates)	Maybe?	Yes
Sparks (premade elements to use inside forges)	No	Yes
CSS styling	Yes	Yes
Docs	No	Yes
Mod-Card	Yes	Yes
Frontend state throttling (optional)	No	Yes
Styling delay (optional)	No	Yes
CSS styling in themes	Yes	Yes
Resource url	Yes	No
Reload/Clear cache popup	No	Yes
Reload/Clear cache service/action	Yes	Unknown
Dashboard view backgrounds (note, promote this feature, its a bit hidden but a big one!)	No	Yes
Section backgrounds	Maybe?	Yes
Provides variables (e.g current user)	Yes	Yes
Prepend (instead of append, optional)	Yes	Unknown

Maybe you could help with a couple of the unknowns and maybes?

[dcapslock]

Feature	Card-mod	UIX
Forge (custom lovelace element)	No	Yes
Foundries (reusable forges)	No	Yes
Macros (reusable jinja templates)	No	Yes
Sparks (premade elements to use inside forges)	No	Yes
CSS styling	Yes	Yes
Docs	No	Yes
Mod-Card	Yes	Yes
Frontend state throttling (optional)	No	Yes
Dialog Styling delay (optional)	No	Yes
CSS styling in themes	Yes	Yes
Resource url	Yes	N/A
Reload/Clear cache popup	No	Yes
Reload/Clear cache service/action	Yes	Yes
Dashboard view backgrounds (note, promote this feature, its a bit hidden but a big one!)	No	Yes
Section backgrounds	No	Yes
Provides variables (e.g current user)	Yes	Yes
Prepend (instead of append, optional)	Yes	N/A <- Not really relevant for either since with both its automatic

Maybe you could help with a couple of the unknowns and maybes?

[kattcrazy]

Feature	Card-mod	UIX
Forge (custom lovelace element)	No	Yes
Foundries (reusable forges)	No	Yes
Macros (reusable jinja templates)	No	Yes
Sparks (premade elements to use inside forges)	No	Yes
Dashboard view backgrounds	No	Yes
Docs	No	Yes
Frontend state throttling (optional)	No	Yes
Dialog Styling delay (optional)	No	Yes
Reload/Clear cache popup	No	Yes
Section backgrounds	No	Yes
Mod-Card	Yes	Yes
CSS styling in themes	Yes	Yes
Reload/Clear cache service/action	Yes	Yes
Provides variables (e.g current user)	Yes	Yes
CSS styling	Yes	Yes
Resource url	Yes	N/A

[dcapslock]

I have published the table with links and some reordering. Thanks for the suggestion. https://uix.lf.technology/faq/

[kattcrazy]

Quick question, can I make a reusable chunk of styling to put on normal cards? Is that a feature? Thanks!

Like this...

display_order: none
type: todo-list
entity: todo.google_keep_groceries
hide_completed: true
hide_section_headers: true
grid_options:
  rows: 8
visibility:
  - condition: state
    entity: input_select.to_buy_list_lounge_panel
    state: Pack'N'Save
card_mod:
  style: |
    ha-card {
      backdrop-filter: blur(30px) brightness(0.9);
      -webkit-backdrop-filter: blur(20px) brightness(0.9);
      --ha-color-form-background: rgba(0, 0, 0, 0);

      max-height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    ha-sortable {
      flex: 1;
      overflow-y: auto !important;
      
      /* This creates the gap on the right, pushing the scrollbar inward */
      margin-right: 8px !important; 
      
      scrollbar-width: thin;
      scrollbar-color: {{ states('sensor.theme_hex') }} transparent !important;
    }

    /* Keeps it nice and thin */
    ha-sortable::-webkit-scrollbar {
      width: 3px !important; 
    }

    ha-sortable::-webkit-scrollbar-thumb {
      background-color: {{ states('sensor.theme_hex') }} !important;
      border-radius: 10px;
    }

Become this...

display_order: none
type: todo-list
entity: todo.google_keep_groceries
hide_completed: true
hide_section_headers: true
grid_options:
  rows: 8
visibility:
  - condition: state
    entity: input_select.to_buy_list_lounge_panel
    state: Pack'N'Save
uix:
  style: to-do-card

Or something.

[dcapslock]

You can use themes which can be applied locally. Probably should add that to the difference list.

[dcapslock]

Also Theme spark which allows for changing theme on element by templates.

[dcapslock]

Note: you could also do with class: and nest your styles in host(.my_class):.

[kattcrazy]

Thanks! Using

uix:
  class: todo-card

and the css in the theme

[kattcrazy]

Another question @dcapslock sorry haha.

Is this valid placement?

uix:
  style: |
    @media (max-width: 768px) {
      :host {
        content-visibility: auto;
      }
    }
views:
  - type: sections
    max_columns: 2
    title: Lounge Panel v2
    path: lounge
    icon: mdi:tablet
    sections:
      - type: grid
        cards:
          - type: custom:mushroom-empty-card
            grid_options:
              columns: 24
              rows: 0.15
          - type: custom:better-moment-card
            moment:
              - format: h:mm a
                parentStyle: |

[dcapslock]

No. You need to be use uix-view-yaml in your theme. If you wish to have specific theming for a panel then use a template using the panel variable.

[kattcrazy]

Alright, thanks.