Lumos Extension for Webflow

This extension is built to be used on Webflow.com. It provides shortcuts for working faster in Webflow. V1 of the extension generously developed by https://www.fri3nds.com/

• 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 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)

• Automatically wrap any --variable-name in color-mix() for transparency