Utilities

For the minor alterations to the default look that make all the difference, missing.css has a collection of classes and custom elements.

.vh, <v-h>: Visually hide a content without hiding it from assistive software.

§ Container

<div class="container">

The .container class imposes a maximum width on an element and centers it. The <main> element does the same, but carries semantic baggage that might not be appropriate for all contexts.

§ Density

The density utilities set the --density CSS variable, which controls the amount of spacing between elements. The default value of --density is 1, which means the spacing between paragraphs is equal to the height of 1 line.

We provide three utility classes that set --density:

Class	Density
`.packed`	`--density` = 0
`.crowded`	`--density` = 0.5
`.dense`	`--density` = 1 (same as default)
`.spacious`	`--density` = 2
`.airy`	`--density` = 3
`.autodensity`	sets density based on viewport width

You can set --density yourself in inline styles or your own CSS:

Setting --density with inline styles

<section id="tagline" style="--density: 2">
  <h1>So easy, even a programmer can do it.</h1>
  <p>
      missing.css makes it easy to ship beautiful applications without
      locking yourself into classless libraries.
  </p>
</section>

Setting --density in a stylesheet

.link-embed {
    --density: .5; /* Embeds shouldn't take up too much space */
}

§ Typography

.bold: Sets text in boldface.
.italic: Sets text in italics. Nested italic elements (em, cite, dfn, var, i, address) will be set in roman instead.
.allcaps: Sets text in all caps and adds appropriate letter spacing.
.main-font: Renders the text in the main font (--main-font).
.secondary-font: Renders the text in the secondary font (--secondary-font).
.display-font: Renders the text in the display font (--display-font).
.mono-font: Renders the text in the monospace font (--mono-font).
.massivetext: Makes the font size really big. Scales based on line length.
.aestheticbreak: A line break added for aesthetic purposes. Usage: <span class="aestheticbreak"></span>
.list-of-links: Removes underlines from all links inside an element -- sometimes advisable for lists of links.

§ Masquerades

The following classes can be used to make one element look like another:

<a class="<button>" href="/cta">Call to action</a>

Call to action

§ Theme selection

Missing.css, by default applies a light or dark theme based on prefers-color-scheme. To customize the theme independently of the prefers-color-scheme you can use the following classes:

§ Dark theme

Add the .-dark-theme class to your root element to use the dark theme.

§ No dark theme

Add the .-no-dark-theme class to your root element to use the light theme.

§ Reset

Use the .all:initial class to reset all CSS properties on an element and return it to its browser-default styles.