Lumos Extension for Webflow
Extension Actions
- Live on Store
Searcher
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).
• Style The Base Class
Press shift key & up arrow key to select the base class. Press shift key & down arrow key to return to all classes.
• 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
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)
• Automatic data attribute buttons on component fields
Add any embeds containing data attributes inside one div with the class of “page_code_wrap”. Apply those attributes to any element and link their value to a component field. The component field name should include the attribute name. Buttons will be automatically created for each attribute value in the embed.
Learn about the Lumos Framework at https://lumos.timothyricks.com/
Latest reviews
- Elias S
- Very good extension, for the best Webflow framework as of today. Good features dont have to be big, its often the simple and small things which speed up a workflow!
- Samuel Uebersax
- This extension is incredibly useful. Also super happy about all the recent updates. Timothy keeps improving the extension.
- usama saleem
- Very good extension , but doesn't show attributes most of the time tried on multiple browser with and without extension Kindly fix this issue
- Tim Daff
- Indispensable — Even if you don't use Lumos, the ability to add buttons to component props is a huge game changer. Secondly, when adding a new base class, hitting right-arrow to autocomplete the first part of the class name is a huge time saver.
- Reymiah thesun
- Awesome!
- Владимир Кузьмин
- it also puts calc around if I press Ctrl, in case I want to paste in a variable name. Which drives nuts xD
- Joao Lucas
- Awesome Tim!
- Dmitrii Tregubov
- Great useful Extension💪 Is it possible to make the extension (adding convenient attribute buttons to Symbols) work with connected external style CSS files?
- Tushar Malik
- This is a great extension and library! thanks for this Timothy.
- Lara Graysse
- Timothy u're amazing! Everything u do is amazing, I'm so glad than I can speak and understand english because, if I didn't I wouldn't be able to find u. This extension is wonderful, seriously, saves us A LOOOOOOOOOOOT of time. I was reeeeally excited since u first released Lumos as a cloneable and now we have it as a chrome extension. I'm speechless. Thank you, thank you, thank you!
- Lara Graysse
- Timothy u're amazing! Everything u do is amazing, I'm so glad than I can speak and understand english because, if I didn't I wouldn't be able to find u. This extension is wonderful, seriously, saves us A LOOOOOOOOOOOT of time. I was reeeeally excited since u first released Lumos as a cloneable and now we have it as a chrome extension. I'm speechless. Thank you, thank you, thank you!
- João Lucas
- This extension is amazing Timothy! Thank you so much for your work for the webflow community!
- João Lucas
- This extension is amazing Timothy! Thank you so much for your work for the webflow community!