Containers
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
Containers are <div> blocks put inside of Sections to control max-width. There are 5 of them, and their values are using pixels on purpose.
Logic
LiftKit doesn’t use multiple desktop breakpoints, there’s just “desktop,” so instead of designing for different breakpoints you can design for different container widths instead.
Since breakpoints are always talked about in terms of pixels, that’s how we measure containers.
The values are still derived using golden operations. If 1600 is the base (based on 16px * 100, where 16px is the most common value of 1rem), then 1804px is 1600 times a quarterstep, 1257 is 1600 divided by a quarterstep, and so on.
.container__widest has its max-width capped by the horizontal padding on its enclosing section, so it never runs truly end-to-end without being overridden.
Making custom container classes
When you need a custom container width, just make a new class with the template .container__[customMeasurement] where [customMeasurement] is equal to the max-width value you’re setting on it.
Here’s an example of a custom container class I use a lot.
.container__xs {
margin-left: auto;
margin-right: auto;
max-width: 988.875px;
}
.container__sm {
margin-left: auto;
margin-right: auto;
max-width: 1257px;
}
.container__md {
margin-left: auto;
margin-right: auto;
max-width: 1600px;
}
.container__lg {
margin-left: auto;
margin-right: auto;
max-width: 1806.4px;
}
.container__xl {
margin-left: auto;
margin-right: auto;
max-width: none;
}
.max-w-container-80ch {
margin-left: auto;
margin-right: auto;
max-width: 80ch;
}