The inspector in depth

Classes in the Client-First convention, states and pseudo-elements, breakpoint overrides, every field of Layout, Typography and Style, canvas handles, and the edges of what the panel can do.

This continues Style an element: the Design tab. It's written for designers who know Webflow or Figma.

How a change is written

The panel always wins: it finds the smallest stronger selector, and never uses !important. When it can't win, for example against an inline style, it says so before you type and offers the code or the agent. An element without a class gets a readable one on its first change, like pricing-card_heading.

Classes

Tandmade follows the Client-First convention.

  • The class strip on an element: click a class to style it, double-click to rename it across the site, right-click to remove it.
  • Utility classes form families (text-size-*). Hover one to preview the change; arrow keys step through the family.
  • Press . anywhere in the editor for the site's classes; you can create a class or an is-… combo there.
  • Combo classes work as in Webflow.

States and parts

  • States: Default, Hover, Pressed, Focus, and also Checked, Disabled, Invalid, Placeholder, Open and Current page; position in a list (first, last, odd, even); "when the parent is hovered"; site states like "Scrolled · Nav"; the page's language.
  • Parts: Before and After, with a shape, text or an attribute as content.
  • The page forces the state you're styling, so you see exactly what you're tuning. Hover doesn't stick on touch screens.
  • A state shows as a difference from Default: "On hover · 1 change ← Default". Animate it adds a transition in one click.

Breakpoints

Desktop is the base. Below it: Laptop (1199 px), Tablet (991 px), Mobile (767 px), Mobile portrait (479 px). Above it: 1280+, 1440+, 1920+. Breakpoint widths… changes them for the site, between 240 and 3000 px, and rewrites them in the CSS.

Away from Desktop the panel says "On Mobile · 3 overrides", and you can remove overrides row by row. Hide on… hides an element at one size and only in that use. Copy style, Paste style and Rules (every rule styling the element) are in the element's menu.

Fields and handles

  • Drag on a field to change it (⌥ fine, ⇧ by 10). Typing takes units, maths (+8, *2), auto, clamp() and calc().
  • Live preview while you drag, step with arrows or hover in a menu; a label on the page shows the live value.
  • On the page, drag handles for padding, gap, margin, corners, size and the position of an absolutely positioned element. They snap to your site's spacing.

Layout

  • Display: Block, Column, Row, Grid; show or hide per breakpoint.
  • Flex: a 3×3 alignment grid in one click, and Gap.
  • Grid: a column ruler (up to 12) in real proportions; drag a boundary to redistribute. Auto-fill and auto-fit, areas, and Stack as a mobile pattern in one write.
  • Spacing: padding and margin, all sides, per axis or per side.
  • Size: Fill, Hug, Fixed, % of the parent; min and max; aspect ratio; for media Cover, Contain and more.
  • Overflow, scroll snap and scrollbar style.
  • Position: Static, Relative, Absolute, Fixed, Sticky, each with a sentence on what it does. Switching to Absolute doesn't jump. Pins (Cover, Center, corners), z-index with "above … · below …", and anchor offset under a sticky nav.
  • Diagnoses with a one-click fix: "Won't stick", "Doesn't shrink", unequal columns.

Typography

  • The font card shows the element's own words in its real font with its role: "Display · Bodoni Moda 400 · 168 / 0.9". Click to apply one of the site's text styles.
  • Size, line height and letter spacing with ticks from your roles; letter spacing in % too, as in Figma.
  • Scale down on smaller screens writes the tablet and mobile sizes in one step.
  • Only the weights your site loads, or Load more weights….
  • Color with a contrast check, alignment, case, wrapping (Balanced, No orphans).
  • Details: decoration, max lines (1–6), hyphenation, tabular figures, fractions and OpenType features the font really has.
  • Text effects: shadow, outline, gradient fill. Lists: bullets, numbers or an icon from the site's set.

Color, background, borders and effects

  • Color picker: roles, palette, opacity tied to a token, a custom color, eyedropper, hex.
  • WCAG 2.2 contrast on the swatches: "Contrast 2.6:1 — fails AA".
  • Layered backgrounds: linear and radial gradients, a color overlay, an image. Gradient presets (Darken bottom, Vignette…), the image's focal point by click, an overlay for legibility, and the image's weight for visitors.
  • Corners (each one, or Pill), borders from tokens, outline, a focus ring with a warning when it's missing.
  • Opacity, blend modes, shadows from tokens (None, Raise, Float), blur and backdrop blur, filters.
  • Transform: scale, rotate, move, origin. SVG icons: color, size, stroke, caps, dashes. Cursor and pointer events.

Content of an element

  • Text with the same formatting as on the page; heading level with an outline check ("Skips H2"); ✦ Rewrite.
  • "Same text in 3 places" when a text repeats.
  • Links and buttons: page, section, URL, email, phone; open in a new tab; language-aware addresses.
  • Images: Replace, Upload, alt text or decorative, load first.
  • Video and embeds; anchors with Copy link.

Limits

  • One element at a time; editing several at once isn't available.
  • Inline styles and !important aren't overridden; classes composed in code are read-only. Use the code or the agent.
  • Skew and 3D transforms outside keyframes, and conic gradients, need code or the agent.
  • One interaction per element. There are no srcset or sizes fields: images are optimised when you publish.
  • Videos over 25 MB get a suggestion to shorten them or use an embed.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.