Admin UI — Allowed

This gauge covers Chapter 18: admin dashboard presentation and polished form chrome after Accessible Forms, Grid, Flexbox, Variables, and Clip-path.

Learning goal

Build admin-style surfaces — dashboard shells, metric cards, elevation systems, and form presentation — while keeping native controls and accessible names.

Inherited tools

Everything allowed through ./phase8-allowed.html remains available, including form structure from Chapter 12. Layout tools from Flexbox, Grid, Responsive, Positioning, Variables, and Pseudo-classes chapters may be used as needed for page chrome.

New presentation patterns

• Soft admin field borders and focus rings via box-shadow
• Input size modifiers (sm / md / lg)
• Disabled and readonly fills
• Border-only, soft-shadow, and hairline-plus-shadow card elevation
• Metric cards with icon wells and trend pills
• Dashboard shell (sidebar, topbar, main canvas) and ops status strips
• Stacked, horizontal, grid, and inline form layouts
• Floating labels with a real label element
• Dropzone chrome around a real input type="file"
• Radio-group star ratings styled with CSS
• Static multi-step wizard chrome and progress

Learning rules

1. Choose one elevation system per UI: border-only, soft shadow, or hairline border plus soft shadow.
2. Metric trends use colour and text together. Do not communicate up/down by colour alone.
3. An ops status strip is separate from the KPI metric row.
4. Soft admin inputs still need visible labels and visible focus.
5. Prefer a focus ring from outline or from box-shadow. Never remove all visible focus styles.
6. Disabled and readonly fields change background and border, not only opacity.
7. Horizontal form labels stack above fields on narrow viewports.
8. Floating labels still use a real label. Do not rely on placeholder alone.
9. A dropzone is presentation around a real file input. accept is not file validation.
10. Star ratings in this chapter are radio groups with styled labels.
11. Wizard chrome may show one step. Changing steps with script belongs to the JavaScript workbook.
12. Prefer CSS variables for surface, border, muted text, success, and danger.

Not allowed

• JavaScript for showing or hiding wizard steps, validating forms, or reading files
• Third-party form widgets (Choices, Flatpickr, rich-text editors, dual-handle range libraries, emoji pickers). Learn those in the JavaScript workbook Phase 8 — Form UI Libraries (../../JS/phase8/), not in this CSS chapter.
• Custom controls that replace native inputs, selects, textareas, or buttons
• Essential instructions shown only in placeholders
• Positive tabindex values
• Inline styles
• Any HTML or CSS not inherited or listed for presentation above

Pages

• 01-elevation-cards.html — elevation systems and radius scale
• 02-metric-cards.html — icon wells, values, trend pills, featured card
• 03-dashboard-shell.html — sidebar, topbar, ops strip, main canvas
• 04-form-layouts.html — stacked, horizontal, grid, and inline forms
• 05-field-chrome.html — soft inputs, sizes, focus ring, disabled/readonly
• 06-validation-states.html — valid and invalid presentation with text
• 07-floating-labels.html — floating labels and icon-in-field
• 08-dropzone-file.html — dropzone chrome for file input
• 09-star-rating.html — accessible radio star rating
• 10-wizard-chrome.html — static multi-step wizard shell

Rules to lean on

Rules 2, 10, 34–38, 43–45, 54–59, 61, 72–80, 81–93, 99–110, 111–122, 135–144, 155–162, and 175+ (admin UI and form presentation).