Components

Utility

is-screen-xs

TODO:

is-screen-sm
is-screen-md
is-screen-lg
is-screen-xl
How to?
  1. Calculate Viewport Size in CSS
  2. CSS Type Casting to Numeric: tan(atan2()) Scalars by Jane Ori

Atoms

Static marker highlight

Hover this text to see the highlight swap sides (desktop only).

How to?
  1. Marker highlight via `background-clip`

    A gradient `background-image` behind the text acts as the marker. `.-animate` clips it to the text on hover (`background-clip: text`) and slides it in/out by transitioning `background-size`/`background-position` - `.-active` flips which side it starts from.

    MDN - background-clip

Pure CSS marquee - infinite `@keyframes` translate, no JS

How to?
  1. CSS-only marquee

    `transform: translateX(100%)` animated to `-100%` on an infinite linear `@keyframes` loop. The parent box needs `overflow: hidden` to hide the text while it's off-screen.

                        
.vertical {
  transform: translateX(100%);
  animation: infinite-scroll 20s linear infinite;
}
@keyframes infinite-scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
    MDN - animation

Molecules

Header 1Header 2Header 3
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
How to?
  1. `table-layout: fixed` on the table
    border-collapse: collapse;

    This prevent extra space between table cells and ensures that if a border is applied, it will be shown.

                        
.m-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
    HTML Table Element Guide (Chris Coyier on Aug 12, 2024)

How to?
  1. Styling with the CSS :empty pseudo-class
    <div class="parallax height-quarter">
  <div class="parallax-back height-screen">
    <div class="dice" style="--top: 95%; --left: 50%"></div>
    <div class="dice" style="--top: 30%; --left: 1%"></div>
    <div class="dice" style="--top: 60%; --left: 29%"></div>
    <div class="dice" style="--top: 30%; --left: 80%"></div>
    <div class="dice" style="--top: 35%; --left: 35%"></div>
    <div class="dice" style="--top: 12%; --left: 90%"></div>
    <div class="dice" style="--top: 145%; --left: 90%"></div>
    <div class="dice" style="--top: 120%; --left: 90%"></div>
    <div class="dice" style="--top: 102%; --left: 90%"></div>
  </div>
  <div class="parallax-content">
    <p class="lorem">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </p>
  </div>
</div>
How to?
  1. Shake CSS Animation

    Hover the square: a `@keyframes shake` runs on `:hover`, nudging `transform: translate3d()` back and forth. On the homepage the same SVG is also wired to a checkbox that shakes the entire page as an easter egg - here it's just the self-contained hover trick.

                        
.shake__shape:hover {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
    CSS-Tricks - Shake CSS Animation
How to?
  1. Stretched link ("block link") pattern

    Only the card title is a real `<a>`. An absolutely positioned `::after` on that link stretches to the card's edges, making the whole card clickable while keeping exactly one focusable target. Any secondary link (like the author) just needs `position: relative` and a higher `z-index` to stay reachable above it.

                        
.m-card { position: relative; }
.m-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.m-card__meta a { position: relative; z-index: 1; }
    Inclusive Components - Cards
How to?
  1. Checkbox-hack dialog

    A checkbox + `label[for]` opens/closes the modal; `:has()` on the wrapper locks page scroll while open.

    Prevent Page Scrolling When a Modal is Open
How to?
  1. Checkbox-hack drawer + `accent-color`

    Same open/close trick as the modal, in a side panel. The checkbox's native tick color comes from `accent-color` instead of a custom-built control.

    CSS-Tricks - accent-color