Thanks @paddy0174 , I look forward to testing it.
Maybe a template for a camera in the style of the theme could be added?
3 Likes
Thx for your work.
Canāt wait to try it.
If you need help translating into Italian, I can do it.
Hello Thomas, great job on the UI. Looking forward to implementing this after the redesign is released.
Question, whatās the recommended approach for multi-function devices? To better follow your design, should the deviceās functions be separated on different cards or is all on one card a better approach? Below are a couple of examples.
-
Battery-powered temperature and humidity devices are very popular. This would be three items to display and possibly two graphs. To minimize the size of the card, would it be better to have the graphs pop-up when the card is pressed?
-
Battery-powered door locks with door open/closed state are also popular. This is also a card with three items. Lock state would be the most important but would be good to have the other two as well.
Hello,
I share with you my light popup inspired by this design.
Integration browser_mod and custom_card light-entity-card needed
I just have a small bug with the stick on brightness slider that is not updated when value change. Just close and reopen the popup to update. Seems to be a bug with browser-mod.
To use it, define a tap_action :
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Fermer
hide_header: true
card:
type: custom:button-card
template: popup_light
variables:
entity: "[[[ return variables.entity ]]]"
Popup code :
header_popup:
template: action_button
show_name: true
show_label: true
styles:
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content min-content
label:
- justify-self: center
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
card:
- padding-bottom: 30px
popup_4_items:
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content min-content
card:
- background: none
- box-shadow: none
- padding: 4%
list_2_buttons:
styles:
card:
- box-shadow: none
- padding: 0px
- background: none
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
action_button:
color: var(--primary-color)
show_icon: true
show_name: true
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content
card:
- background: none
- box-shadow: none
icon:
- color: var(--primary-color)
img_cell:
- background-color: var(--card-background-color)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- box-shadow: var(--ha-card-box-shadow)
name:
- justify-self: center
- font-weight: bold
- font-size: 14px
- margin-top: 12px
power_button:
template: action_button
styles:
icon:
- color: var(--card-background-color)
img_cell:
- background-color: var(--primary-color)
- box-shadow: none
back_button:
template: action_button
icon: "mdi:arrow-left"
name: Retour
styles:
img_cell:
- box-shadow: none
tap_action:
action: fire-dom-event
browser_mod:
command: close_popup
popup_light:
template: popup_4_items
custom_fields:
item1:
card:
type: custom:button-card
template: header_popup
icon: mdi:lightbulb
name: LumiĆØre
show_label: none
styles:
icon:
- color: var(--color-theme)
item2:
card:
type: custom:state-switch
entity: hash
default: color
transition: flip
transition_time: 300
states:
brightness:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: none
- box-shadow: none
- padding: 4%
custom_fields:
item2:
- background-color: blue
- border-radius: 12px
- position: absolute
- left: 64%
- top: >
[[[
var bri = states[variables.entity].attributes.brightness;
return Math.round(bri ? (80-(72*bri/256)) : '80') + '%';
]]]
- height: 25px
- width: 45px
- font-size: 11px
- line-height: 25px
- color: white
custom_fields:
item1:
card:
type: "custom:slider-card"
entity: "[[[ return variables.entity ]]]"
radius: 20px
rotate: 270
containerHeight: 320px
width: 250px
height: 100px
top: 100px
left: 17%
thumbHorizontalPadding: 0px
thumbWidth: 0px
mainSliderColor: rgba(var(--color-theme),0.1)
mainSliderColorOff: rgba(var(--color-theme),0.1)
secondarySliderColor: var(--color-theme)
secondarySliderColorOff: var(--color-theme)
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
.off {
border: 1px solid rgba(var(--color-theme),0.3) !important;
}
.on {
border: 1px solid rgba(var(--color-theme),0.3) !important;
}
item2: >
[[[
var bri = states[variables.entity].attributes.brightness;
return Math.round(bri ? (bri/256*100) : '0') + '%';
]]]
#####
color:
type: custom:light-entity-card
entity: "[[[ return variables.entity ]]]"
persist_features: true
brightness: false
color_temp: false
white_value: false
hide_header: true
effects_list: false
card_mod:
style:
".control":
$: |
#interactionLayer{ z-index: 1; filter: opacity(0.6);}
#backgroundLayer{
filter: blur(20px);
}
.: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 10px 0 10px 0 !important;
}
item3:
card:
type: custom:button-card
template: list_2_buttons
styles:
card:
- padding-top: 30px
custom_fields:
item1:
card:
icon: "mdi:lightbulb-on"
name: LuminositƩ
type: "custom:button-card"
template: action_button
tap_action:
action: navigate
navigation_path: "#brightness"
state:
- operator: template
value: >
[[[ return new URL(window.location.href).hash !== '#color' ]]]
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
item2:
card:
icon: "mdi:palette"
name: Couleur
type: "custom:button-card"
template: action_button
tap_action:
action: navigate
navigation_path: "#color"
state:
- operator: template
value: >
[[[ return new URL(window.location.href).hash === '#color' ]]]
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
item4:
card:
type: custom:button-card
template: list_3_buttons
styles:
card:
- padding-top: 30px
custom_fields:
item1:
card:
type: "custom:button-card"
template: back_button
item2:
card:
icon: "mdi:power"
name: >
[[[
if (states[variables.entity].state == 'on') return 'AllumƩ';
else return 'Eteindre';
]]]
type: "custom:button-card"
template: power_button
entity: "[[[ return variables.entity ]]]"
tap_action:
action: toggle
9 Likes
And a second āgenericā popup (I called it āgenericā because it can be easily changed to display only values without graph, more than 2 values, etcā¦ 
)
Custom_card apexcharts-card needed
To use it, define a tap_action and set variable as your needs :
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
card:
type: custom:button-card
template: popup_2_entity_graph
variables:
ulm_icon: "mdi:fire"
ulm_title: "Gaz"
ulm_label: ""
ulm_entity1: "sensor.gazpar_energy_m3"
ulm_entity1_name: "Consommation"
ulm_entity1_icon: "mdi:gauge"
ulm_entity2: "sensor.gazpar_energy_price"
ulm_entity2_name: "Prix"
ulm_entity2_icon: "mdi:currency-eur"
Popup code:
action_button:
color: var(--primary-color)
show_icon: true
show_name: true
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content
card:
- background: none
- box-shadow: none
icon:
- color: var(--primary-color)
img_cell:
- background-color: var(--card-background-color)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- box-shadow: var(--ha-card-box-shadow)
name:
- justify-self: center
- font-weight: bold
- font-size: 14px
- margin-top: 12px
back_button:
template: action_button
icon: "mdi:arrow-left"
name: Retour
styles:
img_cell:
- box-shadow: none
tap_action:
action: fire-dom-event
browser_mod:
command: close_popup
header_popup:
template: action_button
show_name: true
show_label: true
styles:
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content min-content
label:
- justify-self: center
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
card:
- padding-bottom: 30px
list_3_buttons:
styles:
card:
- box-shadow: none
- padding: 0px
- background: none
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
popup_4_items:
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content min-content
card:
- background: none
- box-shadow: none
- padding: 4%
popup_2_entity_graph:
template: popup_4_items
custom_fields:
item1:
card:
type: custom:button-card
template: header_popup
icon: "[[[ return variables.ulm_icon ]]]"
name: "[[[ return variables.ulm_title ]]]"
label: "[[[ return variables.ulm_label ]]]"
styles:
icon:
- color: var(--color-theme)
item2:
card:
type: grid
columns: 2
square: false
cards:
- type: "custom:button-card"
entity: "[[[ return variables.ulm_entity1 ]]]"
label: >
[[[ return states[variables.ulm_entity1].state + states[variables.ulm_entity1].attributes.unit_of_measurement ]]]
name: "[[[ return variables.ulm_entity1_name ]]]"
icon: "[[[ return variables.ulm_entity1_icon ]]]"
template:
- icon_info_bg
styles:
icon:
- color: "var(--color-theme)"
- type: "custom:button-card"
entity: "[[[ return variables.ulm_entity2 ]]]"
label: >
[[[ return states[variables.ulm_entity2].state + states[variables.ulm_entity2].attributes.unit_of_measurement ]]]
name: "[[[ return variables.ulm_entity2_name ]]]"
icon: "[[[ return variables.ulm_entity2_icon ]]]"
template:
- icon_info_bg
styles:
icon:
- color: "var(--color-theme)"
item3:
card:
type: vertical-stack
cards:
- type: entities
entities:
- type: section
label: Statistiques
card_mod:
style: |
ha-card{
background: none !important;
box-shadow: none !important;
margin-bottom: -25px !important;
text-align: start !important;
}
- type: custom:apexcharts-card
graph_span: 7d
# layout: minimal
all_series_config:
stroke_width: 3
type: area
opacity: 0.2
series:
- entity: "[[[ return variables.ulm_entity1 ]]]"
color: blue
fill_raw: last
card_mod:
style: |
ha-card{
background: none !important;
box-shadow: none !important;
}
.wrapper{
background: var(--card-background-color) !important;
border-radius: 20px !important;
box-shadow: var(--box-shadow) !important;
}
item4:
card:
type: custom:button-card
template: list_3_buttons
styles:
card:
- padding-top: 30px
custom_fields:
item2:
card:
type: "custom:button-card"
template: back_button
9 Likes
This Is great! list_3buttons code isnāt there so i changed it to list_2_buttons. Also are you sure you cant fix the bug that it doesnāt update? Iāve been using this light popup card and it works over there.
Oups youāre right. You can find list_3_button in my generic popup code.
I will take a look but this card is only a slider and mine is working well
Good evening to all of you! 
It took a little longer than the promised āfew daysā, but as it turned out, it was a little more work, than expected. But nonetheless, if I may present to you
UI-Lovelace-Minimalist v1.0.0-beta.5 | first public beta
To be honest, as most developers, Iām not sure if everything is ready and working flawless, but here we are. There has to be a release at some point. And here it is!
So whatās new you ask?
- We implemented a new structure for the files - easier maintainance and updates
- While at it, a few bugs were fixed, and some code needed to be re-written, to fit the new structure
- The new structure was necessary, among other things, to accomodate the development and use of
custom_cards. Now everybody can develop acustom_cardand it can easily be added by copying a folder or using the generator. At the moment we have around fivecustom_cardsready for use, five waiting for a review, but both already included in the download. - The implementation of
custom_cardshad a nice little side effect: you can now extend the main template with your own code, without disturbing updates to the main āthemeā - It is now possible to use
language variables. So all strings, that wonāt get delivered from HA can be changed to your language. This works as well incustom_cards, so authors can provide you with your own language, too. - A few new cards, not known from the thread here, like a collapsable light-slider, a horizontal light-slider or a welcome card, that can be configured to deliver you news and notifications from your HA installation.
- There is now a dedicated Github repository for the āthemeā and the wiki page (a Jekyll page, take a look at the repo)
- The most noteable (at least the most time consuming) part is our new wiki. First planned as an enhanced readme, it grew in the last weeks from a Github hosted wiki to now a hosted (thanks Netlify!) wiki page with 21 pages. You can find there:
- Installation guides (
UI- andyaml-mode) - An example page (this unfortunately is not ready yet, input is always welcome!)
- Guides to setup your first page, update, upgrade from a previous version and more
- Developer corner to support the development of this āthemeā (eg. custom_cards)
- Installation guides (
What you can as well find in the new wiki, are our CodeGenerators. These are mainly for people, who use or want to use UI-mode for their installation. UI-mode is not our first choice, as it is harder to handle in the long run, but thatās entirely your choice! Our main templates without language variables and custom-cards are already 1500 lines longā¦ But thatās the point, donāt let that worry you, thatās why we have our generators.
In the first one you can configure which language you want to use, which custom-cards you want to install and at the push of a button you get your code, ready to copy and paste it into your raw-config-editor. Always with the newest code from the repo automatically added.
With the second one you can configure which cards you want to see as a code example and the generator brings it to you. This is not a complete generation of code, ready to use and fitting your system. But it will give you a nice start into the use of this āthemeā.
Let me add a short disclaimer here: this is a beta version for a reason. Everything is tested and looked ok, but you never know, especially with a first public release. And thatās why we havenāt made this a stable release. There will be issues and errors, and we will try our best to resolve these in a timely manner, but we canāt rule these out upfront. So please bear with us! Better help by trying things out and report issues here or at Github.
This is only a start, and if I havenāt miscounted, there are around ten or twelve cards in this thread already, that need to be included (permission preconditioned). I personally would love to see this āthemeā in HACS for an even easier install, lovelace-gen is another thing to think about and I sincerely hope people like what has already been done here in the mindset of open-source and contribute and add to this fantastic work @Tben started! On the top of my list is a little code cleaning as well, these 1500 lines need to (and will) get smaller!
All input is welcome, the repo is ready for you to fork and work on it, or just leave a post here in this thread, if you have something great to share. It is always appreciated!
And now, after a long introduction speech, here are the links for you to explore:
The new Github repository: GitHub - UI-Lovelace-Minimalist/UI: UI-Lovelace-Minimalist is a "theme" for HomeAssistant
And here is the wiki page: https://ui-lovelace-minimalist.netlify.app/
27 Likes
sexy. i love it.
Awesome ! Thank you so much
Wow, thank you so much for this great work! It must have taken quite a bit of time.
If I find time this weekend, Iāll have to try this out right away.
I still have two small questions:
Do I see it right that currently no Dark Theme is included? And is there a recommendation how many cards you can use within a horizontal stack? Should I always start a new horizontal stack after 2 cards? In my short test, it looks with more cards and the desktop theme currently still a bit strange imho 
button_card_templates: !include_dir_merge_named minimalist-templates/
views:
- title: Zu Hause
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: title
name: Zu Hause
- type: custom:button-card
template: edge
- title: Beleuchtung
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: title
name: Beleuchtung
- type: custom:button-card
template: edge
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: title
label: 'Wohnzimmer'
- type: custom:button-card
template: edge
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: 'custom:button-card'
template: card_light
entity: light.wohnzimmer_deckenlampe
- type: 'custom:button-card'
template: card_light
entity: light.wohnzimmer_lightstrip
- type: 'custom:button-card'
template: card_light
entity: light.stehlampe_wohnzimmer_links
- type: 'custom:button-card'
template: card_light
entity: light.wohnzimmer_stehlampe_rechts
- type: custom:button-card
template: edge
- title: GerƤte
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: title
name: GerƤte
- type: custom:button-card
template: edge
Great theme!!
I played around with the different templates for an hour or so and I canāt get the light slider cards to work.
They simply donāt show. 
@massaquah
What code did you use for the light-card? This card needs an entity to be set, otherwise it wonāt show. Could you provide the code (or a screenshot if in UI-mode) that youāre using. Preferable with a few lines before and after the card.
# this should be the code in UI-mode
type: 'custom:button-card'
template: card_light
entity: light.my_livingroom_light
@CM000n
There is no recomendation, because it changes with the layout and the things you use the button for.
In theory, all these buttons use the same settings for their width. It entirely depends, how many you put into one row. Taking this as an example, I first tried the second row with three buttons, but the text (label) didnāt fit into the button. So two it was in the end. With the first row, the text fit with three buttons, and I only had three buttons to show, so three it was.
What Iāve read here in this thread, most people use this āthemeā in combination with layout-card and on their mobile. So there is only one column and with some kind of fixed width. I will try to come up with some kind of guide on how to set up layout-card and use this āthemeā with a one, two and three column based layout, but that will take a while.
1 Like
OK, got it. Thank you very much. I think Iāll just play around a bit and try a few things.
It would be really cool to have a collection of complete configuration examples somewhere though, right? Maybe in the future we can link some repos of people using the theme in the great tutorial we have now? But no need to rush 
Again, thank you very much!
The normal light card is working, only the different light-slider cards are not:
- type: vertical-stack ###Wohnzimmer###
cards:
- type: 'custom:button-card'
template: card_title
name: Wohnzimmer
label: 'Unsere Entspannungs-Oase'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: card_graph
variables:
ulm_card_graph_color: "var(--google-blue)"
ulm_card_graph_name: Temperatur Wohnzimmer
ulm_card_graph_entity: sensor.temp_sonoff_wohnzimmer_temperature
- type: 'picture-glance'
image: /local/img/living.jpg
theme: ios-dark-mode-blue-red
aspect_ratio: 72%
entities:
- entity: binary_sensor.contact_sonoff_wohnzimmer
- entity: light.light_hue_wohnzimmer_fenster
- entity: light.light_hue_wohnzimmer_stehlampe
icon: mdi:lamp-outline
card_mod:
style: |
ha-card {
--ha-card-border-radius: 15px;
}
- type: custom:button-card
template: edge
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
- ulm_card_binary_sensor_alert: true
entity: binary_sensor.contact_sonoff_wohnzimmer
show_last_changed: true
- type: 'custom:button-card'
template: card_light
entity: light.light_hue_wohnzimmer_stehlampe
- type: 'custom:button-card'
template: card_light_slider_horizontal
variables:
ulm_card_light_slider_horizontal_name: Stehlampe
entity: light.light_hue_wohnzimmer_stehlampe
- type: 'custom:button-card'
template: card_light_slider
variables:
ulm_card_light_slider_name: Fensterlampe
entity: light.light_hue_wohnzimmer_fenster
Problem solved: I was missing the my-cards addon.
Actually, I wanted to stay away from designing the Dashboard, because it is very time-consuming, but I have to say that your installation worked perfectly and was also easy.
I have a few concerns:
-
could a popup screen be integrated, similar to the one here: š» Lovelace UI ā¢ Minimalist - #318 by schumijo
-
could a blur effect be added to the background when a popup is displayed.
-
on my Mac the darkmode is automatically activated, here the background would have to be modified. āsee picture above
-
could the initial letter be capitalised, at least for people from Germany? Instead of āgeschlossenā, therefore āGeschlossenā, āsee picture above (not mandatory, but would look nice)
-
is there any plan to animate the icons?
Regardless, I must thank you for all your efforts. You have really created something beautiful and I look forward to using your theme in the future. Many Thanks, merci beaucoup.
Edit:
6. Light Slider Card (collapse): ulm_card_light_slider_collapse_name; somehow this does not work, cannot change the name.
Thanks again for your tips! I think Iāll try CSS grids for now. That really gives me great control over where individual cards are positioned and how the layout looks on different screen sizes. Whereas for now i just played around a bit for the desktop screen size:
button_card_templates: !include_dir_merge_named minimalist-templates/
kiosk_mode:
kiosk: true
views:
- type: custom:grid-layout
title: _home
path: 0
layout:
#default
grid-gap: 5px 5px
grid-template-columns: 0 repeat(5, 1fr) 0
grid-template-rows: 2% repeat(7, 3%) 0
grid-template-areas: |
". chips chips chips chips chips ."
". t1 t1 t1 t1 t1 ."
". navigation navigation navigation navigation navigation ."
". t2 t2 t2 t2 t2 ."
". persons persons persons persons persons ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: 5px 5px
grid-template-columns: 0 repeat(5, 1fr) 0
grid-template-rows: 2% repeat(7, 3%) 0
grid-template-areas: |
". chips chips chips chips chips ."
". t1 t1 t1 t1 t1 ."
". navigation navigation navigation navigation navigation ."
". t2 t2 t2 t2 t2 ."
". persons persons persons persons persons ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
#portrait
"(max-width: 1200px)":
grid-gap: 5px 5px
grid-template-columns: 0 repeat(5, 1fr) 0
grid-template-rows: 2% repeat(7, 3%) 0
grid-template-areas: |
". chips chips chips chips chips ."
". t1 t1 t1 t1 t1 ."
". navigation navigation navigation navigation navigation ."
". t2 t2 t2 t2 t2 ."
". persons persons persons persons persons ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
cards:
- type: grid
view_layout:
grid-area: chips
cards:
- type: 'custom:button-card'
template: chip_temperature
variables:
ulm_chip_temperature_inside: sensor.steckdose_spulmaschine_temperature
ulm_chip_temperature_outside: sensor.dwd_weather_kraichtal_gochsheim_temperature
ulm_chip_temperature_weather: weather.dwd_weather_kraichtal_gochsheim
- type: grid
view_layout:
grid-area: t1
cards:
- type: custom:button-card
template: title
name: Zu Hause
- type: grid
view_layout:
grid-area: navigation
cards:
- type: custom:button-card
template: card_navigate
variables:
ulm_card_navigate_path: /lovelace-minimalist/1
ulm_card_navigate_title: Beleuchtung
ulm_card_navigate_icon: mdi:lamps-outline
- type: custom:button-card
template: card_navigate
variables:
ulm_card_navigate_path: /lovelace-minimalist/2
ulm_card_navigate_title: GerƤte
ulm_card_navigate_icon: mdi:devices
- type: grid
view_layout:
grid-area: t2
cards:
- type: custom:button-card
template: title
name: Anwesenheit
label: 'Personen'
- type: grid
view_layout:
grid-area: t2
cards:
- type: custom:button-card
template: title
name: Anwesenheit
label: 'Personen'
- type: grid
view_layout:
grid-area: persons
columns: 5
cards:
- type: 'custom:button-card'
template: card_person
variables:
ulm_card_person_entity: person.simon
ulm_card_person_use_entity_picture: false
ulm_card_person_zone1: Simon Arbeit
- type: 'custom:button-card'
template: card_person
variables:
ulm_card_person_entity: person.lisa
ulm_card_person_use_entity_picture: false
ulm_card_person_zone1: Lisa Arbeit
- type: 'custom:button-card'
template: card_person
variables:
ulm_card_person_entity: person.lisa
ulm_card_person_use_entity_picture: false
ulm_card_person_zone1: Lisa Arbeit
- type: 'custom:button-card'
template: card_person
variables:
ulm_card_person_entity: person.lisa
ulm_card_person_use_entity_picture: false
ulm_card_person_zone1: Lisa Arbeit
1 Like