Uplink CSS Studio turns Bricks Custom CSS into a focused, visual, code-first workspace—without moving your styles into a proprietary system.**

Bricks is excellent at visual styling, but sometimes writing CSS is simply the clearer way to work. Responsive rules, container queries, nested states, calculated values, gradients, shadows, and reusable patterns are often faster to understand when you can see the CSS as CSS.

Uplink CSS Studio brings that workflow directly into the Bricks builder.

It expands the native Custom CSS experience into a larger editor with live synchronization, intelligent completion, visual value tools, reusable recipes, design-variable discovery, and shortcuts for common layout work. Your CSS remains in Bricks. The Studio gives you a better place to write it.

image

CSS remains the source of truth

Uplink CSS Studio uses the bi-directional CSS Sync service introduced in Bricks 2.4. Changes made in the Studio are reflected in Bricks and on the canvas while you work. Changes made through compatible Bricks controls can flow back into the editor.

There is no separate stylesheet format to learn and no external service holding your work. Element CSS stays in the native Bricks Custom CSS field.

That distinction matters. Uplink CSS Studio is not designed as a replacement interface for Bricks’ breakpoint-specific style controls. It takes a deliberately different approach: responsive behavior is authored in the stylesheet with @media and @container rules. The Studio provides query helpers based on the breakpoints registered in Bricks, while keeping the resulting CSS readable and portable.

Write with context, not from memory

The editor understands where you are and what you are typing. Property completion is backed by a bundled CSS standards catalog, with support for modern and emerging CSS. Value suggestions change with the active property. Bricks variables, optional ACSS variables, values in the current stylesheet, query features, recipes, and common CSS-wide keywords appear when relevant.

