Foundations
Layout
Anchos, breakpoints, alturas del chrome, márgenes y capas de la página
Cómo se reparte el espacio de cada página. Todo es mobile first, así que los valores solo cambian hacia arriba, con min-width.
Anchos de contenido
--content-14401440pxAncho máximo de cualquier página
--content-960960pxBloques anchos de la Home
--content-720720pxTexto corrido, unos 70 caracteres por línea
Breakpoints
BaseMobileTabletDesktopWide
Header 810
048076810241440
El Header cambia a 810 y no a 768, porque a 768 la navegación no cabía junto al logo.
Chrome y márgenes
--header-height64 → 80 pxLa barra de arriba
--subheader-height57 pxLa barra de ruta del playground
--sidebar-width240 pxEl menú lateral del playground
--page-gutter20 → 24 pxEl margen lateral
--page-end48 → 64 → 80 pxEl aire antes del Footer
--z-header3Siempre arriba
--z-nav2La navegación y el cajón
--z-raised1Lo elevado sobre la página