Chrome Extension
Features Of The Extension
Fast Class Naming
Pressing the right arrow key in the class selector field returns the class name of the nearest parent that has a component class (class containing underscores).
PX to REM
Type a number into any style panel field and press the space bar. The number will be divided by 16 and the rem unit will be attached to the end.
PX to %
Divide the width of any element by the width of its parent to get a percent width. Example: type 562/1440 into any style panel field and press the space bar. 562 will be divided by 1440. The result will be multiplied by 100, and a % unit will be attached to the end.
Automatically wrap any --variable-name in color-mix() for transparency
Example: type --theme--text%60 in any custom property value field and press the tab key. It will be converted to color-mix(in srgb, var(--theme--text) 60%, transparent)
Automatically wrap any --variable-name in var() and any math in calc()
Example: type --grid-gap / 2 in any custom property value field and press the tab key. It will be converted to calc(var(--grid-gap) / 2)
https://www.youtube.com/shorts/PnLh8SvwrZ4
Creating Component Buttons
https://www.youtube.com/shorts/6FGtGLR3pJE
If the extension detects the words “true” or “false” in the component field, it will automatically add “true” & “false” buttons under that field even if that attribute name isn’t created anywhere inside an embed.
Step 1:
Add any embeds containing data attributes inside one div with the class of “page_code_wrap”
Step 2:
Create the data attributes inside the embed. In this example, padding top will have four buttons: none, small, main, & large. Refresh Webflow after adding this code to your embed.
Step 3:
Add the attribute to an element within a component and link the attribute value to a component field. The component field name must include the words that follow data- in the attribute name.
Step 4:
Close the component and click any button to change the field value.
Last updated
