{ "id": "v1-md-6343", "long_id": "v1.material-design.app.s06.p03.t04.u03", "name": "Material list and detail tasks, 2016", "era": { "slug": "material-design", "code": "md", "name": "Material Design", "years": [ 2014, 2018 ], "description": "Paper and ink, 2014 to 2018: flat sheets that cast soft shadows, a coloured app bar, uppercase medium-weight buttons, two-pixel corners and one bright accent for the floating action." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A signed-in task or mail application in the paper-and-ink manner, built on the list-detail pattern: a coloured bar with the views, a dark strip under it that states where you are, and below that two sheets side by side, a dense two-line list with round avatars at the left and the chosen item open on a raised side sheet at the right. A floating action button rides the lower corner of the list, filters are chips, settings are rows with switches, and nothing is centred or boxed in a column. Inboxes, to-do lists, issue trackers and admin tools built on material frameworks looked like this from about 2015 to 2018.", "url": "https://chrono.skin/s/v1-md-6343", "preview_url": "https://chrono.skin/s/v1-md-6343/specimen.html", "files": { "STYLE.md": "# Material list and detail tasks, 2016\n\n## Summary\n\nA signed-in task or mail application in the paper-and-ink manner, built on the list-detail pattern: a coloured bar with the views, a dark strip under it that states where you are, and below that two sheets side by side, a dense two-line list with round avatars at the left and the chosen item open on a raised side sheet at the right. A floating action button rides the lower corner of the list, filters are chips, settings are rows with switches, and nothing is centred or boxed in a column. Inboxes, to-do lists, issue trackers and admin tools built on material frameworks looked like this from about 2015 to 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%`, and the bar, the strip, the content and the footer span the window with `--space-4` (24px) at the sides. Designed at 1440px. There is no maximum content width and no drawer: sheets stretch with the window, as in an application. Running text is capped at `--size-measure` (640px).\n- Order on the home screen: `.ds-nav` (`--size-bar` 64px: brand, view links with a `--border-width-strong` line under the current one, the account at the right), `.ds-hero` (a strip in the secondary bar fill: the day's headline and one line at the left, a flat button and one raised white button at the right), then `.ds-main` with one `.ds-split`: the `.ds-pane` list sheet (5 parts) and the `.ds-sheet` side sheet (7 parts), `--space-4` apart and equal in height. Then the one-line `.ds-footer`.\n- The list sheet, top to bottom: `.ds-tabs`, `.ds-pane__tools` (filter chips and a short text field), the `.ds-list` of two-line rows (64px, the chosen row tinted with a `--size-stripe` line at its left), `.ds-pane__foot` (row count and pagination) and `.ds-pane__fab`, the floating button in its lower right corner. The side sheet: `.ds-sheet__head` (title and round icon buttons), `.ds-sheet__body` (labels, a `.ds-facts` row, text, a `.ds-checks` list) and `.ds-sheet__actions`.\n- Everything is on an 8px grid. `--space-1` 4px (helper text, meta gaps), `--space-2` 8px (between chips and flat buttons, tool strip padding, row padding), `--space-3` 16px (list row side padding, button side padding, strip padding, figure and card padding), `--space-4` 24px (gutter between sheets, page side padding, sheet padding, field gap), `--space-5` 32px (above a caption inside a sheet), `--space-6` 48px (bottom of the page, overlay padding), `--space-7` 64px and `--space-8` 80px (spare steps).\n- Heights: bar and sheet head `--size-bar` 64px; tabs, table rows and card heads `--size-row` 48px; avatars, side links and icon buttons `--size-row-dense` 40px; buttons and fields `--size-control` 36px; floating button `--size-fab` 56px. Other sizes: `--size-brand` 30px, `--size-side` 248px (settings navigation), `--size-media` 88px (colour head of a list card), `--size-meter` 6px (progress line), `--size-switch` 36px with `--size-track` 14px and `--size-thumb` 20px, `--size-stripe` 4px, `--size-search` 220px, `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 112px.\n- Inner pages (one item in full, an overview, a form, settings) have no `.ds-hero`. Under the same `.ds-nav` comes `.ds-page-header`, the same dark strip in compact form: the `.ds-breadcrumb`, the page title and one line of description at the left, one raised white button at the right. Then `.ds-main`. An item page is a `.ds-split--form` (7 to 5): the text sheet (`.ds-panel--pad`) at the left, a `.ds-stack` with a small card and the notes sheet (`.ds-sheet--bottom`) at the right. An overview page is one `.ds-stack`: `.ds-stats` (four small cards with a coloured top line), the `.ds-grid` of list cards and a `.ds-panel` with a head and the `.ds-table`. A form page is a `.ds-split--form`: the form sheet with its buttons in a ruled strip at the bottom right, and notices and the dialog at the right. A settings page is a `.ds-split--settings`: the `.ds-sidebar` navigation card (`--size-side`) at the left, cards of `.ds-settings` rows at the right. `.ds-stack--fill` lets the last block of a column take the remaining height, so both columns end together.\n- Views: the specimen is one application with five views. `inbox` is the home view: headline strip, the list sheet with tabs, chips, six tasks, pagination and the floating button, and the side sheet of the chosen task. `task` is that task in full: text, related links and labels, beside who is on it and the notes. `lists` is the overview: figures, the four list cards and the table of members. `new` is the form for a task with its actions, an information notice, an error notice and the delete dialog. `settings` has the settings navigation, the reminder switches and the calendars card, shown empty.\n- Below 900px every split becomes one column (the side sheet follows the list, the settings navigation sits above its cards), figures and list cards go two by two and the account name hides. Below 600px the bar wraps into a brand row and a full-width `.ds-nav__links` row whose links spread to both edges (the current one keeps `.is-current`), the account menu `.ds-menu--account` is pinned at the right of the brand row with its name (`.ds-menu__label`) hidden, the strip stacks its buttons under the text, list cards and form rows become one column, facts stack, and table cells marked `.ds-table__extra` are hidden.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Roboto (openly licensed), then Arial. `--font-mono` is for code only.\n- Dense application text: `--text-base` and `--text-ui` are 14px on a 20px line (`--line-body` 1.43); `--text-small` 12px (captions, table heads, field labels, meta, footer); `--text-large` 18px (welcome lead, brand name, bar title); `--text-display` 34px light (`--weight-display` 300) for the welcome title only; `--text-h1` 24px (page title, figures), `--text-h2` 20px, `--text-h3` 16px bold (card titles).\n- Weights: body and headings 400, display 300, `--weight-ui` 500 for buttons, tabs and drawer links, `--weight-bold` 700 for card titles, table names, list titles, labels and badges. Nothing is heavier than 700.\n- `--ui-transform` is `uppercase` for buttons, tabs, the overline of the welcome card, `.ds-subhead` and card labels. Headings are sentence case. No tracking, no underlines in any state.\n- `--color-page` `#e9e9e9` is the desk; `--color-surface` white is every card; `--color-surface-alt` `#f9f9f9` the current table row and code block; `--color-surface-strong` `#eeeeee` hovered rows, chips, inline code, the empty-state disc.\n- `--fill-bar` (blue `#1867c0`) with `--color-bar-text` white: the app bar. Secondary text on it is `--color-bar-text` at 70%, the search field a 16% wash of it.\n- `--fill-inverse` (`#212121`) with `--color-inverse-text`: the drawer. Drawer links are the inverse text at 70%, full strength when hovered or current; the current link has a 12% wash and a `--size-stripe` stripe in `--color-accent` at its left. `--fill-bar-alt` (dark blue-grey `#263238`) with `--color-bar-alt-text`: the drawer head behind the brand.\n- `--color-text` `#333333` body, `--color-heading` the same for titles, `--color-text-muted` `#747474` for captions, card body text and meta, `--color-heading-alt` `#555555` for `.ds-subhead`.\n- `--color-button` bright blue `#2196f3` with white text: raised primary button, brand tile, chart bars, current page, checked checkbox. `--color-link` is the bar blue; hover is the bright blue. `--color-accent` amber `#ffb731` with dark `--color-accent-text`: the floating button, the account avatar, the drawer stripe, count badges. `--color-accent-alt` pink `#e91e63`: \"new\" markers, the alert dot and the chart's line series.\n- `--color-fill-1` to `--color-fill-4` (blue, orange, teal, light green) are the flat blocks: the welcome card's colour block (fill 1), the figure card tiles, the guide card heads and the list avatars. Fixed text pairs: `--color-bar-text` on fill 1 and fill 3, `--color-accent-text` on fill 2, `--color-inverse-text` on fill 4, `--color-button-text` on the primary and danger buttons and on the new, success and danger badges, `--color-accent-text` on the warning badge. Links, muted text and headings are used only on the desk and on cards.\n- `--color-border` `#d8d8d8` (table rows, action strips, the footer rule) and `--color-border-muted` `#eeeeee` (list rows, figure card foot) are hairlines; `--color-input-border` `#999999` is the single bottom line of a field. Cards are never outlined.\n- `--color-notice` (blue) with `--color-notice-text` is the information banner; `--color-danger-surface` with `--color-danger` text the error banner. `--color-danger` red `#f44336`, `--color-success` teal, `--color-warning` orange are flat badge and button fills.\n- Surface: `--radius-control` 3px, `--radius-panel` and `--radius-page` 6px, `--radius-pill` 12px, so badges are pills and chips and pagination cells are well-rounded rectangles; discs are 50%. Cards lie almost flat: `--shadow-panel` is one light shadow (4px blur, 1px drop) under every card, the bar and the drawer. Controls carry the depth: `--shadow-control` is a three-layer shadow that glows under the button (20px blur, pulled in 10px), also on the brand tile and the round marks; `--shadow-control-hover` deepens it (22px blur) for a hovered button and the floating button; `--shadow-control-pressed` drops to 5px; `--shadow-dialog` is one 22px shadow. All fills are flat; a hovered button darkens (`--fill-button-hover` is the button colour mixed with 18% black) and `--fill-input` is transparent, so a field is a bottom line only. `--border-width-strong` is 2px, `--focus-ring` a 2px line of the focus colour at 70%, `--transition` 0.3s on a decelerating curve.\n- One-off values built with `color-mix()`, `calc()` or `opacity` because the vocabulary has no token: 70% and 87% of the bar text and 70% of the inverse text for secondary text, 8%, 12% and 16% washes of them for hover, current and the search field, a 20% grey wash behind a hovered flat button or tool, a 12% danger wash, the danger colour mixed with 12% of `--color-shadow`, 24% opacity for the area under the welcome card's line, and line heights 1.18, 1.2, 1.3 and 1.5.\n\n## Components\n\n- `.ds-page` on ``: the desk, family, 16px/1.6 light text.\n- `.ds-nav`: the 64px bar. `.ds-brand` at its left, `.ds-nav__links` > `.ds-nav__link` uppercase links to the views (`is-current` has full-strength text and a line on the bar's bottom edge), `.ds-nav__account` at the right with a small avatar.\n- `.ds-brand`: the application's mark and name, one link. `.ds-brand__mark` is a `--size-brand` tile dressed like the primary raised button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) with a `--border-width` ring of `--color-bar-text` at 70%, which keeps it apart from the bar when button and bar colours are the same; `.ds-brand__name` is the name at `--text-large` in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the headline strip of the home screen in the secondary bar fill. `.ds-hero__body` holds `.ds-hero__title` (34px light) and `.ds-hero__lead`; `.ds-hero__actions` the main action as a raised `.ds-button--secondary`, with at most one `.ds-button--flat` beside it, which takes the strip's text colour. The primary button is not used on the strip, because under some palettes it has the strip's own colour.\n- `.ds-page-header`: the same strip on an inner page. `.ds-page-header__body` holds the breadcrumb, `.ds-page-header__title` (24px) and `.ds-page-header__text`; `.ds-page-header__actions` one raised `.ds-button--secondary`.\n- `.ds-main`, `.ds-split`, `.ds-stack`, `.ds-subhead`: the content area; a two-column grid (5 to 7; `--form` 7 to 5; `--settings` a fixed navigation column; `--start` stops the columns stretching); a column of blocks `--space-4` apart (`--fill` stretches the last); a small uppercase caption inside a sheet.\n- `.ds-pane`: the list sheet. `.ds-pane__tools` is its strip of chips with `.ds-pane__field`, `.ds-pane__foot` its foot with the row count and pagination, `.ds-pane__fab` places the floating button.\n- `.ds-sheet`: a raised sheet for the chosen item, at the side of the list. `.ds-sheet__head` with `.ds-sheet__title` and `.ds-button--icon` buttons, `.ds-sheet__body`, `.ds-sheet__actions` (`.ds-sheet__spacer` pushes the last button right). `--bottom` is the bottom sheet form with square lower corners, used for notes. `.ds-facts` is a row of three labelled values (`.ds-facts__label`, `.ds-facts__value`); `.ds-checks` a list of `.ds-form__check` rows, a finished one in `.ds-checks__done`.\n- `.ds-prose`: long-form text on a `.ds-panel--pad` sheet; styles h1 to h3, paragraphs, lists, `strong`, inline `code`, `pre` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured. `.ds-links` lays several out in a row.\n- `.ds-button`: raised button, 36px tall, uppercase. `--secondary` is raised white, `--flat` has no fill or shadow and link-coloured text (inside sheets, cards and dialogs), `--fab` is the 56px accent disc holding one `.ds-icon`, `--icon` a round 40px icon button, `--danger` a raised button filled with `--color-danger` for a destructive action; `--flat` with `--danger` is its flat form. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-icon`: 24px stroked inline SVG in the current text colour.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (a bottom line; `--area` for a textarea, wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields on one line. `is-focus` thickens the line; `is-invalid` on the field plus `.ds-form__error` shows an error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` is a checkbox; `.ds-form__actions` right-aligns buttons inside a form.\n- `.ds-switch`: an on-off setting: a `