You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Carlo Costanzo c81edbe846
Refine infrastructure dashboard layout
6 days ago
..
infrastructure Refine infrastructure dashboard layout 6 days ago
kiosk Document kiosk tablet dashboard surfaces 1 month ago
overview Refine infrastructure dashboard layout 6 days ago
shared Add YAML dashboards and enable Lovelace YAML mode 5 months ago
README.md Refine infrastructure dashboard layout 6 days ago
SCRATCHPAD.md Dashboards: HA 2026.8 Lovelace wiring + validation 5 months ago
resources.yaml Update kiosk trust and cleanup guidance 3 months ago

README.md

Bear Stone Smart Home
Bear Stone Smart Home Documentation

Be sure to my configuration repo so you can keep up to date on any daily progress!

X Follow YouTube Subscribe GitHub Stars
HA Version Badge Last Commit Commit Activity

Dashboards (Lovelace YAML)

This folder holds YAML-managed Home Assistant Lovelace dashboards and UI resources.

Walkthrough

  • Video: Watch on YouTube
  • Companion post: vCloudInfo Blog Post
  • Kiosk camera tablet video: Watch on YouTube

Why this exists

  • Home Assistant stores dashboards and resources in config/.storage/ by default (runtime state).
  • YAML dashboards make the UI version-controllable and editable by automation tools (including Codex).

What is in here

  • resources.yaml
    • Lovelace JS resources used by custom cards (HACS and local resources).
    • This is used when lovelace.resource_mode: yaml is enabled.
  • SCRATCHPAD.md
    • Parking lot for multi-step dashboard work and patterns.
  • <dashboard>/
    • One folder per dashboard (example: overview/, infrastructure/, kiosk/).
    • dashboard.yaml is the dashboard entrypoint.
    • views/ contains one YAML file per view.
    • partials/ is reusable card lists included into views.
    • popups/ is reusable standalone popup cards (typically bubble-card) included into views.
    • card_mod/ is CSS overrides (use only when card-native options are insufficient).
  • shared/
    • Cross-dashboard reuse only. If something is only used by one dashboard, keep it in that dashboard folder.

Kiosk Camera Dashboard

  • Logic and recovery package: YAML source: kiosk_tablet
  • Dashboard entrypoint: YAML source: dashboard
  • Camera view: YAML source: 01_kiosk_oveview
  • Camera sections: YAML source: kiosk_oveview_sections

How it is wired into Home Assistant

This folder is referenced from config/configuration.yaml via:

  • lovelace.resource_mode: yaml
  • lovelace.resources: !include dashboards/resources.yaml
  • lovelace.dashboards: ...
    • Default Overview YAML dashboard: lovelace.dashboards.lovelace.filename: ui-lovelace.yaml
    • Additional YAML dashboards: filename: dashboards/<dashboard>/dashboard.yaml

Note:

  • Do not use legacy lovelace.mode: yaml (removed in Home Assistant 2026.8).

Lovelace resources are loaded from:

  • config/dashboards/resources.yaml (referenced by lovelace.resources)

Migration / Cutover Notes

  • During migration you may have both storage dashboards (from the UI) and YAML dashboards (from this folder) at the same time.
  • Do not try to create YAML dashboards with the same dashboard ID/key as an existing storage dashboard; remove/disable the storage version first in the UI.
  • Once you confirm the YAML dashboards render correctly:
    • Hide or delete the old storage dashboards in Settings -> Dashboards.
    • Keep strategies/dynamic dashboards in storage (Map, Areas, etc.) unless you intentionally export them.

Conventions

  • Include paths in Lovelace YAML should use absolute container paths starting with /config/.
    • Example: !include /config/dashboards/overview/partials/some_cards.yaml
  • Views are loaded using !include_dir_list and ordered by filename (prefix with 01_, 02_, etc.).
  • Infrastructure views are desktop-first and dense by default: use type: sections, max_columns: 4, and dense_section_placement: true on every standard view.
    • Use responsive layout-card grids with min-content rows inside full-width section wrappers so panels pack tightly without fixed-height gaps.
    • Keep related panels similar in height, avoid spacer cards, and verify both desktop and single-column mobile layouts.
    • Keep WAN telemetry, compact dual Pi-hole controls, and current website health together on the Network view; reserve hidden subviews for detailed Pi-hole analytics and domain/monitor telemetry.
  • Prefer card-native styling; treat card_mod as a last resort.
  • Prefer CSS variables (var(--*)) over hardcoded hex colors.
  • When using the Stitch MCP for inspiration, generation may exceed the tool timeout; wait and then fetch results via stitch/list_screens and stitch/get_screen.

Notes

  • Do not edit config/.storage by hand. Export once, then maintain the YAML files here.
  • It is safe to restart Home Assistant after dashboard changes as long as a configuration check passes first.

All of my configuration files are tested against the most stable version of home-assistant.

Still have questions on my Config?
Message me on X : Follow CCostan

Buy me a coffeeYou can buy me a coffeeBuy me a coffee

Affiliate Disclosure

Powered by TurnKey Linux.