Dayframe: a glanceable dashboard that tracks Bootstrap 6 from alpha to stable

[BVisagie]

Hi everyone 👋

I'd like to share Dayframe, a project I've been building to explore and show off Bootstrap 6, release by release.

• Live demo: https://bvisagie.github.io/dayframe-dashboard/
• Source (MIT): https://github.com/BVisagie/dayframe-dashboard

What it is

Dayframe is an always-on dashboard for people who work with AI coding agents. Five views show agent usage allowances, a calendar, the weather and news feeds, so you can see at a glance what needs attention.

It's a static site on GitHub Pages, with no backend, accounts or tracking. Agent usage and calendars are simulated. The weather comes from Open-Meteo, and the Bootstrap feed reads your blog and GitHub releases live.

Why it exists

The dashboard is really a vehicle. I want it to be a long-running Bootstrap 6 demonstrator that follows v6 from 6.0.0-alpha.1 through to stable, and records what each release changes in a real application.

The project has one rule. For every piece of UI, use what Bootstrap provides first, in this order:

1. a component, with its JavaScript plugin where it has one;
2. layout, utilities and helpers;
3. configuration: tokens, theme roles, Sass module options and the utilities API;
4. custom code only as a last resort, with a comment and an entry in a public log saying what Bootstrap lacked.

So far it uses navbar, nav-overflow, Tab, card, list-group, progress-stacked, popover, datepicker, combobox, dialog and drawer, menu, chip, avatar, toast, form-range, placeholder, pagination and more. Layout uses the CSS grid with container queries, and colour schemes use data-bs-theme with light-dark().

Things you might enjoy poking at

• Bootstrap lens: add ?lens=1 to the URL, or turn it on in Settings → Demo. It outlines every Bootstrap component on screen and links each one to its docs, so you can see what's Bootstrap and what's custom.
• About Bootstrap: lists the bundled version, the components and plugins in use, and your latest releases.
• Themes: three themes built from Bootstrap tokens and theme roles. Default and Tideline come in light and dark, and Nebuchadnezzar is a dark-only green console with an optional CRT finish.
• A shrinking custom layer: the app's own SCSS, excluding layout and themes, is about 3 KB of source. I record that number on every upgrade, and the goal is for it to shrink as Bootstrap grows.
• Repeatable states: ?scenario=running-low, offline, stale or reminder-due show states you'd rarely see otherwise, and ?clock=…&seed=… gives identical renders.

Keyboard use, WCAG 2.2 AA contrast, prefers-reduced-motion and forced-colors are treated as requirements, not nice-to-haves.

Feedback welcome

Any feedback is welcome, from maintainers and the community alike. I'd especially value:

• places where I'm using a component in a way you didn't intend, or where a newer pattern exists;
• custom code that Bootstrap already covers and I've missed (the Bootstrap log lists every gap);
• anything that looks off in your browser or at your screen size.

Along the way I've found a few specific alpha.1 rough edges, such as nav-overflow inside a column flex container and surface roles for raised panels. I'll raise those separately as issues or v6 Feedback threads, with reduced test cases, so they don't get lost here.

Thanks for Bootstrap 6. It's been a real pleasure to build with, and I'm looking forward to upgrading Dayframe with every release. 🙏

[julien-deramond]

Thanks for sharing Dayframe, and for putting so much weight on using what Bootstrap provides before writing custom code. A log of the gaps you hit is useful to us.

You mentioned you'd raise the nav-overflow and surface role rough edges separately with reduced test cases. That would help a lot, and we'll be glad to look at them when they come in :)

[BVisagie]

Thanks, Julien! Both are up now, each with a reduced test case:

• .nav-overflow grows vertically when its parent is a column flex container #43162: .nav-overflow grows vertically when its parent is a column flex container. Bootstrap's own components trigger it too, for example tabs between a drawer's header and body.
• How should a tinted page canvas with raised cards be built with `$theme-bgs`? #43163: a v6 Feedback thread on how to build a tinted page canvas with raised cards using $theme-bgs, and whether a separate surface role would help.

Dayframe also turned up #43143 yesterday, where the checked switch indicator token is declared but never applied. It's already confirmed, and #43148 has a fix.

I'll report anything else Dayframe finds the same way as it tracks each release. 🙏