Storefront — Allowed

This gauge covers Chapter 19: customer-facing ecommerce layout patterns after Admin UI, Tables, Forms, Grid, and Flexbox.

Learning goal

Compose storefront surfaces — store chrome, product grids, filter catalogs, product detail buy boxes, cart and checkout summaries, account hubs, and invoices — while keeping native controls and accessible names.

Inherited tools

Everything allowed through ../admin-ui/allowed.md remains available, including forms from Chapter 12 and tables and lists from Chapter 13. Layout tools from Flexbox, Grid, Responsive, Positioning, Variables, and Pseudo-classes may be used as needed for store chrome.

New presentation patterns

• Store shell: top navigation, simplified category panel, site footer
• Product cards in responsive grids (image, title, price, rating text, badges)
• Filter catalog: aside with fieldsets beside a product grid
• Product detail: gallery, buy box, static tab chrome, specification tables
• Cart line-item table with a sticky order summary
• Checkout compose: address form, delivery radio cards, payment fields, summary
• Account hub: profile metrics, tab chrome, orders table
• Wishlist tables, favourite-store cards, print-friendly invoice tables

Learning rules

1. Keep one visible main for the primary storefront content.
2. Product cards may use card elevation because they are the unit of browsing interaction. Do not wrap the entire page in nested decorative cards.
3. Filter groups use fieldset and legend. Keep visible labels on every control; placeholders are examples, not names.
4. Use real table markup for carts, wishlists, specs, and invoices. Do not use tables for page layout.
5. Sticky order summaries must remain keyboard-reachable in source order.
6. Static tab chrome may show one panel. Changing tabs with script belongs to the JavaScript workbook.
7. Delivery and payment choices are radio groups or native selects with visible labels and helper text.
8. Prefer CSS variables for surface, border, muted text, price, and badge fills.
9. Status and stock badges use text as well as colour.

Not allowed

• JavaScript for filters, cart totals, tabs, or checkout steps
• Third-party widgets (Choices, Flatpickr, rich-text editors, List.js). Learn interactive tables in the JavaScript workbook Phase 9
• Custom controls that replace native inputs, selects, textareas, or buttons
• Essential instructions shown only in placeholders
• Positive tabindex values except the inherited table scroll wrapper pattern from Chapter 13 (tabindex="0" on a labelled overflow region)
• Inline styles
• Any HTML or CSS not inherited or listed for presentation above

Pages

• 01-store-shell.html — top nav, category panel, footer
• 02-product-card-grid.html — sectioned product card grids
• 03-filter-catalog.html — filter aside plus product grid
• 04-product-detail.html — gallery, buy box, tabs, specs tables
• 05-cart-summary.html — cart table and sticky summary
• 06-checkout-compose.html — shipping, delivery, payment, summary
• 07-account-hub.html — profile metrics, tabs, orders table
• 08-lists-invoice.html — wishlist, store cards, invoice

Rules to lean on

Rules 2, 10, 34–38, 54–59, 72–80, 99–110, 111–122, 135–144, 175–195, and storefront rules added for Chapter 19.