Containers
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;
}
