Styling

Ram ships no stylesheet. Type comes from whatever it is wrapped in, and the frame itself is drawn from a handful of custom properties you can override anywhere in the cascade.

Typography is inherited

Ram sets no font size, family, weight or line height of its own, so it drops into any heading and follows it at every breakpoint.

built to delight

example.tsx

<h1 className="text-5xl font-medium">
  built to <Ram>delight</Ram>
</h1>

Custom properties

The chrome is tuned with CSS variables, set on the component or on any ancestor. Set them on a container and every frame inside it follows.

--ram-color: Default: #0d99ff; Colour of the outline, handles and label.
--ram-line-width: Default: 1px; Thickness of the outline.
--ram-outline-opacity: Default: 0.6; How far the outline is held below full strength. The handles stay solid.
--ram-handle-size: Default: 6px; Width and height of each corner handle.
--ram-handle-fill: Default: light-dark(#fff, #111); Centre of a hollow handle. Ignored when handles are solid.
--ram-handle-line-width: Default: 1px; Thickness of the handle rings, set apart from the outline so a heavy stroke never closes a hollow handle up.
--ram-inset: Default: 4px; How far the outline sits outside the text.
--ram-label-background: Default: currentColor; Background of the label, which follows the frame colour.
--ram-label-color: Default: light-dark(#fff, #111); Label text: white on light schemes, near-black on dark.
--ram-label-font-size: Default: 11px; Label text size.
--ram-label-offset: Default: 6px; Gap between the label and the outline.

built to delight

example.tsx

<Ram
  style={{
    "--ram-color": "#7c3aed",
    "--ram-handle-size": "8px",
    "--ram-inset": "8px",
  }}
>
  delight
</Ram>