Editor Enhancer - The Best UI for Oxygen Builder
Customer Login
Back to Documentation

Style Flow

Keeping track of all your styles is a pain if you don't have Style Flow. This program displays all of a component's styles - from ID, classes, breakpoints, and pseudos - into a reference table.

Each row is for either the ID or one of the classes applied to the component. The selector name is displayed above the breakpoint columns.

Style Flow
In-editor style spreadsheet, showing all styles applied to the selected component across ID, classes, breakpoints, and pseudos.

Within the breakpoint columns are the styles, categorized by pseudo-selectors original, hover, before, and after (if they exist). Each style has two operations. Clicking the style name (e.g. background-color) will take you directly to the panel where that style is set so you can quickly modify it. Further, selection will be automatically changed to the appropriate selector (ID or class), breakpoint size, and pseudo, if applicable.

The second operation is to surgically remove a style. This is particularly helpful with clashing, doubled styles, where one overwrites another. Hover over the style you want to remove, then click the trash can icon that appears. The style will turn red. At this point, the style has been removed and you can close Style Flow to make it permanent. However, if you make a mistake, click the arrow that appears in place of the trash can to return the style. Once the Style Flow panel is closed, you will be able to use Oxygen Builder's undo to return styles.

Style Flow
Surgical removal of styles. Red indicates style is ready for removal.
Editor Enhancer - The Best UI for Oxygen Builder
2021 Editor Enhancer. All rights reserved.
closecogcommentchevron-downellipsis-vcopyrightfacebook-official