This page is a simplified version of the rest of the docs to make it less technical and easier to grasp. If you need more information on any of the topics discussed in here feel free to reference other pages in the docs but hopefully this will get you up and running in Build Mode so you can start building out new pages and making updates to your site.
<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" />
If you’re an experienced developer feel free to jump ahead to Class Naming
</aside>
Lumos is built using three core systems, each of which are interlinked, this guide will hopefully help you to understand what these three systems are, and what their role is in your website. The systems are:
Variables are what keeps your site consistent, and allows you to make changes across your entire site if you need to change something like a font style, color, or even your sites max width.
Generally you won’t need to modify variables when you are editing your site on a day to day basis but if you do go through a rebrand or need to make a minor design change (like update your h6 font style from medium to bold) this is where you are going to make that change.
To learn more about variables check out Variables , or learn how Color and Typography variables are setup on those pages.
These are the core building blocks of your site, with these components you can build out fully new pages, or easily go back into existing ones and re-order sections, change content, and even have some design controls like modifying a sections color theme or padding.
Components allow you to maintain a consistent, efficient, and scalable website by creating customizable blocks from elements and child elements. Reuse those blocks across your site, and modify them in a single place to avoid individually revising each recurring layout. Throughout Lumos components are used for everything (from typography elements like headings to your global Navbar and footer).
Every section is built out of a series of components, starting with basic elements like typography, buttons, and image components, and then wrapping those in layout components, and finally a section component. Depending on how your developer built your site you may primarily be using Open or Closed components (this will be explained in more detail below).
<aside> <img src="/icons/cursor-click_gray.svg" alt="/icons/cursor-click_gray.svg" width="40px" />
To view all the components in the default Lumos styleguide click here Note: Your developer most likely added more components to your site but these are the core building blocks that they were created with.
</aside>
Component properties let you modify specific aspects within a component instance like text content, an image, or even a layout or color theme. If a component has a lot of different properties they will be sorted by what aspect of the component they are updating eg (Styles, Heading, Paragraph, Image etc) To edit a content property (eg a heading or image) you should: