Skip to main content

Style Panel

Etch's Style Panel is designed to help beginner and intermediate users build with Etch as they grow their CSS skills.

The Style Panel organizes CSS properties into logical categories and provides inputs for entering values:

  • Layout: Display, position, flexbox, and grid properties
  • Spacing: Margins, padding, and gap settings
  • Typography: Font family, size, weight, line height, and text alignment
  • Colors: Background colors, text colors, and border colors
  • Borders: Border width, style, radius, and individual side controls
  • Effects: Box shadows, opacity, and transforms

Real-time Preview​

All changes made in the Style Panel are applied immediately to the selected element, allowing you to see the results in real-time without switching between panels or refreshing the preview.

Property Inheritance​

The Style Panel shows which properties are inherited from parent elements and which are explicitly set on the current element, helping you understand the cascade.

Bi-Directional Sync​

The Style Panel automatically authors all styles to the CSS editor and keeps them in two-way sync. This is a massive advantage because it means there's ultimately no cost to using the style inputs in Etch the way there is in other builders. Your styles are never scattered across various panels — they're always unified.

Conclusion​

The Style Panel bridges the gap between visual design and code, making CSS accessible to users at all skill levels while providing the flexibility needed for advanced customization.

While the Style Panel is powerful and flexible, it's not intended to be the "forever" workflow for users. We encourage users to learn to write CSS as it's the fastest, most flexible, and most powerful approach to styling websites. The Style Panel is a "helping hand" while users get more comfortable with authoring CSS themselves and is a quick way to fill any temporary gaps in CSS knowledge.

Last updated on