Containers

First Published On:
April 21, 2024
Last Updated:
April 29, 2024

Summary

Figure 1. Animation demonstrating state layer implementation.

No items found.

Containers control the maximum width of your body content, and they ensure responsiveness. They center automatically, and The default container has a maximum width of 1600px, and it auto-centers.

Placement

Containers should always be placed inside sections.

Scaling

The default container is 1600px wide. Like nearly everything else in LiftKit, they scale up and down by factors of golden ratio coefficients.

The widths of each container type are as follows:

  • .container__narrowest is 1600px / 1.618
  • .container__narrow is 1600px / 1.272
  • .container__default is 1600px
  • .container__wide 1600 * 1.272
  • .container__widest is the full width of the available viewport. Padding is set on the parent section.

Special Classes

.container__80ch is used for long-form text content, like news articles, blog posts, or documentation. It's the container type holding the text you're reading right now.

"80ch" means "80 characters." It means your container will have a maximum width of 80 characters long.

Why 80 characters?

Paragraph width effects reading comprehension. This has been studied and documented for over 100 years. If a paragraph is too wide, the eye gets lost as it's reading. If it's too short, you get a similar problem.

The "golden standard" for ages has been that the optimal line length should be between 50 and 70 characters long. However, you don't see strict adherence to that rule in the real world. UX thought leader Smashing Magazine found in a survey of popular blogs that the most common width (~34% of those surveyed) was actually between 85 and 90 characters. The others used a range from as low as 50 characters to as high as 120.

Chainlift decided to simply set the max character width at 80 because it seemed visually agreeable with our type system, but you can modify it if you like.

Recommended Usage

For the majority of use cases, use .container__default. It's the optimal width for displaying content on very large screens, as it prevents important content from sticking to the edges of the screen.

You can put multiple containers in a single section. This is good for when you have bundles of content that are still related to the same section.

Customization

To customize your containers, it's recommended you follow the general guidelines for scaling.

Resources that mention this topic