{ "id": "v1-md-28bb", "long_id": "v1.material-design.docs.s02.p08.t11.u11", "name": "Material tabbed handbook, 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": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A documentation page in the paper-and-ink manner where the whole head of the page is one tall band of the primary colour: a toolbar row, a centred title with one line of lead text and a raised button, and a centred row of tabs along the band's bottom edge. Everything below is a single centred column of white sheets on a pale page, with no drawer and no second column; small captions sit on the page between the sheets. Component libraries, handbooks and product help pages built on the 2014 guidelines looked like this until about 2018.", "url": "https://chrono.skin/s/v1-md-28bb", "preview_url": "https://chrono.skin/s/v1-md-28bb/specimen.html", "files": { "STYLE.md": "# Material tabbed handbook, 2016\n\n## Summary\n\nA documentation page in the paper-and-ink manner where the whole head of the page is one tall band of the primary colour: a toolbar row, a centred title with one line of lead text and a raised button, and a centred row of tabs along the band's bottom edge. Everything below is a single centred column of white sheets on a pale page, with no drawer and no second column; small captions sit on the page between the sheets. Component libraries, handbooks and product help pages built on the 2014 guidelines looked like this until about 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%` and the band and footer span the window. Designed at 1440px. The content is one centred column capped at `--size-content` (880px); running text is capped at `--size-measure` (520px).\n- Order on the home page: `.ds-nav` (`--size-bar` 64px: menu icon and brand at the left, a few links at the right), then a `.ds-band` in the same fill holding `.ds-hero` (centred title, lead and one button) and `.ds-tabs--band` (centred, the current tab marked by a 2px line in `--color-bar-text` on the band's bottom edge). Then `.ds-main`, the column, then the one-row `.ds-footer`.\n- `.ds-main` is a vertical stack with `--space-4` (24px) between blocks. Every block is a sheet: `.ds-panel`, `.ds-grid` tiles, `.ds-stats` cards, `.ds-notice`. A group of sheets is introduced by `.ds-subhead`, a small caption set directly on the page and indented to the sheet's text edge. Sections are never separated by rules on the page, and nothing sits beside the column.\n- The long article is one `.ds-panel--article` sheet with `--space-6` (48px) padding. Inside it `.ds-article` puts the `.ds-prose` text at the left and the `.ds-sidebar` contents block (`--size-sidebar` 200px) at the right. This contents block is the only side element the layout has.\n- Spacing is on an 8px grid: `--space-1` 4px (helper text, pagination gap), `--space-2` 8px (between flat buttons, card action padding), `--space-3` 16px (button padding, gap between grid tiles and stat cards, tile text padding), `--space-4` 24px (gap between sheets, sheet side padding, bar side padding), `--space-5` 32px (top of the column, page header side padding, under the hero lead), `--space-6` 48px (hero padding, article sheet padding, overlay padding), `--space-7` 64px (spare step), `--space-8` 96px (bottom of the column).\n- Heights: toolbar and card head `--size-bar` 64px; tabs and table rows `--size-row` 48px; avatars and the menu button `--size-row-dense` 40px; buttons, fields and nav links `--size-control` 36px; floating button `--size-fab` 56px; two-line list rows 72px. Other sizes: `--size-tile` 112px (colour block of a grid tile), `--size-overlap` 72px, `--size-stripe` 4px, `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 96px.\n- Inner pages (a resource, settings, a record and its table) have no `.ds-hero` and no tabs in the band. Under the `.ds-nav` row the band takes `.ds-band--inner`: it is empty and continues the bar's fill for `--size-overlap` plus `--space-5`. `.ds-main--overlap` pulls the column up by `--size-overlap`, so the first sheet lies over the band. That first `.ds-panel` is the head of the page: `.ds-breadcrumb` at its top, `.ds-page-header` (title, one grey line, one raised button at the right) and `.ds-tabs` along its bottom edge, separated by a hairline. Below it, `--space-4` apart, come `.ds-stats` (separate small cards), then a `.ds-panel` with a `.ds-panel__head` and the `.ds-table`, or, on an edit screen, a `.ds-panel--form` with the form and its buttons in `.ds-panel__actions--end`. A chapter page puts its breadcrumb at the top of the `.ds-panel--article` sheet. The column stays single; there is no drawer on inner pages either.\n- Views: the specimen is one site with five views. `handbook` is the home view: hero and band tabs, the grid of chapter tiles, a card and the list of recent edits with its pagination. `chapter` is one handbook chapter: the article sheet with its contents block, two notices and a sheet of related links. `api` is a resource page: head sheet with breadcrumb, page header and tabs, the stat cards, and the table with its status key. `webhook` is the edit screen for one table row: head sheet with the page actions, the form sheet and the confirmation dialog. `starred` is the reader's starred chapters, shown empty, above the list of most starred chapters.\n- Below 900px the contents block drops under the text, grid tiles become one column, the page header stacks and the band tabs scroll. Below 600px the toolbar wraps: `.ds-nav__links` becomes a full-width second row under the menu icon and brand, each item an equal cell with its `.ds-nav__link` centred (the current one keeps `.is-current`), the tabs scroll sideways, the stat cards sit two by two, 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, Roboto, then Segoe UI and Helvetica Neue; `--font-mono` for code only.\n- Large light headings over small text: `--text-display` 56px on `--line-display` 1.1, `--text-h1` 34px, `--text-h2` 26px, all at weight 300; `--text-h3` 18px at `--weight-bold` 500. `--line-heading` 1.3.\n- `--text-base` 15px on a 24px line (`--line-body` 1.6) at weight 400; `--text-large` 20px for the lead; `--text-small` and `--text-ui` are both 13px.\n- `--ui-transform` uppercase at `--weight-ui` 500 for buttons, tabs and navigation; no tracking.\n- Links have no underline at rest and gain one on hover (`--link-decoration-hover`); quiet links never do.\n\n- Soft paper: `--shadow-panel` is a wide, faint two-layer shadow (16px blur, 6px drop); `--shadow-control` a small soft pair (6px blur); `--shadow-control-hover` 14px blur; `--shadow-dialog` two layers up to 22px blur.\n- Round corners that grow with the box: `--radius-control` 8px, `--radius-panel` 12px, `--radius-page` 16px; `--radius-pill` is a full pill.\n- Flat fills; a hovered button lightens (15% white) and fields are filled with `--color-surface-alt` above their bottom line, with rounded top corners. `--border-width` 1px dividers, `--border-width-strong` 2px indicators; `--focus-ring` is a 4px halo of the focus colour at 30%; `--transition` 0.3s ease-out.\n\n## Components\n\n- `.ds-page` on ``: page fill, body family and size.\n- `.ds-band`: the coloured head of the page under the nav; wraps the hero and the band tabs and carries their shadow. `--inner` is the short form for inner pages.\n- `.ds-nav`: the toolbar row inside the band. `.ds-nav__menu` is a round icon button, the summary of a `.ds-menu` that lists the views; `.ds-brand` follows it; `.ds-nav__links` > `.ds-nav__item` > `.ds-nav__link` sit at the right, the current one (`is-current`) on a faint wash of the bar text colour.\n- `.ds-brand`: the site's mark and name at the left of the toolbar, one link. `.ds-brand__mark` is a `--size-brand` (28px) 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 band when a palette's button and bar colours are close, holding the mark as inline SVG in the current colour; `.ds-brand__name` is the name at `--text-large` in the heading font with `--weight-heading`, `--heading-tracking` and `--heading-transform`, in `--color-bar-text` because the band is filled with `--fill-bar`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: centred `.ds-hero__title`, `.ds-hero__lead` and one raised `.ds-button--secondary`. No floating button and no image.\n- `.ds-tabs`: a row of `.ds-tabs__tab`; `is-current` has a 2px line, `--color-link` on a sheet and `--color-bar-text` on the band. The plain form closes a sheet (hairline above); `--band` is the centred row at the bottom of the band, in the bar text colour.\n- `.ds-main`: the single column; `--overlap` lifts it over an inner band. `.ds-subhead` is the caption above a group of sheets. `.ds-article` splits the article sheet into text and contents. `.ds-center` centres one block.\n- `.ds-page-header`: head of an inner page, inside the first sheet. `.ds-page-header__body` holds `.ds-page-header__title` and `.ds-page-header__text`; `.ds-page-header__actions` at the right holds one raised `.ds-button`.\n- `.ds-breadcrumb`: small grey trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by slashes, at the top of the head sheet; the last carries `is-current`.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code`, `pre` and links. `.ds-prose__lead` is the opening paragraph.\n- `.ds-sidebar`: the contents block beside the article: a 4px stripe in the link colour at the left, `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__link`; `is-current` is in the link colour. It has no fill and no shadow.\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 primary button. `--secondary` is the white raised button (use it on the band), `--flat` has no fill (use it inside sheets and dialogs), `--danger` is the destructive form (with `--flat`: danger-coloured text), `--fab` the accent disc with one `.ds-icon`. 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`: one column of fields. `.ds-form__field` wraps `.ds-form__label` and a `.ds-form__control` filled with `--fill-input` over a bottom line (`--area` for a textarea, inside `.ds-form__select` for a select); `is-focus`, `is-invalid` with `.ds-form__error`, `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. The buttons go in the sheet's `.ds-panel__actions--end`, not in the form.\n- `.ds-table`: 48px rows divided by hairlines, small grey head; it has no fill of its own and always sits in a `.ds-panel` under a `.ds-panel__head`. `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without, `tr.is-current` is tinted.\n- `.ds-list`: two-line rows inside a `.ds-panel`. `.ds-list__item` holds a `.ds-list__avatar` disc (`--alt`, `--accent`), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` at the right.\n- `.ds-panel`: the sheet. `.ds-panel__title` and `.ds-panel__body` for a simple card; `.ds-panel__head` is a 64px title row with an optional flat button and a hairline under it; `.ds-panel__actions` is the ruled button row (`--end` right-aligns it). `--article` is the padded article sheet, `--form` and `--pad` give the body normal text colour.\n- `.ds-stat`: one summary figure as its own small centred card: `.ds-stat__value` over `.ds-stat__label`. Three or more sit in a `.ds-stats` row, `--space-3` apart.\n- `.ds-grid`: two columns of horizontal tiles. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a square `.ds-grid__media` colour block with a number or initial at the left and `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__actions`.\n- `.ds-badge`: accent count pill; `--new`, `--chip`, and the status fills `--success`, `--warning`, `--danger`. Group with `.ds-badges`.\n- `.ds-notice`: tinted block with a 4px left stripe and `.ds-notice__title`; `--error` is a white sheet in the danger colour. `.ds-notices` stacks them at column width.\n- `.ds-pagination`: `.ds-pagination__link` cells, `is-current` filled, `is-disabled` grey; it sits right-aligned in the `.ds-panel__actions--end` of the sheet it pages.\n- `.ds-dialog`: sheet with the deepest shadow, `.ds-dialog__title`, `.ds-dialog__body`, right-aligned flat buttons in `.ds-dialog__actions`; shown on `.ds-overlay`.\n- `.ds-empty`: centred `.ds-empty__mark` disc, `.ds-empty__title`, `.ds-empty__text` and one flat button, inside a `.ds-panel`.\n- `.ds-footer`: one row in the inverse colour: `.ds-footer__brand`, a `.ds-footer__list` of `.ds-footer__link` and `.ds-footer__legal` at the right. No columns.\n- `.ds-menu`: a `
` whose `.ds-menu__button` (the ``: an icon, or the account's `.ds-avatar`) opens `.ds-menu__list`, a white sheet with the dialog shadow holding 48px `.ds-menu__link` rows. Use it for the account menu and the overflow (three dots) at the end of the bar; `--start` hangs the sheet from the left, for the menu button that carries the navigation on a phone.\n- `.ds-tooltip`: on an icon-only button, with a `.ds-tooltip__text` child naming it; the small dark label shows on hover and focus (`is-open` statically). It sits below; `--left`, `--right` and `--above` move it. Use it on the floating button and bar icons, never on a button that already has a text label.\n- `.ds-switch`: an on-off setting that takes effect at once: a `` or `