Layout Overview
LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.
Choose a Starter Kit
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Quickstart
Get a feel for LiftKit by following along with this short tutorial.
Figure 1. Animation demonstrating state layer implementation.
Overview
Layout refers to the arrangement of elements on a page. In this section, we'll learn about layout by walking through building this example blog page using the default LiftKit theme.
We’ll start with a blank screen. Assume there’s boilerplate HTML in there that renders a blank page.
Next, let’s drop in a section.
Sections set padding, but they don’t control content width.
So if you don’t set some kind of max-width control, things may look too far apart on large screens.
That's why we use containers. Containers control content width.
Nesting our content in a container ensures it doesn’t get too wide. If you need full screen, though, you can always get it with .container__widest.
Layout within the container is controlled case-by-case. You can use grids, flex boxes, or simple blocks.
Returning to our example, you can see how the structure of the page looks when we overlay the annotations.
