The standard look and layout for every Tech Dynamix internal web app: one stylesheet, two small scripts, solid icons, brand marks, state shapes, the brand fonts, and the logos. No framework, no build step, nothing loaded from another site.
See it
- Brand
- Logos, colors, type, words, icon meanings, spacing: the reference for how Tech Dynamix looks.
- Components
- Every class on one page. Try light and dark, the collapsed sidebar, a narrow window, and print preview.
- Icons and brands
- Search every icon, brand mark, and state. Click one to copy its markup.
- Dashboard
- Stat tiles that link to their lists, a needs attention card, two cards side by side with footers, an empty card, and recent activity.
- List page
- Jobs: filters as a GET form, the table with IDs, contacts, states, and status, paging, CSV export, and what to show when nothing matches.
- Record page
- One job: its ID and status in the header, a blocking warning, stat tiles, details, assets with makes, photos, chain of custody, history, and a confirmed remove.
- Edit form
- A job form after a failed save: an error summary that links to each field, field errors, fieldsets, choices with help, read only fields, save and cancel.
- Certificate
- A certificate of data destruction made for paper. Open print preview to see what the client gets.
- Access denied
- A signed in person on a page they can't use: the shell stays, and the page says why and who can change it.
- App page basics
- The signed in layout: sidebar, page header, content.
- Sign in page
- The message page layout for sign in and signed out.
- Page not found
- The message page for errors before sign in, or when the app can't draw its shell.
- An HTML notification email and its plain text twin (email.txt). The one place inline styles and tables are right.
Use it in an app
Copy dist/ into the app as assets/kit/ (or download it), then put these in every page's head, in this order:
<script src="/assets/kit/js/td-theme.js?v=2.11.0"></script>
<link rel="stylesheet" href="/assets/kit/css/td-ui.css?v=2.11.0">
<link rel="stylesheet" href="/assets/css/app.css?v=2.11.0">
<script src="/assets/kit/js/td-shell.js?v=2.11.0" defer></script>
<link rel="icon" type="image/png" href="/assets/kit/brand/favicon.png">
Apps keep their own copy; they never load the kit from this site. The rules, the update script, and the release steps are in the wiki.
What changed in 2.11.0
- New example pages to copy: dashboard.html, form.html (a failed save with an error summary and field errors), certificate.html (made for paper), denied.html (signed in, no access), not-found.html (message page error), and email.html with email.txt (a notification email with inline styles and tables, and its plain text version). README lists every example by the page it is for.
- examples/components.js handles data-print buttons (Print calls the browser's print).
- ui.techdynamix.com: every example page gets a strip across the top with the way back to the site, the page's name, all examples, and its source. bin/build-site adds it to the site's copies only; the files in examples/ stay clean templates.
Every version: changelog.