Introduction of Open Component Approach

Components

Renamed
Custom Code > Global Styles
Section / Full > Section Custom
Grid Guide > Global Guides
Global / Btn Group > Button Wrapper
Global / Background Color > Background Color
Global / Clickable > Clickable
Global / Content > Content Wrapper
Global / Div > Layout Div
Global / Eyebrow > Typography Eyebrow
Global / Heading > Typography Heading
Global / Paragraph > Typography Paragraph
Global / Section > Section
Global / Section Space > Spacer

Deleted
Section / Simple
Section / Hero / Placeholder
Form / Main
Global / Visual

Added
Button Text Link
Form
Form Fieldset
Form Input
Form Radio
Form Select
Form Select Option
Form Textarea
Form Recaptcha
Slider
Typography Tag
Media Overlay
Visual Image
Visual Video
Logo
Card Primary
Button Arrow
Stroke Path
Accordion List
Accordion Item
Icon Search
Nav
Nav Banner
Menu
Button Close
Modal
Tab
Tab Link

Classes

Added
u-heading-accent
u-theme-brand
u-background-skeleton
u-threshold-large
u-threshold-medium
u-threshold-small
u-section
u-ignore-trim
u-ratio-5-4
u-ratio-4-5
u-padding-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-block-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-inline-{sitemargin,gutter,text,0-8}
u-padding-top-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-bottom-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-left-{sitemargin,gutter,text,0-8}
u-padding-right-{sitemargin,gutter,text,0-8}
u-line-height-small
u-line-height-medium
u-line-height-large
u-line-height-huge
u-letter-spacing-tight
u-letter-spacing-normal

Renamed
u-btn-group > u-button-group
u-mt-{auto,gutter,text,0-8} > u-margin-top-{auto,gutter,text,0-8}
u-mb-{auto,gutter,text,0-8} > u-margin-bottom-{auto,gutter,text,0-8}

Variables

Renamed
screen-size/max > site/viewport-max
screen-size/min > site/viewport-min
container/small > max-width/small
container/main > max-width/main
container/full > max-width/full
swatch/brand > swatch/brand-500
typography/line-height/1 > typography/line-height/small
typography/line-height/1.1 > typography/line-height/medium
typography/line-height/1.3 > typography/line-height/large
typography/line-height/1.5 > typography/line-height/huge
typography/letter-spacing/-0.03em > typography/letter-spacing/tight
typography/letter-spacing/0em > typography/letter-spacing/normal

Added
Theme / Brand mode
swatch/brand-100
swatch/brand-200
swatch/brand-300
swatch/brand-400
swatch/brand-600
swatch/brand-700
swatch/brand-800
swatch/brand-900
theme/heading-accent
text-link/text
text-link/border
text-link/text-hover
text-link/border-hover
text-style/text-wrap
nav/max-width-outer
nav/max-width-inner
nav/height
nav/banner-height
nav/height-total
nav/spacing-outer-vertical
nav/spacing-outer-horizontal
nav/spacing-inner-horizontal
nav/radius
nav/hamburger-thickness
nav/hamburger-gap
nav/menu-open-duration
nav/menu-close-duration
nav/dropdown-open-duration
nav/dropdown-close-duration
theme/nav/background

v2.0.9 - CSS functions moved to native variables

Classes

Removed
u-hflex-
u-vflex-
u-grid-from-large
u-grid-from-medium
u-grid-from-small

Added
u-background-transparent
u-background-1
u-background-2
u-flex-horizontal-wrap
u-flex-vertical-nowrap
u-flex-horizontal-nowrap
u-flex-vertical-wrap
u-grid-above
u-grid-below
u-order-unset-above
u-order-unset-below
u-all-unset-above
u-all-unset-below

Variable Changes

Renamed
swatch/dark-faded to swatch/dark-900-o20
swatch/dark to swatch/dark-900
swatch/light to swatch/light-100
swatch/light-faded to swatch/light-100-o20

Removed
column-width/
column-margin/
align/start (default collection)
align/center (default collection)
align/end (default collection)
size/

