Lattice Web System
Overview of all the elements, styles and components that make our websites, and how to use them to create beautiful, consistent and scalable experiences.
Attributes are used for minor, unique, one-off style changes: adding a margin, hiding on tablet, limiting max, character count... Attributes can be applied to any selected elements in the Element Settings panel [D].
Variables are global, site-wide parameters used to style core parameters in a consistent and scalable way: color swatches, margins, shadows, border radius, transitions... Variables are managed in the Variables panel [V].
Base HTML tags are used to customize the default styles of core elements site-wide: headings, paragraphs, rich texts, images... You can find the full list of styled tags in the Style Manager panel [G].
Classes are used to style everything in a scalable and consistent way. We use the main class to define global rules and use combo classes to cover specific usecases, following this pattern: Main Class is Combo.
Components are reusable layouts and elements such as the nav and the footer. Modifying a component in one place will modify all of its instances everywhere, but they can also be uniquely customized using component properties.
CMS elements are connected to our CMS collections and are dynamic. To edit CMS content, click on the CMS icon on the left sidebar, navigate to your collection and item, and publish your changes.