Skip to main content

Normalization

Normalize CSS styles across browsers.

Every rule below is read from the reset Yumma CSS ships, so this page cannot fall out of step with what your project actually gets.

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

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: .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: .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;
}

Monospace elements keep the browser's own font stack at the surrounding size:

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

Links inherit their color and carry no underline, so a class decides both:

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.

yumma.config.mjs
import { defineConfig } from "yummacss";
export default defineConfig({  normalize: false,});