Skip to content

v0.1.0 — Initial release

Latest
Latest

Choose a tag to compare

View all tags
@github-actions github-actions released this 30 Jul 11:38
v0.1.0
09ae056

First release. One versioned design system for Blazor apps, so a UI fix is made once here rather than
re-copied into every app. Extracted from the stylesheets of a production Blazor app, which was the source
of truth for every design decision in it.

176 tokens · 105 CSS classes · 3,245 bundled icons · 13 catalogue pages · 40 guard tests · 320 KB · zero
runtime dependencies.

dotnet add package DR.Simple_UI --version 0.1.0

Browse the catalogue: https://github.dennisrahmen.de/

Tier 1 — the frame. Shell, sidebar and nav, topbar, user widget. Layout chrome that is
pixel-identical in every app and is not restyled per project. Shipped as CSS here; the Razor components
follow in 0.2.0 and replace the markup without changing its appearance.

Tier 2 — the paint. Tables, forms, cards, badges, buttons, alerts. Semantic CSS classes only. Pages
write plain HTML and apply them. There is no <DataTable> and there will not be one.

  • Token layer — surfaces, text, lines, brand, sidebar, the semantic status families
    (go / warn / danger / info / secret), three categorical badge hues, component surfaces,
    shadows, typography and the reconnect banner.
  • Light theme, a colour-blind-safe palette and compact density (data-theme, data-cvd,
    data-density on <html>). All three are pure token remapping with no selector overrides, so CSS load
    order does not affect them.
  • Tier-2 classes — cards, badges (8 variants), tables, buttons (primary / go / warn /
    warn-solid / danger / sm), forms, .toolbar, modal chrome, .alert (4 variants), the
    .card-masonry and .field-grid layout primitives, and a Markdown editor.
  • Frame CSS — .layout, .sidebar with its collapsed icon rail, .nav*, .nav-status-card,
    .topbar, .topbar-btn, .user-widget, .health-badge, .page with themed scrollbars and
    scroll-edge fades, .bare-layout, the Blazor reconnect banner and the .dr-tip hover hint.
  • DR.Simple_UI.js (global drSimpleUi) — hover-hint engine, theme settings, clipboard,
    notifications, an audio ping and the Markdown editor behaviour. No configuration required.
  • DR.Simple_UI.boot.js — applies the stored theme before first paint. A file rather than a snippet
    to copy into each app.
  • Remix Icon 4.9.1 bundled at _content/DR.Simple_UI/lib/remixicon/ — 3,245 icons, no CDN. The
    package has no remote dependency, so it works offline and out of the restored package.
  • The catalogue ships inside the package at _content/DR.Simple_UI/catalogue/index.html, styled by
    the exact stylesheet installed beside it, so its examples and the CSS are the same version by
    definition. Each example is authored once and both rendered and printed from that one source.

Redefine a handful of tokens in a stylesheet loaded after the library:

: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;
}

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 library CSS contains no colour literals outside the token declarations; every var(--x) used is
declared; token blocks declare only custom properties; the theme blocks only remap tokens; fonts ride
tokens; the catalogue links the shipped stylesheet and loads nothing over the network; and shipped asset
paths are pinned, because consuming apps hard-code them. CI unpacks the .nupkg on every push and
asserts the CSS, both scripts, the icon font and all catalogue pages are actually in it.

Apache-2.0, chosen over MIT for the explicit patent grant in §3.

Icons are from Remix Icon, licensed under the Remix Icon License v1.0 — not
Apache-2.0. Displaying them in an application requires nothing of you. Two restrictions carry through:
they may not be redistributed as a standalone icon pack, and none may be used as a logo, app icon or
brand identifier. See
THIRD-PARTY-NOTICES.md.

  • .btn-danger's hover and active states have no light-theme values, so on a light background they
    darken rather than lighten. Inherited from the source stylesheet and kept so this release is a faithful
    extraction. A fix is a patch release.
  • Some tokens ship unreferenced by any library class — --divider, --redacted, --overlay,
    --spotlight-dim, --shadow-dropdown, --shadow-float, --shadow-pop. Intentional: they are the
    shared contract for app-level components such as tour popovers, blocking overlays and dropdown panels,
    so those apps need not invent tokens.
  • Tier-1 Razor components are not in this release. The frame CSS is, so adopting the components in
    0.2.0 is a markup swap with no visual change.

Getting started ·
Architecture ·
Contributing ·
Catalogue

Install

dotnet add package DR.Simple_UI --version 0.1.0
Assets 4
Loading