LiftKit Overview
Figure 1. Animation demonstrating state layer implementation.
Installation
npm
To use this method you must have Node.js and npm installed on your machine. Follow these instructions if you don't.
Open a terminal inside your project's root directory and enter this command:
npm i @chainlift/liftkit-cssThen, import the styles into your program. Assuming you're using a JS framework like React or Vue, the import statement should look like this:
import liftkit from "@chainlift/liftkit-css";Note that "liftkit" is not in curly braces. That's because these are just vanilla CSS files. The entry point to the module is index.css, so when you call import liftkit it's essentially saying "make everything in @chainlift/liftkit-css/index.css available to the file I'm currently working in."
You don't have to import it as liftkit, either. It's not a named export. You could write this and it would work just as well:
/**
* LiftKit isn't a named export, so you can import it as whatever name you like.
* Each of the imports below should work just fine.
*/
import liftkit from "@chainlift/liftkit-css";
// or
import styles from "@chainlift/liftkit-css";
// or
import thatOneCompanyWithTheRollerCoasterThatOneThatFramework from "@chainlift/liftkit-css"GitHub
Clone the Repository
You can clone the GitHub Repository by visiting the public github page. If you're new to github, I strongly recommend using GitHub Desktop to facilitate this process, as working with the CLI can be challenging. Learn more about GitHub Desktop.
Download the Latest Release
If you want the source code directly you can just download the latest releases here.
Webflow
- Clone in Webflow
- To use in a project, avoid copy-pasting into existing projects. Instead, duplicate the template and build your new project on top of it.
Copy Code Snippets As Needed
You can always copy code snippets for specific utility classes right here in the docs. The panel on the right will display available code for the page being viewed, when applicable. Simply click the big pink "Copy" button to copy the code to your clipboard.
Figma
Currently under construction. Sign up to be notified when it's ready. Here's proof it's still happening:
Usage
Using LiftKit is very simple. You simply apply the class names as needed to elements.
Vanilla HTML
In Vanilla HTML, you import your stylesheet at the top of the document and reference it like so:
<!DOCTYPE >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Import Example</title>
<link rel="stylesheet" href="css/index.css"> <!-- Assign href to the relative path of the liftkit index.css file -->
</head>
<body>
<header class="section__leastPadding">
<h1 class="title1__bold">Welcome to My Website</h1>
</header>
<main>
<section class="section__default">
<div class="container__default">
<p class="body">This is an example paragraph demonstrating the use of CSS classes.</p>
</div>
</section>
</main>
<footer class="section__leastPadding">
<section class="section__default">
<div class="container__default">
<p class="caption">Footer content goes here.</p>
</div>
</section>
</footer>
</body>
</html>
React
In React, you simply import the module at the top of any module as mentioned in "Installation" and then assign styles to elements normally.
Note: Use className instead of class when styling elements in JSX.
import React from 'react';
import liftkit from "@chainlift/liftkit-css";
function App() {
return (
<div className="section__default">
<header className="container__narrow">
<h1 className="display1__bold">Welcome to My React App</h1>
</header>
<main>
<p>This is a paragraph styled with global CSS.</p>
</main>
</div>
);
}
export default App;Next.js
App Router
If you're using the app router, it works just like it does in vanilla React. You can import the module wherever you want.
Pages Router
If you're using the pages router, you need to import it in pages/_app.js. Learn more.
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:
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.
- 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 (
-). - 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 (
__). - 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:
.cardis the block..card__titleis an element of the block.card..card__buttonis also an element of the block.card..card__button--primaryis 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.