DR.Simple_UI
One design-token contract. Semantic CSS. Consistent Blazor apps.
Copy-pasteable markup for every shared UI class, styled by the stylesheet that ships in the package. An example that renders correctly here renders correctly in your app.
176design tokens
105CSS classes
3,245bundled icons
0runtime dependencies
This site is built with
DR.Simple_UI. The shell, sidebar, header, buttons and
tables around you are the same classes documented on these pages.
Install
Add the package, then reference it from your host page.
dotnet add package DR.Simple_UI
Rebranding
Your whole css/brand.css, loaded after the library. Nothing else changes.
:root {
--brand: #e41f16;
--brand-hover: #c8170f;
--brand-active: #a81209;
--brand-soft: #ff6f66;
--brand-text: #ff8f88;
--brand-tint: rgba(228, 31, 22, 0.14);
--brand-ring: rgba(228, 31, 22, 0.5);
--brand-ring-soft: rgba(228, 31, 22, 0.4);
--brand-ring-check: rgba(228, 31, 22, 0.35);
--brand-glow: rgba(228, 31, 22, 0.18);
--accent: #ff6f66;
--sidebar-active: #e41f16;
}
/* The light theme needs the readable-on-white variants. */
:root[data-theme="light"] {
--brand-soft: #e41f16;
--brand-text: #c8170f;
--brand-tint: rgba(228, 31, 22, 0.1);
--accent: #c8170f;
}
Redefine only tokens the library already declares. Never declare a new
-- name it
does not define — a later version may claim that name with a different meaning.
Request a
token if one is missing.
The two tiers
Tier 1 — the frame
Shell, sidebar and nav, header, user widget. Razor components. Pixel-identical in
every app, not restyled per project.
Tier 2 — the paint
Tables, forms, cards, badges, buttons, panels. CSS classes only. Pages write plain
HTML and apply the classes.
Which tier: if anyone needs to adjust the inside of it, it is a class. If not, it is a component.
There is no <DataTable> and there will not be one.
Reference
Z-order
Shared by every app. Use one of these values for a new overlay.
| Layer | z-index |
|---|---|
| Topbar | 60 |
| Modal backdrop | 500 |
| Spotlight | 510 |
| Popover | 550 |
| Toast | 600 |
| Hover hints, reconnect banner | 1000 |