Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Artboard

Fixed device sized frames for previews, also in landscape.

Data display and layout6 classesNo JavaScriptLight and dark

Example

Full

Classes

6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the artboard. On a <div> in the example. Sets alignment, width, height, overflow, border and corner radius, and --artboard-w and --artboard-h.
CSS
.artboard {
  --artboard-w: 390px;
  --artboard-h: 844px;
  flex-shrink: 0;
  width: var(--artboard-w);
  height: var(--artboard-h);
  overflow: hidden;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-md);
  background: var(--surface);
}
Size Extra small size. On a <div> in the example. Sets --artboard-w and --artboard-h.
CSS
.artboard-xs {
  --artboard-w: 320px;
  --artboard-h: 568px;
}
Size Small size. Not used in the example above. Sets --artboard-w and --artboard-h.
CSS
.artboard-sm {
  --artboard-w: 375px;
  --artboard-h: 667px;
}
Size Large size. Not used in the example above. Sets --artboard-w and --artboard-h.
CSS
.artboard-lg {
  --artboard-w: 768px;
  --artboard-h: 1024px;
}
Size Extra large size. Not used in the example above. Sets --artboard-w and --artboard-h.
CSS
.artboard-xl {
  --artboard-w: 1024px;
  --artboard-h: 1366px;
}
Modifier Modifier, combined with the artboard class. On a <div> in the example. Sets width and height.
CSS
.artboard-horizontal {
  width: var(--artboard-h);
  height: var(--artboard-w);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Artboard: start from the base class, then add modifiers -->
<div class="artboard artboard-xs artboard-horizontal grid place-items-center">320 x 568, landscape</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Data display and layoutProseTypography for long form HTML such as articles and Markdown output, in three sizes.Data display and layoutStackChildren layered on top of each other, the first one in front.Data display and layoutContainer narrowA centered column at a comfortable reading width with side padding.Data display and layoutSectionFluid vertical padding for page sections in three sizes, with a muted background option.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.