Utilities

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

§ Visually hidden content

.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.
.primary-font
Renders the text in the primary font (--primary-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>

§ 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

§ Reset

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