LiftKit Overview

"How do I actually USE LiftKit?"

Get the whole library via GitHub

1. Clone the github repo
2. Copy-paste the /css folder into the root of your project (rename it if you need to)
3. Import the "index.css" file into wherever your project's global CSS is defined
4. That should work. If it doesn't, please scroll to the bottom of this page and submit a feedback form to let me know.

Copy Class Names As Needed

If you're using CSS modules you might want to just copy and paste specific rules as needed. To do that:

1. Click on a page with code snippets (such as Margins)
2. Click the floating, pink "Copy" button in the top-right (on top of the code samples)
3. Paste into your code

Clone the Webflow Kit

1. Visit the LiftKit cloneable on Made In Webflow
2. Click "Clone in Webflow"

LiftKit vs LiftKit CSS

LiftKit is the golden framework for visual design. It's the set of rules that power beautiful layouts.

LiftKit CSS is a CSS system that follows those rules.

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.

What's Different about LiftKit?

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. If you disagree, let me know!

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: 

1. Theme Setup
2. Building a Layout
3. Arranging Content
4. Styling Elements

Foundations

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:

.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

Sometimes, stacking LiftKit classes gets too cumbersome. That's when I recommend switching to component classes in a pinch. Component class syntax in LiftKit should 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.

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

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:

.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.