floor-typography-css/src/floor.css

Vanilla CSS normalizer and the extra minimum for an intuitive default CSS for typography and web-apps.

/* the floor you build style on -- browser normalizer (no ie) and intuitive defaults, narrow viewports first */


/* border-box is expected */
*, ::before, ::after { box-sizing: border-box; }

/* `::before`/`::after` inheriting border-radius is intuitive */
::before, ::after { border-radius: inherit; }

:root {
	/* line-height for readability on any viewport width */
	line-height: calc(1 + var(--added-lead, .6));
	/* [consistent line-spacing for inline, different line-heights](//drafts.csswg.org/css-inline-3/#line-sizing-property) */
	line-sizing: normal;
	/* auto hyphenate words for narrow viewports */
	hyphens: auto;
	/* break words for no x-axis scrolling (use this, not `word-break`) */
	overflow-wrap: break-word;
	/* prevent adjustment of font-size after Ios orientation change */
	-webkit-text-size-adjust: 100%;
}


/* FIX DISPLAY */

/* maintain attribute `hidden` behaviour when overriding `display` values */
/* audio without `[controls]` remains hidden by default */
/* hide `source` elements, they have nothing to display */
[hidden], audio:not([controls]), source { display:none; }

/* remove unnecessary wrapping `picture`, while maintaining content */
picture { display: contents; }


/* FLOOR TYPOGRAPHY */

/* add `bolder` font weight (Chrome/Edge/Safari) */
strong { font-weight: bolder; }

/* correct the font size for `:is(article,section) h1` elements (Chrome/Firefox/Safari) (margin is corrected further down) */
h1 { font-size: 2em; }

hr {
	/* solid border/rule */
	border-style: solid;
	/* horizontal, 1px high border/rule */
	border-width: 1px 0 0;
	/* remove Firefox `color: gray` */
	color: inherit;
	/* correct box sizing (Firefox) */
	height: 0;
	/* double block spacing, remove margin-inline `auto` (to not be centered by default) */
	margin: calc(2 * var(--spacer, 1rem)) 0;
}

/* give 'block' flow elements consistent block margin */
address, datalist, details, fieldset, pre, table,
canvas, embed, figure, iframe, object, video,
dl, ol, ul,
h1, h2, h3, h4, h5, h6,
blockquote, p {
	margin-block-start: var(--spacer, 1rem);
	margin-block-end: var(--spacer, 1rem);
}

/* remove block margin for children that shouldn't disrupt vertical flow */
ol ol, ol ul, ul ol, ul ul {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* MEDIA ELEMENTS */

img, svg, video, canvas, audio, iframe, embed, object {
	/* remove space-below in case authors overwrite the display value */
	vertical-align: middle;
	/* responsive by default */
	max-width: 100%;
}

/* responsive by default */
img, svg, video, canvas { height: auto; }

/* no inline margin -- horizontal align with adjacent */
figure { margin-inline-start: 0; margin-inline-end: 0; }


/* MONO-FONT ELEMENTS */

pre, code, kbd, samp {
	/* hack to fix the inheritance and scaling of font-size for preformatted text */
	font-family: var(--mono-font, monospace), var(--mono-font, monospace);
	/* equal font-size for all browsers */
	font-size: 1em;
}

/* wrap by default */
pre { white-space: pre-wrap; }


/* INTERACTION */

/* some intuitive consistency for clickable elements */
button, summary { cursor: pointer; }