Lumos
  • Consistency at Scale
  • Docs
    • Breakpointless
    • Class Naming
    • Page Structure
    • Typography
    • Color
    • Grid
    • Flexbox
    • Sizes & Spacing
    • Fluid Responsiveness
    • Components
    • FAQs
  • Resources
    • Cloneable
    • Figma File
    • Component Library
    • Chrome Extension
    • Changelog
    • Showcase
Powered by GitBook
On this page
  • Fast Class Naming
  • Style The Base Class
  • PX to REM
  • PX to %
  • Automatically wrap any --variable-name in color-mix() for transparency
  • Automatically wrap any --variable-name in var() and any math in calc()

Was this helpful?

  1. Resources

Chrome Extension

PreviousFAQsNextShowcase

Last updated 3 months ago

Was this helpful?

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. Below the desktop breakpoint, stacked classes will be removed and added back.


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)


LogoLumos Extension for Webflow