tryskian

Liquid

A layout has to work between the screenshots.

Liquid is the name for a frontend workflow built around inspecting code, following the layout as the window changes, checking accessibility and making sure the interface actually works.

I often work with windows at different sizes. A page needs to preserve its reading order, spacing and controls throughout that movement. A few approved desktop, tablet and mobile images only show those particular arrangements.

Start with the structure

The documented workflow has four responsibilities:

frontend
├── inspect
│   ├── code
│   └── layout
└── check
    ├── accessibility
    └── smoke

Source inspection comes first. The rendered layout is then inspected as a fluid surface, followed by accessibility and functional checks. Understanding the structure makes a visible problem easier to locate and correct.

Visual judgment becomes an inspectable requirement

In the source discussion, I used high-contrast annotations and measured regions to communicate spacing. The annotation identified the relationship I wanted to change before I had the CSS vocabulary to describe its implementation.

That gives the engineer a concrete target to work toward and gives me a result I can compare with the intended shape.

An immediate example

The selected Polinko page keeps paired text columns on desktop and tablet, then stacks the text on mobile. Wide diagrams need to recompose without losing their relationships; captions need to stay with their figures.

The responsive sheet describes those arrangements. Liquid checks will examine what happens throughout the transitions, including the widths between them. Keyboard use, readable focus, accessible structure and functioning controls belong in that work alongside visual review.

Current work

The workflow is established and the frontend package responsibilities are documented. The package runtime is still to be assembled. Its first contract starts with source inspection before adding the layout and browser checks.

Sources & further reading