Normalization

The reset clears what browsers add and sets nothing a utility would have to undo. Every rule weighs at most one class, so a utility always wins.

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

Form controls take the surrounding font and 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 and 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 and paragraphs wrap long words, headings balance their lines, and paragraphs avoid a lone last word. Headings take their size and weight from the text around them.

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, & 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 and 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;
}

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: false,});