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:
--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>
--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>
§ Reset
Use the .all:initial
class to reset all CSS properties on an
element and return it to its browser-default styles.