First Published On:
April 23, 2024
Last Updated:
April 26, 2024


Figure 1. Animation demonstrating state layer implementation.

No items found.

What is LiftKit?

LiftKit is a universal design system, meaning it's a set of rules to be applied for any interface regardless of the platform you're building with. While it may be built in CSS, its design principles are as old as time. The hallmarks of LiftKit, such as golden ratio-based scaling, perceptually-accurate color, and optical kerning, are all tried-and-true design techniques employed by all good design systems, in one way or another. What's unique about a design system is merely how it combines, applies, and adapts these well-established rules and practices.

Perfectly Balanced

In LiftKit, everything is scaled proportionally to everything else. This results in uniquely satisfying-feeling layouts where information hierarchy is incredibly clear. This makes LiftKit the ideal solution for text-heavy or information-dense layouts such as technical documentation, academic databases, or UI's for complicated applications.

Built-in Beauty

Beauty is subjective, but there are certain qualities humans seem to find inherently pleasing. Kurtzgesagt made a great video about it. LiftKit bakes in these rules so that you don't have to think about them, but they're not so overwhelming that it limits your creativity. In that respect, LiftKit makes it hard to look bad, but it's still up to you to look good.

Easy to Learn

LiftKit is like a more verbose alternative to Tailwind with fewer bells and whistles. There's simply fewer classes to learn, and the class names are easier to remember. I think they are, anyway.

By combining BEM (block-element-modifier) and utility-class logic, LiftKit's naming conventions give developers an intuitive way to build that's easy to read and review.

Improved Developer Experience

LiftKit makes development easier both for you, the developer, and the other people who might have to read your code. With a gentler learning curve, collaborators will have an easier time reading LiftKit CSS because it assumes no prior exposure to the system.

How to Read These Docs

This documentation is broken down into 3 sections: Foundations, Utility Classes, and Component Classes. Here is a brief description of what each section entails.


Foundations covers LiftKit's top-level guiding principles. It was designed to be read in order, meaning the order you see in the sidebar is the order in which you should read them.

Utility Classes

In CSS, utility classes are classes that are designed to do one specific thing or apply one specific style. They are usually named based on what they do, making it easier to understand their purpose.

Here’s an example: Let’s say you have a website and you want to make some text bold. Instead of creating a new class like .bold-text in your CSS file and applying it to each element where you want bold text, you could create a utility class called something like .bold that you can use whenever you need to make text bold.

So, your CSS might look like this:

cssCopy code

.bold {
 font-weight: bold;

And then in your HTML, you can simply add the class bold to any element where you want the text to be bold:

<p class="bold">This text is bold.</p>

Utility classes are handy because they help keep your CSS code organized and make it easier to apply styles consistently across your website. They’re especially useful for repetitive styles that you might use frequently, like text alignment, colors, margins, padding, and more.

Component Classes

Component classes are the special classes used for LiftKit's few components. They follow a loose version of BEM naming conventions.

BEM stands for Block, Element, Modifier. It's a naming convention for CSS classes that helps create more structured and maintainable code, especially for larger projects.

  1. Block: A block is a standalone component that has meaning on its own. It could be a header, navigation menu, sidebar, etc. Blocks are typically named with a single word in lowercase, separated by a hyphen (-).
  2. Element: An element is a part of a block that performs a particular function. Elements are always tied to a specific block and are represented by two words separated by two underscores (__).
  3. Modifier: A modifier is a variant or state of a block or an element. It alters the appearance or behavior without changing the base structure. Modifiers are represented by two words separated by a single underscore (_), and they are always tied to a specific block or element.

Here’s an example using BEM:

Let's say you have a card component containing a title and a button.

htmlCopy code

<div class="card">
 <h2 class="card__title">Card Title</h2>
 <button class="card__button card__button--primary">Click Me</button>

In this example:

  • .card is the block.
  • .card__title is an element of the block .card.
  • .card__button is also an element of the block .card.
  • .card__button--primary is a modifier of the element .card__button.

Your CSS might look like this:

cssCopy code

.card {
 /* Styles for the card block */

.card__title {
 /* Styles for the title element */

.card__button {
 /* Styles for the button element */

.card__button--primary {
 /* Styles for the primary button modifier */

BEM helps keep your CSS organized, predictable, and easier to maintain, especially in larger projects where naming conventions become crucial.

Recommended Usage


Resources that mention this topic

No items found.