Short abbreviations can expand into complete declarations. Arithmetic expressions can become valid calc() expressions. Typing @media ( or @container ( offers query-aware completions instead of treating the text like an ordinary declaration. Exact recipe shortcuts can expand reusable blocks without leaving the keyboard.

The result is still ordinary CSS—just with less searching, repetitive typing, and syntax cleanup.

Visual tools where they help

A code-first workflow does not need to reject visual controls. It needs to use them selectively.

Click a recognized color, angle, easing value, gradient, or shadow in the editor and Uplink CSS Studio opens the appropriate tool:

  • Edit colors from Bricks and ACSS palettes or create custom HEX, RGB, HSL, and OKLCH values.
  • Adjust gradient angles with a compact direction dial.
  • Edit linear, radial, conic, and repeating gradients with controls suited to the selected gradient type.
  • Build and preview multi-layer box shadows and text shadows.
  • Shape cubic-bezier timing functions on an interactive graph and replay the motion preview.
  • Drag supported numeric values horizontally when numeric scrubbing is useful, or turn the feature off when it is not.

The panels are draggable, remain constrained to the available viewport, and preserve the editing context that opened them. A color chosen inside the gradient or shadow tools updates that value without interrupting the larger task.

Faster layout work without mystery CSS

The Studio toolbar offers direct controls for block, flex, and grid layouts, including direction, templates, axis alignment, and centering. Active controls reflect the declarations in the current rule. Clicking an active option removes the corresponding CSS instead of layering another value on top.

Common spacing, typography, sizing, position, surface, effect, and motion patterns are available as visible shortcuts. Every action writes understandable declarations into the editor, so the result remains easy to inspect, change, or remove.

Responsive CSS on your terms

Media-query and container-query tools can use the breakpoints already registered in Bricks. They support maximum, minimum, and between-range patterns, along with broader media features such as user preferences, pointer capabilities, orientation, display mode, and color gamut.

Comparison operators are interactive. Click < to change it to >, or <= to change it to >=, and click again to reverse it. Query blocks can be inserted at the stylesheet level or nested intelligently when the current CSS context permits it.

The breakpoint shown in the Studio header reports the current Bricks builder context. It does not create a separate breakpoint-specific CSS document.

Work with selectors, classes, and site-wide HTML

Uplink CSS Studio understands %root%, the selected Bricks element, global classes, IDs, states, and component variants. You can assign a global class or an element ID from the workspace and immediately begin writing against it.

Site-wide HTML selectors such as address, dl, dt, or dd belong in a global stylesheet rather than on an individual Bricks element. The target tool creates a starter rule, copies it, and opens the native Bricks Style Manager so the rule can be placed in Theme Styles → Stylesheet.

This keeps global HTML styling global while preserving Bricks’ native organization.

Reuse patterns without giving up control

The recipe manager stores personal CSS recipes in the current WordPress user’s metadata. Recipes can be named, categorized, searched, edited, and assigned memorable shortcuts. Type @shortcut; to insert one at the cursor.

When ACSS is present, compatible ACSS recipes and variables can appear alongside native Bricks resources. ACSS is optional; the built-in recipe workflow works without it.

A workspace designed for real builder sessions

Uplink CSS Studio can run docked below the canvas or expand to a full-screen editor. It includes search, formatting, comment toggling, a searchable stylesheet outline, declaration-level enable and disable controls, live structure breadcrumbs, session revert, and remembered interface preferences.

The structure breadcrumbs can navigate to ancestor elements and identify elements that contain Custom CSS. Optional canvas resize handles let you test widths without leaving the builder. Panels can be moved out of the way instead of covering the value you are editing.

Full Feature List

Native Bricks workflow

  • Edits the native Bricks Custom CSS value rather than storing element styles in a separate proprietary format.
  • Uses Bricks 2.4+ bi-directional CSS Sync for immediate editor, control, and canvas updates.
  • Supports active element, global-class, selector, pseudo-state, and component-variant contexts.
  • Preserves normal Bricks page saving and unsaved-change behavior.
  • Syncs supported layout changes with compatible native Bricks controls.
  • Prevents the empty align-items: initial declaration that Bricks CSS Sync can otherwise introduce.
  • Provides a direct shortcut to the native Bricks Style Manager using a CSS3-style icon.
  • Keeps the native Bricks editor theme and moves the CSS group to the top of the Style panel.

Editor workspace

  • Docked editor attached to the Bricks canvas frame.
  • Resizable dock height without a separately resizable empty spacer.
  • Full-screen editing mode.
  • Minimize, close, and session-revert controls.
  • Dark CodeMirror editing environment.
  • Live line and column status.
  • CSS formatting.
  • Search within CSS.
  • Comment and uncomment command.
  • Searchable outline built from CSS comments.
  • Per-declaration gutter controls to temporarily disable and restore individual declarations.
  • Remembered dock, minimized, full-screen, and preference state.
  • Optional automatic opening when a Bricks element is selected.
  • Keyboard-accessible controls and descriptive tooltips.
  • Consistent visible indicators on all select menus.

Context and navigation

  • Live Bricks structure breadcrumbs.
  • Breadcrumb navigation to ancestor elements.
  • Indicators for elements that contain Custom CSS.
  • Active editing target, breakpoint, state, and variant context in the workspace header.
  • Breakpoint display used as builder context, without implying separate breakpoint CSS storage.
  • Optional left and right canvas-width resize handles.

CSS completion and authoring assistance

  • Property completion from a bundled CSS standards catalog.
  • Support for modern, experimental, and draft CSS entries included by the catalog.
  • Context-aware property-value suggestions.
  • CSS-wide keyword suggestions.
  • Color-function suggestions including rgb(), hsl(), oklch(), color-mix(), and light-dark().
  • Image-function suggestions including linear, radial, and conic gradients.
  • Length, sizing, layout, overflow, typography, motion, and interaction value suggestions.
  • Discovery of Bricks global variables.
  • Optional discovery of compatible ACSS variables.
  • Discovery of custom properties used in the current stylesheet.
  • Source labels that distinguish Bricks, ACSS, and current-stylesheet variables.
  • Property abbreviations such as fs, bg, gtc, tt, and zi.
  • Tab completion that inserts a full declaration and places the caret in the value position.
  • CSS math completion that expands bare custom properties and wraps arithmetic in calc().
  • Semicolon-aware completion that avoids duplicating an existing terminator.
  • %root% completion with r + Tab.
  • Complete %root% rule insertion with R + Tab.
  • At-rule, selector-function, CSS-function, and recipe suggestions.
  • Query-aware completion for @media ( and @container ( with the caret placed in the condition.

Layout controls

  • Insert or remove display: block where relevant.
  • Insert or remove flex-row layout.
  • Insert or remove flex-column layout.
  • Insert or remove grid layout.
  • Grid-column template preset.
  • Grid-row template preset.
  • Main-axis and cross-axis alignment controls.
  • Grid inline-axis and block-axis alignment controls.
  • One-click centering.
  • Active-state detection based on declarations in the current rule.
  • Clicking an active toolbar option removes the corresponding CSS.
  • Context-aware control visibility for flex and grid operations.

CSS shortcut groups

  • Spacing shortcuts for padding, margin, and gap.
  • Typography shortcuts for font size, line height, text color, and text alignment.
  • Sizing shortcuts for maximum width, minimum height, aspect ratio, and object fit.
  • Position shortcuts for relative, absolute, sticky, inset, and stacking order.
  • Surface shortcuts for backgrounds, gradients, borders, radii, and shadows.
  • Effect shortcuts for backdrop blur, blur, brightness, and clipped overflow.
  • Motion shortcuts for transitions, translation, scale, and opacity.
  • Design-token-aware fallback values in relevant shortcut output.
  • Context filtering so text- and media-specific shortcuts appear where appropriate.

Color tools

  • Searchable native Bricks color palettes.
  • Searchable compatible ACSS color palettes and variables when available.
  • Discovery of variables that are named or used as colors.
  • Visual color swatches with resolved variable previews.
  • Custom saturation/value field, hue control, and alpha control.
  • Native eyedropper support when the browser provides it.
  • Output in HEX, RGB, HSL, or OKLCH.
  • Recognition of OKLCH values when loading an existing color.
  • Recognition of CSS variables that resolve to colors.
  • Recognition of var() colors that include fallbacks.
  • Preservation of the original variable reference when a palette variable is selected.
  • Support for color-related properties including color, background-color, background, border-color, outline-color, text-decoration-color, fill, stroke, caret-color, and accent-color.
  • Property selection when the picker is launched from the Color toolbar.
  • Locked property selection when an existing color token is being edited contextually.
  • Context-safe nested color editing inside gradient and shadow tools.

Gradient tools

  • Clickable gradient values in the CSS editor.
  • Live gradient preview.
  • Linear gradients.
  • Radial gradients.
  • Conic gradients.
  • Repeating linear, radial, and conic gradients.
  • Type-aware controls that change with the selected gradient.
  • Angle and direction controls for linear gradients.
  • Starting-angle controls for conic gradients.
  • Shape, extent, and center controls for radial gradients.
  • Visible indicators on gradient option menus.
  • Add, edit, position, and remove color stops.
  • Color-variable and fallback-aware stops.
  • Nested color picker that remains within the available viewport.
  • Applying or closing a nested color picker returns to the gradient tool so further adjustments can be made.
  • Stop removal without closing the gradient panel.
  • Scrollable content when the gradient controls exceed the available height.

Angle tools

  • Clickable angle values in supported CSS contexts.
  • Compact visual angle dial.
  • Direct numeric editing.
  • Units for degrees, radians, gradians, and turns.
  • Direction shortcuts for top, bottom, left, and right when editing a gradient direction.
  • Direction shortcuts clear when a free angle is selected.

Shadow tools

  • Clickable box-shadow and text-shadow declarations.
  • Multi-layer shadow editing.
  • Add and remove shadow layers.
  • Visual X/Y positioning control.
  • Numeric X and Y inputs.
  • Blur and spread controls.
  • Inset control where supported.
  • Editable shadow color with nested color-picker support.
  • Preview surface with a configurable background.
  • Site-background-aware preview fallback.
  • Live shadow preview.

Easing and motion tools

  • Clickable standard easing keywords and cubic-bezier() values.
  • Interactive cubic-bezier graph.
  • Draggable P1 and P2 control points.
  • Direct numeric input for all four cubic-bezier coordinates.
  • Standard presets for linear, ease, ease-in, ease-out, and ease-in-out.
  • Additional smooth and snappy presets.
  • Motion preview with replay control.
  • Live generated easing value.

Numeric scrubbing

  • Horizontal dragging on supported numeric CSS values.
  • Shift modifier for larger changes.
  • Alt/Option modifier for finer decimal changes.
  • Preserves the original CSS unit.
  • Can be disabled in Studio preferences.
  • Command/Control + Alt + X keyboard toggle.

Responsive query tools

  • Media-query insertion.
  • Container-query insertion.
  • Registered Bricks breakpoint discovery.
  • Maximum-width queries.
  • Minimum-width queries.
  • Between-range queries.
  • Width, height, inline-size, block-size, aspect-ratio, and orientation conditions where supported.
  • Media features for hover, pointer, color scheme, reduced motion, contrast, color gamut, forced colors, display mode, and scripting.
  • Query-feature value completion.
  • Intelligent placement at the stylesheet level or within an appropriate nesting context.
  • Clickable comparison operators.
  • < and > operator flipping.
  • <= and >= operator flipping.
  • Native CSS nesting support inside selectors.

Selectors and states

  • %root% insertion for the active Bricks target.
  • :has(> &) parent-targeting helper.
  • State shortcuts for hover, focus, focus-visible, focus-within, active, target, checked, disabled, enabled, open, and visited contexts where appropriate.
  • Intelligent nested-state insertion with & when the caret is inside a selector.
  • Rooted state-rule insertion when the caret is outside a selector.
  • Clickable hover, focus, focus-visible, focus-within, and active selectors.
  • Forced state preview on the Bricks canvas.

Classes, IDs, and global HTML

  • Create or attach a Bricks global class from the Studio.
  • Assign an element ID from the Studio.
  • Starter %root% rule generation for a newly assigned target.
  • Site-wide HTML selector input for tags such as address, dl, dt, and dd.
  • Starter global rule copied to the clipboard.
  • Direct handoff to Bricks Theme Styles → Stylesheet through the native Style Manager.
  • Clear separation between element Custom CSS and site-wide HTML styling.

Recipes

  • Searchable recipe browser.
  • Built-in per-user recipe manager.
  • Create, edit, and delete custom recipes.
  • Recipe names, keyboard shortcuts, and categories.
  • Category grouping.
  • @shortcut; expansion at the caret.
  • Exact shortcut insertion with Tab.
  • Optional compatible ACSS recipe discovery.
  • Provider labels that distinguish personal and external recipes.
  • User recipes stored in WordPress user metadata.

Panels and interface behavior

  • Draggable color, gradient, shadow, angle, easing, recipe, query, state, target, outline, shortcut, and preference panels.
  • Viewport-aware panel positioning.
  • Panels constrained to remain reachable on screen.
  • Consistent header close controls.
  • No redundant footer close buttons.
  • Scrollable modal bodies for long tools.
  • Polished active, hover, focus, disabled, and destructive button states.
  • Tooltips for icon-only actions.
  • Visible dropdown indicators throughout the interface.
  • Nested tools return to their parent panel rather than discarding the editing session.

Keyboard shortcuts

  • Command/Control + Shift + C: toggle CSS Studio.
  • Command/Control + Shift + O: toggle the stylesheet outline.
  • Command/Control + Alt + X: toggle numeric scrubbing.
  • Command/Control + /: toggle comments.
  • Tab: accept applicable completion, abbreviation, recipe, or CSS-math expansion.
  • r + Tab in an empty editor: insert %root%.
  • R + Tab in an empty editor: insert a complete %root% rule.
  • Escape: close the active Studio panel, then close the Studio when no panel remains open.

Integrations and compatibility

  • Requires Bricks 2.4 or newer.
  • Requires Bricks’ bi-directional CSS Sync setting.
  • Supports WordPress 7.0 or newer.
  • Supports PHP 8.3 or newer.
  • ACSS integration is optional.
  • Compatible Bricks and ACSS palettes, variables, and recipes are discovered locally.
  • Advanced Themer can remain active when its SuperPower CSS feature is disabled.
  • Does not attempt to edit Bricks’ breakpoint-specific style-control values.

Data and privacy

  • No external service calls from CSS Studio.
  • No editor content sent off site.
  • Element CSS remains in Bricks.
  • Personal recipes are stored in the current WordPress user’s metadata.
  • Interface preferences are stored in the current browser’s local storage.
  • Optional ACSS integration reads from the locally installed plugin.

Product approach

  • Code-first rather than breakpoint-control-first.
  • Responsive rules remain visible as CSS.
  • Generated output is ordinary, editable CSS.
  • Uses visual controls to edit values without hiding the resulting declarations.
  • Independent implementation inspired by the in-editor ideas in Elliot Bear’s Drypoint and Strange Tech’s Etch Enhancements, with broader workflow inspiration from Advanced Themer and Code2Bricks.

Built for developers who like Bricks and like CSS

Uplink CSS Studio is for people who want Bricks to remain the visual builder while CSS remains CSS. It does not replace Bricks’ storage, introduce a hosted dependency, or hide the output behind a custom abstraction.

It gives the native Custom CSS field the workspace it deserves: faster to write in, easier to navigate, more visual when useful, and still completely recognizable when you return later.

Requirements

  • WordPress 7.0 or newer
  • PHP 8.3 or newer
  • Bricks 2.4 or newer
  • Bricks’ Bi-directional sync between Custom CSS and style controls setting enabled

ACSS is optional. When Advanced Themer is active, its SuperPower CSS feature should be disabled so two enhanced CSS editing layers do not compete for the same Bricks synchronization workflow.

Credits and inspiration

The in-editor enhancement work was inspired, in particular, by the Etch mini-GUI, Elliot Bear’s Drypoint, and Strange Tech’s Etch Enhancements. Advanced Themer and Code2Bricks also influenced the broader in-builder workflow.

Uplink CSS Studio is an independent implementation. It does not include or derive from those projects’ source code and is not affiliated with or endorsed by Bricks or the products named above.