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. "Starter / CSS" is an example css embed component that could be added inside another component. Be sure to unlink that "Starter / CSS" 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 section component. If the section component ever needs to be unlinked, the embed should first be turned into its own component so it can still be updated globally.
There's a "Starter / JS" component in Lumos with this example code. Be sure to unlink that "Starter / JS" 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 majority 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 that was not created with Lumos?
Webflow's libraries feature makes it easy to import components, variables, and classes. Watch this video to learn how. https://www.youtube.com/watch?v=GF6731jtcQ4
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 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"
Last updated