Patterns

Layout and density

Every Skribly screen works from 320px up, which is also a 1280px window at 400% zoom. Start narrow, let content wrap before it scrolls, and let components answer to the box they are in.

Start at 320pxLink to the section Start at 320px

Design the 320px layout first. Wider layouts add columns; they never remove content.
Nothing scrolls sideways except data tables, code and timelines, and those scroll inside their own focusable box.
Long words, links and file names break instead of pushing the page wider. Use min-w-0 on flex and grid children that hold text.
Keep the side gutter at 16px on phones. Touch targets stay at least 24px, and 44px for the main actions of a page.
Respect the safe areas of phones with notches in fixed bars.

Answer to the box, not the windowLink to the section Answer to the box, not the window

A component does not know whether it sits in a wide page or a narrow sidebar, so components use container queries: @container on the box, then @md: and friends inside. Drag the slider to watch a layout reflow.

Preview width in pixels720

Reports

Quarterly report
Updated 2 days ago
Published
Release notes
Updated 3 days ago
Draft
Team survey
Updated 4 days ago
Draft

The sidebar moves to the side.

tsx

<div className="@container">
  <div className="grid gap-4 @2xl:grid-cols-[12rem_minmax(0,1fr)]">
    <nav>…</nav>
    <ul className="grid gap-3 @md:grid-cols-2 @4xl:grid-cols-3">…</ul>
  </div>
</div>

BreakpointsLink to the section Breakpoints

Page layouts use Tailwind’s default breakpoints, unchanged, so app code and the library agree.

Breakpoints, their width and what changes there
Prefix	From	Use it for
`base`	0 to 639px	Phones. Design here first: one column, full-width buttons where they help.
`sm`	640px (40rem)	Large phones and small tablets. Short fields may share a row.
`md`	768px (48rem)	Tablets. App sidebars stop being sheets.
`lg`	1024px (64rem)	Laptops. Persistent sidebars and two-column pages.
`xl`	1280px (80rem)	Desktops. A third column, such as an outline of the page.
`2xl`	1536px (96rem)	Wide screens. Keep text lines under about 75 characters.

Common layoutsLink to the section Common layouts

Stack

The default. Space between items comes from the gap, never from margins on the items.

tsx

<div className="flex flex-col gap-4">…</div>

Cluster

Buttons, badges and filters in a row that wraps instead of overflowing.

tsx

<div className="flex flex-wrap items-center gap-2">…</div>

Card grid

As many columns as fit, each at least 16rem, one column on phones.

tsx

<ul className="grid grid-cols-[repeat(auto-fill,minmax(min(16rem,100%),1fr))] gap-4">…</ul>

Sidebar and content

For apps, AppLayout does this and turns the sidebar into a sheet on narrow screens. For pages, a grid that stacks below lg.

tsx

<div className="grid gap-8 lg:grid-cols-[16rem_minmax(0,1fr)]">…</div>

SpacingLink to the section Spacing

Space follows 4px steps: gap-1 is 4px and gap-4 is 16px, the same as the --sk-space-* tokens. Use small steps inside a component, 16 to 24px between components and 48px or more between sections of a page. Related things sit closer than unrelated ones.

DensityLink to the section Density

data-density="compact" on the root shrinks the controls for the desktop tools, where a lot sits on one screen. Use it for a whole app, not for one panel, so controls keep one size per screen. Try the density switch at the top of this site: every control on this page follows it.

html

<html data-theme="dark" data-density="compact">