/* * Attempts to create universal defaults for various basic HTML elements. * * Browsers are inconsistent and these rules bring them in line and enhance * behaviour match to what novices intuit. * * Development guidelines: * 1. Keep selector specificity minimal to make overriding easier * a. No ID references eg. #button { ... } * b. No class references eg. .button { ... } * c. No custom element/component references eg. custom-button { ... } * 2. Every ruleset must have accompanying commentary to justify its inclusion. * * --- * Authors: Robin Miller */ /* ============================================ * GENERAL * ============================================ */ /** * Setting all basic container elements to flex + column because either flex or grid is more commonly * expected behaviour of container elements. * * Defaulting to scrollbars on containers prevents unexpectedly drawing over adjacent content. * Better to always be able to access content if the container is unexpectedly too small. */ html, body, header, main, nav, footer, article, section, div, aside, address, picture, figure, dl, form { display: flex; flex-direction: column; } /** * Chrome limits the HTML node to min height of viewport. Firefox does not. * This can cause odd behaviour when, eg. a linear-gradient background is set. * * Sans-serif fonts are better for displays, serif is better for print. */ html { min-height: 100%; font-family: ui-sans-serif, system-ui, sans-serif; /* Prevent Safari from adjusting fonts */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } @media print { html { font-family: serif; } } /** * Allows transitions between absolute and auto */ @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keyword; } } /** * All elements should default to border-box instead of content-box because the * intuitive "size" of an object includes all its visible area. Since borders * are very commonly visible, many developers (especially new ones) expect * border-box behaviour instead of content-box. */ *, *::before, *::after { box-sizing: border-box; /* Prevents overflow caused by long words and URLs in narrow boxes. */ overflow-wrap: break-word; } /** * Creating space from viewport edge should be done by the primary
,