Lumos is a cutting-edge framework for building Webflow sites. It's designed with efficiency, scaleability, and accessibility at its core.
It's unique approach to class naming, components, layout, & responsiveness brings together all of the modern best-practices of web development in a way that is specific to Webflow.
This guide will help you get up and running with the latest version of Lumos. The framework is always evolving to refine it’s systems and make them more scalable so it’s good to stay up to date with the latest updates in the changelog where you can also find older versions of the docs if your site was built on a older version of Lumos.
<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" />
Feel free to duplicate this entire documentation site in Notion and save it whenever you start a new Webflow site and clone the Starter file. In your duplicated docs, document any project-specific classes, variables, or components you add as a reference for yourself, the client, and future developers.
</aside>
On the homepage you’ll find pages for each core element of the Lumos framework
Learning lumos will require a solid understanding of how Webflow works, along with the underlying HTML, CSS and Javascript. These concepts aren’t covered in the docs but are an important foundation for learning how to develop high quality Webflow sites. If you’re still getting started with Webflow we’d recommend beginning with Webflow University and more beginner friendly tutorials on YouTube and then diving into Lumos to really hone your skills.
<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" />
Note: If you are a client or marketer that doesn’t need to understand the entire system but needs to be able to update content on your site and build pages in Build Mode start by reading the Client-Guide — this will get you up and running and you can refer to the other docs as needed.
</aside>