Templates
Whole screens: the app shell and the layouts built in it. Each element page documents the parts; the full-screen pages show them at size, in the shell, the way a screen ships.
Frames
-
One grid of five children — brand, utility, nav, app bar and content — sharing a single placement map. It is the only arrangement whose reading order matches DOM order, so focus never jumps back up the page. Row one is the legacy masthead (logo on white, the navy .topMenu hugging the right corner). The nav-toggle button collapses the nav, whose rows have no icons, so the rail leaves the grid and the app bar and content take its column; on mobile it becomes a drawer. AppBar tabs are added dynamically by pages.
-
X-01
Dialogs behave like windows in an operating system. A [data-window-area] is the view area they live in; each dialog.qf-overlay[data-window] inside it drags by its header, snaps to the edges and corners of that area, resizes from eight grips, raises to the front when it is clicked or focused, and minimizes to a dock. js/windows.js writes the geometry; the nine data-snap rects, the grips, the dock and the drop-zone ghost are CSS.
-
X-12
A Search (X-02) with its own treatment: every result set is a canned search, and there is no filter rail. The app bar tabs (Active · Completed · Delegated) are the canned searches. Saved searches reuse the same two panes: a task list on the left and the selected task on the right. Pagination or Load more sits under the list. Saved searches are a menu button in the toolbar; the .qf-saved-views chip row stays in the markup but is hidden.
Full-screen pages
One page per composite, in the app shell, at full size.
-
App shell in the app shell.
Office mockups
The QEditor document, spreadsheet, presentation and PDF screens: Office mockups.