FAQs
Didn't find what you're looking for? Submit a question.
Where should custom css be added?
It's usually best to keep custom css in an embed on the page so we can see the results of the css without having to publish our site. If for some reason, we only want the css to run on the published site and not in the designer preview, we can add that css in page settings head code (if it only applies to one page) or site settings head code (if it should apply to every page of our site). For css that should run in designer preview and apply to every page of the site, we can add it inside the Lumos "Custom Code" component inside the .page_code_custom embed. This embed stores any css that's specific to our project and not part of Lumos styles. It should never contain javascript. For css that only applies to a certain section or component, we can store it inside an embed inside that component. It's recommended to make the embed inside of the section component be its own component as well. That way if we ever need to unlink the section component to change cms filtering or something inside, the code embed inside that section is still its own component that can be updated globally. "Styles / Starter" is an example css embed component that could be added inside another component. Be sure to unlink that "Styles / Starter" component before adding your own code.
Where should custom javascript be added?
Custom javascript that applies to every page of the site should go in site settings footer code. Especially cdn links like gsap, swiper, or lenis should go there so that every page has access to them. If the javascript only applies to a specific component type, it should be stored in an embed inside that component. It's recommended to make the embed its own component as well in case the main component ever needs to be unlinked, the code component can still be updated globally. Here's an example of the code that should be used when adding javascript inside an embed on the page.
There's a "Script / Starter" component in Lumos with this example code. Be sure to unlink that "Script / Starter" component before adding your own code.
Why not use the Figma to Webflow Plugin to copy sections from Figma and have them automatically built out in Webflow?
The Lumos Framework recommends against this. Figma is a design tool, not a development tool. Because of that, it's missing the majoriy of the properties and features needed to making a functional website. Things like grid, aspect ratio, aria labels, and many others can't be supported in Figma. As a result, it usually creates sections that aren't setup in the best way for responsiveness, accessibility, or scaleability.
What about websites that weren't designed with a strong design system in mind?
Lumos can work with nearly any type of design, but the more consistent a design is the easier it will be to build with Lumos. When a design is really inconsistent, it can be helpful to chat with the designer and give some recommendations for cleanup that can be done in development. Some helpful things to consider when designing a site to build with Lumos...
• Design on a consistent grid like a 12 column or 10 column grid • Plan what each element will look like in light theme, dark theme, and any other needed themes • Plan for a couple different vertical section spacing values • Use the Lumos Figma FIle for an even easier design flow
How can I update from a previous version of Lumos to the latest version of Lumos?
Unfortunately, there's no way to automatically update to the latest version. Once a project is started, updating everything can be very time consuming because classes and attributes are already in use throughout the project and it's a manual process to replace every instance of an older class in each section and checking to ensure the layout still works with the new styles. However, we can use the Lumos Changelog to compare differences between any two versions. If there are new classes added, those classes can be copied from a current cloneable into the existing project.
How to add Lumos into an existing project?
Use the CutCopy App for Webflow to copy all variables from the Lumos Webflow Cloneable https://webflow.partnerlinks.io/cutcopyapp
Within the cloneable's styleguide page, copy the .page_wrap div and paste it into your existing project
When pasting the .page_wrap into a project, Webflow unlinks any components that we paste over. Also, any values in the style panel that were set to variables get replaced with static values instead. So components must be recreated manually and static values in classes need to be replaced with variables.
Are IDs auto generated on Lumos Grids?
No, Webflow only auto-generates IDs on children when the parent's base class has display: grid applied. Stacking a grid utility on top of a component class prevents Webflow from auto-generating IDs. When setting grid-column & grid-row through custom properties, it's completely tied to the class name of the element, not an ID.
Why does Lumos prefer flex gap over margin?
Flex gap works better when we have conditional elements within a component. When one element is hidden, the space between the two elements is automatically removed. Margin can be unpredictable especially since used inside a flexbox parent margins don't collapse into each other.
Why apply padding to the container instead of to the section?
Ease of use. Having spacing applied on the container allows us to easily create more complex layouts without having to adjust as many elements. For instance, we could set the container to a min-height: 100svh and a vertical flex with space-between to distribute the content inside our container across the browser height. By keeping the top and bottom padding inside the container, the padding will be included within the 100svh container height.
Applying left and right padding to the section (outside of the container's max width) can prevent us from being able to build certain complex layouts. In that the case, the container also doesn't reach its full width until our screen size is the width of the container plus the width of the horizontal section paddings. By keeping the padding inside the container, the container always reaches full width when its max-width matches the screen width.
Why aren't my videos showing up when I add the src attribute to the custom element with a tag of video or on the Global / Visual component?
Ensure that you have a direct link to the video from something like an AWS account or paid Vimeo account. Regular YouTube or Vimeo links to the video inside a player will not work.
When testing on a phone, ensure that your phone isn't in low power mode since the device will automatially disable all autoplaying videos in that case.
How to add an SVG?
The SVG Import App for Webflow can help us quickly import svgs.
For outlined svgs, set the following attributes on the svg paths to link the stroke width to a variable and to keep the stroke width consistent regardless of the svg size. stroke-width="var(--svg-stroke-width--main)" vector-effect="non-scaling-stroke"
Why are there periods in the variable folder names?
Variable folders are sorted alphabetically. Lumos adds extra periods in front of the variable folder names to move certain folders higher in the list. These periods do not get rendered in the css when Webflow creates the variable name. For instance, all color related variable folders start with three periods in Lumos so they appear at the very top of the list. ...button/background General size related variable folders start with two periods so they appear in the middle of the list ..max-width/main Typography related variable folders start with one period so they appear at the end of the list in the variable panel .h1/font-size
https://www.youtube.com/shorts/PQUEWV2wTqQ
Why doesn't Lumos use text-wrap: balance?
Currently text-wrap is not supported in Safari or Firebox. Because of this, Lumos recommends applying a max-width using the CH unit to text for setting the ideal line wrap. For the "Global / Heading" and "Global / Paragraph" component, max width is even a component field so that it's not connected to class name and can be adjusted based on the length of content inside any component instance.
Last updated