The Style Indicator is a visual tool that shows where an element’s style originates from, helping you manage your project’s design. It also helps you confirm that your shared styles are being applied and updated correctly.
Understanding Style States
There are three main style states, each with a corresponding color indicator:
Default (⚪️): This is the element's original style when it is first added to the canvas.
Custom (🟡): The style has been manually changed from its default or inherited state.
Inherited (🟢): The element's style is being inherited from a different layout, typically the main layout (e.g., desktop).
Using the Style Indicator for Responsive Design
The Style Indicator is a key tool for creating responsive content with less effort. Instead of manually adjusting styles for every element on different layouts, you can use the indicators to ensure your design adapts automatically. By using automatic sizing and values like percentages on your main layout, you can rely on the other layouts to inherit those styles, minimizing the need for repetitive work.
Best Practices
Follow these best practices for efficient responsive design:
On your main layout (e.g., desktop), it's normal for most styles to be custom (🟡).
On tablet and mobile layouts, aim to have styles that are inherited (🟢) or default (⚪️). This means the styling is being passed down from the main layout, ensuring consistency and responsiveness.
Use flexible sizing values, such as percentages or automatic sizing, instead of fixed pixel values. This allows your elements to resize smoothly and correctly across a variety of devices.
Style States
There are three main style states:
Default (⚪️): The original style when you first add an element.
Custom (🟡): The style has been changed from the default or inherited style.
Inherited (🟢): The style comes from the main layout.
Using the Style Indicator for Responsiveness
Instead of adjusting each element in multiple layouts, use the style indicator to make your content responsive with less work. Use automatic sizing and sizing values like percentages for responsive design, based on a single layout.
Best Practices
On the main layout (e.g. desktop), styles will be custom (🟡).
On tablet and mobile layouts, try to use inherited (🟢) or default (⚪️) styles.
Use percentages or automatic sizing instead of pixel sizes to make your elements adjust smoothly across different devices.