Added
site/column-width
screen-size/max
screen-size/min
theme/background-2
theme/selection/background
theme/selection/text
column-count/value
gap/size
swatch/dark-800
swatch/dark-200

Component Changes

Added
Global / Background
Global / Content

Removed
Fluid Sizes

v2.0.8 - Lumos becomes completely breakpoint free

Main Changes
• page_code_responsive embed removed (replaced with Fluid Sizes component from the Fluid Builder App)
• container-type: inline-size added to all containers for easy responsiveness with container queries
• Column Count variable collection added for adjusting grid column count.

Classes

Renamed
u-grid-desktop to u-grid-from-large
u-grid-tablet to u-grid-from-medium
u-grid-portrait to u-grid-from-small
u-text-align-left to u-alignment-start
u-text-align-center to u-alignment-center
u-text-align-right to u-alignment-end

Removed
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-order-first-desktop
u-order-first-tablet
u-order-last-desktop
u-order-last-tablet

Added
u-align-items-variable
u-justify-content-variable
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around
u-mt-auto
u-mb-auto
u-ratio-2-1
u-ratio-16-9
u-ratio-3-2
u-ratio-1-1
u-ratio-2-3
u-display-contents
u-max-width-none
u-max-width-10ch
u-max-width-12ch
u-max-width-14ch
u-max-width-16ch
u-max-width-18ch
u-max-width-20ch
u-max-width-30ch
u-max-width-40ch
u-max-width-50ch
u-max-width-60ch
u-max-width-70ch
u-max-width-80ch
u-text-trim-off
u-btn-group
u-child-contain
u-margin-inline-auto

Variable Changes

Renamed
alignment/flex to alignment/direction
align/flex-start to align/start
align/flex-center to align/center
align/flex-end to align/end

Removed
alignment/text
align/text-left
align/text-center
align/text-right
content-space/eyebrow-margin
content-space/button-margin
content-space/button-group-gap

Added
column-count/value

Component Changes

Added
Form / Checkbox
Form / Main
Form / Radio
Global / Btn Group
Global / Div
Global / Heading
Global / Paragraph
Global / Section

Removed
Starter / Heading
Starter / Paragraph

v2.0.7 - Native Variable Modes

Main Changes

• page_code_color embed removed (replaced with native modes)
• all data attributes removed (replaced with classes and components such as Global / Section Space)
• Typography modes & line height trim added
• Alignment modes added

Classes

Added
u-theme-light
u-theme-dark
u-mt-text
u-mb-text
u-margin-trim
u-alignment-vertical
u-alignment-horizontal

Removed
u-block-gap
u-block-gap-vertical
u-text-margin-none
u-margin-trim-off
u-child-contain

Attribute Changes

Removed
data-theme
data-button-style
data-padding-top
data-padding-bottom

Variable Changes

Renamed
button/ to button-style/

Removed
text-transform/inherit
all-headings/
display/
h1/
h2/
h3/
h4/
h5/
h6/
text-large/
text-main/
text-small/

Added
text-style/
button-primary/
button-secondary/
font-size/
font/primary-trim-top
font/primary-trim-bottom
align/
alignment/

Component Changes

Added
Global / Section Space

v2.0.6

Main Changes

1. Replaced adaptive sizes in responsive embed with fluid sizes instead
When users zoom in on their browsers, the site eventually reaches a new breakpoint and sizes adjust to prevent overflowing content. Normally, increasing the font size preference should behave just like browser zoom, triggering those responsive changes. However on Webflow sites, increasing the browser’s font size doesn’t activate the next breakpoint because Webflow uses PX breakpoints instead of REM. As a result, text and element sizes continue to grow and overflow without the responsive adjustments designed for smaller screens.

Using fluid sizing with clamp() can solve this issue. Since clamp() isn't based on PX breakpoints, it allows sizes to respond just like they would with browser zoom, delivering a more accessible and consistent experience.

2. Margin added to all text elements by default
This speeds up workflow by making spacing automatic and allows for globally updating spacing if we later need to increase the space below all headings, decrease the space above all buttons, or make a similar global spacing changes. The top margin is removed from all first children and the bottom margin is removed from all last children to help with conditional elements and components. That first child margin top and last child margin bottom can be enabled by applying u-margin-trim-off to any parent or by setting the margin value to !important.

