Box Sizing

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

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

* {
  margin: 0;
  padding: 0;
}

Document

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

html {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Noto Sans,
    Liberation Sans,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
}

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

Media Elements

Ensure images & videos behave predictably in all layouts.

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

Form Elements

Normalize form controls for visual consistency & accessibility.

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

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 #bfc2c7;
}

Apply consistent focus styles to interactive elements.

:is(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

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

Typography

Improve rendering, wrapping, & default font behavior.

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

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

p {
  text-wrap: pretty;
}

Chrome, Edge, & Safari bold weight correction:

b,
strong {
  font-weight: 700;
}

Default font size across browsers:

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

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

a {
  color: inherit;
  text-decoration: none;
}

Lists

Remove default list styles for clean, customizable lists.

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

Tables

Standardize table header styling for better readability.

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

Miscellaneous

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

hr {
  border-top: 1px solid #bfc2c7;
  height: 0;
  margin: 1em 0;
}

Ensure details and summary elements display correctly.

details {
  display: block;
}

summary {
  display: list-item;
}

Disable Base Styles

Base styles are enabled by default to disable it set normalize to false in yumma.config.mjs.

import { defineConfig } from "yummacss";

export default defineConfig({
  normalize: true,
});