Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Diff

A before and after comparison; drag the divider, which is a native resize handle.

Data display and layout4 classesNo JavaScriptLight and dark

Example

Full

Classes

4 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 diff. On a <div> in the example. Sets grid display, grid tracks, overflow, corner radius, generated content and stacking order.
CSS
.diff > * {
  grid-row: 1;
}

.diff:has(.diff-resizer:hover)::after {
  scale: 1.1;
}
Part Part of the diff. On a <div> in the example. Sets stacking order, grid tracks, overflow, width and height.
CSS
.diff-before > *, .diff-after > * {
  width: 100cqi;
  height: 100%;
  object-fit: cover;
}

.diff-before {
  z-index: 1;
  grid-column: 1;
  overflow: hidden;
  contain: inline-size;
}
Part Part of the diff. On a <div> in the example. Sets grid tracks, width and height.
CSS
.diff-after {
  grid-column: 1 / -1;
}

.diff-before > *, .diff-after > * {
  width: 100cqi;
  height: 100%;
  object-fit: cover;
}
Part Part of the diff. On a <div> in the example. Sets stacking order, grid tracks, width, height, alignment and overflow.
CSS
.diff-resizer {
  z-index: 2;
  grid-column: 1;
  width: 50cqi;
  min-width: 1.5rem;
  max-width: calc(100cqi - 1.5rem);
  height: 1.5rem;
  align-self: center;
  overflow: hidden;
  opacity: 0;
  resize: horizontal;
  cursor: ew-resize;
  scale: 1 40;
  transform-origin: 100% 50%;
}

.diff:has(.diff-resizer:hover)::after {
  scale: 1.1;
}

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">

<!-- Diff: start from the base class, then add modifiers -->
<div class="diff aspect-video max-w-xl"><div class="diff-before"><div class="flex items-center bg-gradient-to-br from-primary to-accent p-6 text-2xl font-bold text-primary-foreground">Before</div></div><div class="diff-after"><div class="flex items-center justify-end bg-surface-3 p-6 text-2xl font-bold">After</div></div><div class="diff-resizer"></div></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 layoutCode blockA code listing with a header for the file name.Data display and layoutCountdownNumber boxes with labels; the value is text or the --value custom property.Data display and layoutMasonryColumn based masonry that keeps each child whole, auto or with 2, 3 or 4 columns.Data display and layoutMaskClip any element or image to a shape.

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.