Normalization

Normalize CSS styles across browsers.

Box Sizing

Apply a modern box model & 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, and 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

Form controls take the surrounding font & drop the browser's background, so their look comes from classes.

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

Buttons have a pointer cursor.

button {
  cursor: pointer;
}

Disabled controls are dimmed & show a not-allowed cursor. The rule weighs as much as one class, so a utility on the control wins.

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .5;
}

Typography

Headings balance their lines, paragraphs avoid a lone last word, and headings inherit their size & weight.

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

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

p {
  text-wrap: pretty;
}

Chrome, Edge, and Safari bold weight correction:

b, strong {
  font-weight: 700;
}

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 & carry no underline, so a class decides both:

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

Lists

Lists have no markers or indent.

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

Rules

A horizontal rule is a single line in the text color.

hr {
  border-top-width: 1px;
  height: 0;
}

Disabling base styles

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

yummacss.config.mjs

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