Base Styles

Box sizing

Apply a modern box model and remove browser defaults to simplify layout consistency.

1. Use an intuitive box-sizing model for design consistency.
2. Remove default margin & padding.
3. Reset default border styles.

*,
*::before,
*::after {
  box-sizing: border-box; /* 1 */
  border: 0 solid; /* 3 */
}

* {
  margin: 0; /* 2 */
  padding: 0; /* 2 */
}

Document

Set a default system font, improve rendering, & apply accessible line-height.

1. Set a default system font.
2. Improve font rendering.
3. Inherit font styles from parent elements.
4. Apply accessible line-height.

html {
  font-family: system-ui, sans-serif; /* 1 */
}

body {
  -webkit-font-smoothing: antialiased; /* 2 */
  font-family: inherit; /* 3 */
  line-height: 1.5; /* 4 */
}

Media Elements

Ensure images & videos behave predictably in all layouts.

1. Set media elements (images, videos, canvases) to block-level.
2. Limit maximum width to parent container.

canvas,
img,
picture,
svg,
video {
  display: block; /* 1 */
  max-width: 100%; /* 2 */
}

Form Elements

Normalize form controls for visual consistency & accessibility.

1. Reset background & border styles.
2. Use inherit for font consistency.
3. Add default padding for usability.

button,
input,
optgroup,
select,
textarea {
  background-color: transparent; /* 1 */
  font-family: inherit; /* 2 */
  padding: 0.5rem; /* 3 */
}

Add a default border to form elements that do not have a class attribute.

button:not([class]),
input:not([class]),
optgroup:not([class]),
select:not([class]),
textarea:not([class]) {
  border: 1px solid #f5f5f6; /* 1 */
}

Apply consistent focus styles to interactive elements.

a,
button,
input,
select,
summary,
textarea {
  &:focus {
    outline: 2px solid transparent;
  }
}

Set a minimum height for textareas without a defined rows attribute.

textarea:not([rows]) {
  min-height: 10em;
}

Ensure the buttons have a pointer cursor.

button {
  cursor: pointer;
}

Disabled states

1. Reduce opacity & apply a "not-allowed" cursor.

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed; /* 1 */
  opacity: 0.5; /* 1 */
}

Typography

Improve rendering, wrapping, & default font behavior.

1. Avoid text overflows.
2. Improve line wrapping for headings.
3. Apply a consistent font weight.

h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word; /* 1 */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem; /* 3 */
  font-weight: 600; /* 3 */
  text-wrap: balance; /* 2 */
}

p {
  text-wrap: pretty; /* 2 */
}

Chrome, Edge, & Safari bold weight correction:

b,
strong {
  font-weight: 700;
}

Default font size across browsers:

small {
  font-size: 80%;
  line-height: 1.5;
}

1. Correct the inheritance and scaling of font size in all browsers.
2. Correct the odd em font sizing in all browsers.

pre,
code,
kbd,
samp {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

1. Remove default underlines from links.
2. Inherit color from parent elements.

a {
  color: inherit; /* 3 */
  text-decoration: none; /* 1 */
}

Lists

Remove default list styles for clean, customizable lists.

ol,
ul {
  list-style: none;
  padding: 0;
}

Tables

Standardize table header styling for better readability.

1. Apply consistent bold font weights.

th {
  font-size: 1rem; /* 1 */
  font-weight: 600; /* 1 */
}

Miscellaneous

Fix minor browser quirks and improve default styles for common elements.

1. Add correct height in Firefox.
2. Correct text decoration.
3. Add spacing around hr elements.

hr {
  border-top: 1px solid #f5f5f6; /* 2 */
  height: 0; /* 1 */
  margin: 1em 0; /* 3 */
}

Ensure details and summary elements display correctly.

details {
  display: block;
}

summary {
  display: list-item;
}

Disable base styles

Set buildOptions.reset to false in yumma.config.mjs.

export default = {
  buildOptions: {
    reset: false,
  },
};