3. New way to build containers
Instead of having to apply left and right padding to containers, containers now huge the edge of their content. This allows us to build certain layouts with less divs when a background color needs to be applied to the container or when elements need to be positioned absolute to the container.

Variable Changes

Renamed
--space--3 (previously --space--extra-small)
--space--5 (previously --space--small)
--space--7 (previously --space--medium)
--space--8 (previously --space--large)
--section-space folder (previously --padding-vertical folder)
--site--margin (previously --padding-horizontal--main)
--site--width (previously --max-width--main)
--site--gutter (previously --grid-gap--main)
--site--column-count (previously --column-count in base embed)

Added
--space--1 (added)
--space--2 (added)
--space--4 (added)
--space--6 (added)
--size--0.375rem (added)
--column-margin--{0 through 12} (added) (allows for offsetting elements by x columns without needing a grid parent)
--container--small (added) (max width of 10 columns or 2 less than --site--column-count)
--container--main (added) (max width of 12 columns or --site--column-count)
--container--full (added) (full width minus the size of site side margins)
--all-headings--margin-top (added)
--all-headings--margin-bottom (added)
--display--margin-top (added)
--display--margin-bottom (added)
--h1--margin-top (added)
--h1--margin-bottom (added)
--h2--margin-top (added)
--h2--margin-bottom (added)
--h3--margin-top (added)
--h3--margin-bottom (added)
--h4--margin-top (added)
--h4--margin-bottom (added)
--h5--margin-top (added)
--h5--margin-bottom (added)
--h6--margin-top (added)
--h6--margin-bottom (added)
--text-large--margin-top (added)
--text-large--margin-bottom (added)
--text-main--margin-top (added)
--text-main--margin-bottom (added)
--text-small--margin-top (added)
--text-small--margin-bottom (added)
--content-space--eyebrow-margin (added) (global bottom margin of eyebrow or subheadings)
--content-space--button-margin (added) (global top margin of buttons or actions)
--content-space--button-group-gap (added) (global space between buttons)
--focus--width (added) (focus outline width)
--focus--offset-inner (added) (outline offset when focus outline is inside of element)
--focus--offset-outer (added) (outline offset when focus outline is outside of element)

Removed
--svg-stroke-width--main (removed) (svgs use --border-width--main now by default)
--max-width--none (removed)
--font-weight-- folder (removed) (font weight numbers now supported natively)

Value Changed
--border-width--main (changed from px to rem)

Class & Attribute Changes

Renamed
u-text-style-display (previously u-text-display)
u-text-style-h1 (previously u-text-h1)
u-text-style-h2 (previously u-text-h2)
u-text-style-h3 (previously u-text-h3)
u-text-style-h4 (previously u-text-h4)
u-text-style-h5 (previously u-text-h5)
u-text-style-h6 (previously u-text-h6)
u-text-style-large (previously u-text-large)
u-text-style-main (previously u-text-main)
u-text-style-small (previously u-text-small)
u-hide-if-empty (previously data-hide-if-empty)
u-hide-if-empty-cms (previously data-hide-if-empty-cms)
u-gap-gutter (previously u-gap-main)
u-gap-{0 through 8} (previously u-gap-extra-small through large)
u-gap-row-gutter (previously u-gap-row-main)
u-gap-row-{0 through 8} (previously u-gap-row-extra-small through large)
u-min-height-screen (previously u-height-screen)

Added
u-container-full (added)
u-align-self-auto (added)
u-align-self-center (added)
u-align-self-end (added)
u-align-self-start (added)
u-align-self-stretch (added)
u-align-items-center (added)
u-align-items-end (added)
u-align-items-start (added)
u-align-items-stretch (added)
u-margin-trim-off (added) (allows for top margin on first child and bottom margin on last child)
u-text-margin-none (added) (apply to any parent to remove margin from all text children)
u-block-gap (added) (apply to div that holds a list of buttons or elements that should stack side by side and wrap)
u-block-gap-vertical (added) (removes margin from direct children and allows for vertical gap between them on a display block div)
u-child-contain (added) (apply to rich text element to set max width on children inside)
u-grid-autofill (added)
u-grid-flex (added) (works with --column-width variables allowing for grid-like layouts without using grid)
u-mt-{0 through 8} (added) (margin top classes)
u-mb-{0 through 8} (added) (margin bottom classes)

