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:
§ 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>
.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:
§ No dark theme
Missing.css applies a dark theme based on prefers-color-scheme
.
To opt out of this, add the .-no-dark-theme
class to your root element.
§ Reset
Use the .all:initial
class to reset all CSS properties on an
element and return it to its browser-default styles.