Disposició
Primer el mòbil, una columna, el contingut centrat mentre el marge s'ajusta. Tres columnes fixes cobreixen telèfon, tauleta i escriptori. L'escala d'espaiat de sota es llegeix del full d'estils.
Columnes
La pàgina és una sola columna centrada amb una amplada màxima fixa per banda. Per sota d'aquesta amplada, el marge és l'única cosa que s'ajusta, de manera que la mesura de lectura es manté còmoda en comptes d'estirar-se de banda a banda en una pantalla ampla. Els articles s'estrenyen encara més, fins a una columna de lectura de 720 píxels; només els blocs a sang completa com el codi en surten.
| Banda | Columna | Marge | Barra superior |
|---|---|---|---|
| Mòbil | 430px | 20px | 56px |
| Tauleta | 960px | 24px | 60px |
| Escriptori | 1100px | 24px | 64px |
Punts de ruptura
Tres bandes, indicades tal com són realment. La banda de tauleta arriba fins a 1279 píxels, així que una finestra de 1024 píxels rep la mida de tauleta, no la d'escriptori. El dock de pestanyes és un recurs de telèfon i tauleta; la navegació d'escriptori pren el relleu a 1280.
| Mòbil | ≤ 699px |
| Tauleta | 700–1279px |
| Escriptori | ≥ 1280px |
Espaiat
L'espai es construeix sobre una base de quatre píxels. Els tokens de sota estableixen el ritme entre seccions i capçaleres; com que el farciment de secció és d'un sol costat, dues seccions adjacents queden separades el doble del token.
| Token | Escriptori | Tauleta | Mòbil | Estableix |
|---|---|---|---|---|
--sp-section | 28px | 22px | 22px | Farciment d'una secció (dues s'apilen al doble d'això). |
--sp-band | 56px | 32px | 24px | Farciment dins d'una banda tenyida. |
--sp-heading | 24px | 18px | 14px | Espai d'una capçalera de secció fins al seu contingut. |
El ritme, anotat
Les bandes ratllades són el mateix espai mesurat, no un dibuix: l'alçada la marquen els tokens en viu, així que es redueixen per banda exactament com el lloc. Les etiquetes es llegeixen escriptori / tauleta / mòbil.
El ritme s'imbrica: secció, després targeta, després grup, després element, cadascun amb menys aire que el que l'envolta.
Àrees tàctils
Els controls tàctils primaris mantenen un terra de 44 píxels: les pestanyes del dock, els controls de la barra de lectura, les icones del peu al mòbil. El glif interior es queda en 15 a 20 píxels; el padding fa la resta. Els controls compactes pensats per a punter (les fletxes de prestatgeries i sèries, la cerca de la barra superior) es queden en 38 a 42 píxels amb espai lliure al voltant.
Logotip en un cercle
El símbol s'asseu en un marc circular i n'omple aproximadament dos terços, amb un anell fi a la vora. Apareix a 48 píxels al costat d'un rol, a 96 en una targeta i a 120 com a àncora de la cronologia.