Reset

Useful for establishing a consistent baseline to build upon.

All development starts with a good foundation. Rock is better than sand. Cleat CSS is no different. Below you'll find the details to our CSS reset file. But if you're in a hurry, you can skip right to the raw file reset.css and get to work.

/* Reset
----------------------------------------------------------------------------- */
:where(html) {
	font-family: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	font-feature-settings: 'liga' 1, 'calt' 1;
}

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

html {
	scroll-behavior: smooth;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

img,
picture,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

:target {
	scroll-margin-block: 6ex;
}

Let's breakdown what is happening line by line.

:where(html) {
	font-family: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	font-feature-settings: 'liga' 1, 'calt' 1;
}

First up, we want to use a modern san-serif font stack. By using :where(html) we apply the font to all elements, but with zero specificity, making it easy to override later.

Cleat CSS utilizes The Inter typeface family (open source), but in its absence will use the system default san-serif typeface. The font-feature-settings property is needed for Inter as a fix for Chrome.

---

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

Next, we want to use box-sizing: border-box for all elements and all pseudo-elements to make laying out elements more predictable.

---

html {
	scroll-behavior: smooth;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

Here we are setting the scroll-behavior to smooth so the browser window will scroll, instead of jump to anchor links. This is used in conjunction with scroll-margin-block further down in the reset file.

We also set text-size-adjust to none to prevent mobile devices from ignoring our font-size values and increasing font sizes in certain circumstances.

---

body {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Here we set the default font-size and set the font-smoothing to make for more crisp type where possible.

---

body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, dl, dd {
	margin: 0;
}

Remove any default margin from elements, so that we have more fine-tune control over the layout.

---

img, picture, svg, video, canvas, audio, iframe, embed, object {
	display: block;
	max-width: 100%;
}

Set media elements to block to make them easier to work with. We'll also use max-width: 100% to make sure that they don't break out of their containers.

input, button, textarea, select {
	font: inherit;
}

We want to make sure that form elements inherit the font from the page for design consistency.

:target {
	scroll-margin-block: 6ex;
}

This is used in conjunction with scroll-behavior: smooth on the html element. We use scroll-margin-block to give anchor links some breathing room in the block dimension, so as to not hit the top of the browser window.

← Previous
Introduction

Next →
Color