Removed
u-button-style (removed)
data-hide-rich-text-media (removed) (media automatically hidden now when u-text-style- class is applied to rich text)
u-zindex-under-nav (removed)
u-zindex-over-nav (removed)

Component Changes

Renamed
Section / Full (Previously Starter / Section Full)
Section / Simple (Previously Starter / Section Simple)

Added
Section / Hero / Placeholder (added) (Styleguide Placeholder Hero)

Removed
Starter / Page (removed) (Page Slot not allowed in components)

v2.0.5

Base embed updates:
• column-count variable added (sets 12 column global grid by default)
• column-width variables added (doesn't require a parent set to grid)
• grid-1 through grid-12 variables added (easily switch column count across breakpoints)
• Breakout grid variables added (create full-width layouts)
• Links without a class get to underline by default
• Links inside a rich text get z-index 4 so they're above Global / Clickable component
• Fixed select field's option color for windows computers
• Added custom focus outline color that matches --theme--text variable
• Added [data-hide-if-empty] attribute for hiding an element when it has no children
• Added [data-hide-if-empty-cms] to hide an element when it has no cms items
• Added [data-hide-rich-text-media] to hide images and videos inside a rich text when text is used as heading or paragraph
• Added css for global clickable component to automatically hide button tag when link url is set

Component updates:
• Added starter components to easily add commonly used elements (unlink before use)
• Added Global / Clickable component to use as a button tag or link tag
• Reorganized the Add components panel now that components can be grouped

Variable updates:
• Reorganized variables panel now that variable groups and variables can be sorted
• Added column width variables

Utility updates:
• Added border radius utilities
• Added display utilities
• Added overflow utilities
• Added z-index utilities
• Added position utilities
• Added other utilities like u-button-style, u-pointer-on, u-pointer-off, u-container-small, u-sr-only

New Class Attributes Added To Components

Component Updates
• Flex alignment, order, and max width attributes removed from base embed
• Replaced with class attributes from latest Webflow update
• "Global / Content" Component added containing eyebrow, heading, paragraph, & buttons (Align left or center)

Removed Default Styles From H1 Through H6 Tags
• Ensures that every heading gets a font size utility that can be easily renamed for global updates
• Ensures that the font size doesn't change when adjusting the tag type
• Allows for applying font size classes to a heading's parent (important for component rich text)

New Utilities Added
• u-flex-shrink, u-flex-grow, u-flex-noshrink
• u-grid-column-3
• u-column-(1 through 12)
• u-order-first, u-order-first-desktop, u-order-first-tablet
• u-order-last, u-order-last-desktop, u-order-last-tablet
• u-height-screen
• u-max-width-none
• u-visual-wrap
• u-display-none

Changed Horizontal Flex Utilities To No Wrap
Changed horizontal flex utilities to not wrap by default. This style is used more than wrapping.

Some Utilities Renamed for Better Search-ability
Example: u-display renamed to u-text-display so it's not confused with u-display-none
Search "u-text-" to see all text styles

• u-display - u-text-display
• u-h1 - u-text-h1
• u-h2 - u-text-h2
• u-h3 - u-text-h3
• u-h4 - u-text-h4
• u-h5 - u-text-h5
• u-h6 - u-text-h6
• u-text - u-text-main
• u-text-large - u-text-large
• u-text-small - u-text-small

• u-primary-regular - u-weight-regular
• u-primary-medium - u-weight-medium
• u-primary-bold - u-weight-bold
If our secondary font family also has a regular weight, it could be labeled u-weight-regular-secondary. Searching "u-weight-" shows all weights for all families.

• u-text-color-inherit - u-color-inherit
• u-text-color-faded - u-color-faded
"color" is the property name for font color in css. Excluding "text" prevents color from appearing when searching for "u-text-" sizes

Flexbox Utilities Added

Base Embed
• --font--inherit variable removed (feedback showed this was confusing and not needed)
• Added [data-cms-check="true"]:not(:has(.w-dyn-item)) that can hide section if it has no cms items
• Moved component attributes from custom embed to base embed

Custom Embed
• Moved component attributes from custom embed to base embed
• Custom embed now empty and will only hold project-specific code

New Utilities Added
• Added 16 horizontal flex utilities
• Added 16 vertical flex utilities
• Added 4 flex wrap utilities
• Added 6 gap utilities
• Added 3 grid utilities
• Added u-text-color-inherit & u-text-color-faded
• Add u-primary-regular, u-primary-medium, u-primary-bold

Class Updates
• Removed container-type: inline-size from .u-container (It disables position fixed children inside. Apply directly to the parent of fluid text instead of the whole container)

Nested Utility Classes Removed

Nested utilities removed
Lumos no longer uses utilities nested inside of another class. This technique was developed before native variables & custom css properties to overcome Webflow limitations. With recent Webflow updates, nested utilities are no longer needed.

Benefits to removing nested utilities
• All styles are now visible in the style panel (no invisible styles coming from embed)
• New utility classes can be easily added natively (instead of adding inside an embed)
• Clearer utility class names (full words instead of abbreviations)
• Typography & Layout embed completely removed
• JavaScript can target by class name since the class won't be renamed
• Grids can use values like subgrid or autofit which weren't supported with the previous utilities

Addressing Global Style Edits & Class Stacking
Going forward Lumos will use a custom class with a utility stacked on top (example: .hero_title.u-display). The stacked utility class can be renamed to switch all .hero_title elements throughout the site to a different heading style instead (.hero_title.u-h2). This enables global edits similar to the nested class approach. Overrides like changing letter spacing, line height, or anything else can be handled with native variables instead of stacking a third class. The same concept applies to containers, grid layouts, and all other parts of Lumos.

Why wasn't this grid update released when custom properties first came out?
At first there was a bug with setting grid-template-columns through custom properties that created many extra columns whenever "Show empty elements" was turned on. Since there's no way to save this setting, it would have to be turned off each time we open the project. Webflow recently fixed this bug, making custom properties a perfect solution for Webflow grids.

All Updates...

Base Embed
• "--lc1" through "--lc4" classes replaced with native "u-line-clamp-1" through "u-line-clamp-4"
• "--pe1" class removed. Use native styling.
•  "--cf1" class removed. Replaced with native "u-full"
• "--ca1" class removed. Replaced with native "u-absolute-full"
• "--gd1" classes removed.

Color Embed
• [data-button-style="outlined"] renamed to [data-button-style="secondary"]

Layout Embed
• Removed completely
• Added 5 native grid classes. "u-grid-custom, u-grid-autofit, u-grid-subgrid, u-column, u-column-full"

Responsive Embed
• Size values updated for the tablet breakpoint

Typography Embed
• Removed completely
• Added 10 native font style classes. "u-display, u-h1, u-h2, u-h3, u-h4, u-h5, u-h6, u-text, u-text-large, u-text-small"

Variables Panel
• Renamed "body" variable folder to "text"
• Renamed "paragraph-large" variable folder to "text-large"
• Renamed "paragraph-small" variable folder to "text-small"

Other Changes
• "container" class renamed to "u-container" throughout the project
• "rich-text" class renamed to "u-rich-text" throughout the project
• Example Layouts and Styleguide Pages updated to use new grid and typography utilities

Support for Webflow Custom CSS Properties

Base Embed
• Removed variables --swatch--currentcolor & --swatch--inherit from embed and variable panel (can be applied natively now)
• Moved body { overscroll-behavior: none; } to style panel
• Moved .page_wrap { overflow: clip; } to style panel
• Moved .container { container-type: inline-size; } to style panel
• Removed utility: [class*="tw1"] { text-wrap: balance; } (can be applied natively now)

Responsive Embed
• Removed CSS: --display--font-size: 5rem; (applied with adaptive size variable now)
• Added adpative size variables for 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 11, 13, 15

Typography Embed
• Moved font-weight & text-transform variables to style panel for headings & body tags