STYLESYNC TEST PAGE
Every property.
Both directions.
Always in sync.
47 CSS properties mapped to Bricks GUI controls. Write CSS, see it reflected in the visual editor. Change a control, see it in your code. This page exercises every single one.
HOW IT WORKS
Write CSS. See it everywhere.
01
Type a property
Write font-size, padding, background-color, or any of 47 supported properties in the CSS panel.
02
GUI updates instantly
The Bricks control panel reflects your CSS in real time. Color pickers, spacing inputs, and typography controls all stay in sync.
03
Works both ways
Change a slider, pick a color, adjust spacing in the GUI — your CSS code updates automatically. True bi-directional sync.
TYPOGRAPHY
Every type control, one view
HEADING SCALE
Display Heading
5.6rem / 800 / -0.03em tracking
Section Heading
3.6rem / 700 / -0.02em tracking
Card Heading
2.4rem / 600 / default tracking
Label Heading
1.8rem / 500 / default tracking
BODY STYLES
This is regular body text at the default size with comfortable line-height and normal 400 weight.
Medium weight at 500 feels more intentional, perfect for UI labels and interactive text.
Italic text for emphasis or attribution
UPPERCASE WITH TRACKING
Underlined for decoration testing
Text with shadow
LAYOUT & SPACING
Flexbox, dimensions, box model
A mini dashboard layout demonstrating width, height, padding, flex properties, gap, and overflow.
SIDEBAR
Dashboard
Properties
Settings
PROPERTIES
47
CATEGORIES
8
MODULES
4
CONTENT AREA
This area demonstrates min-height, overflow hidden, and nested padding. The dashboard uses flex-direction row, width on the sidebar, and calc on the main area.
BORDERS & SHADOWS
From subtle to dramatic
Progressive border and shadow treatments. Each element adds one more layer of visual depth.
Flat
Bordered
Accent
Soft shadow
Glow
50% opacity
HOVER STATES
Pseudo-class sync
Every button below has different hover properties. Background, text color, borders, shadows, and opacity all sync in :hover state.
Hover each button to see different property changes. The last button combines all four hover types.