Figure 1. Animation demonstrating state layer implementation.
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-css
Then, 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"
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.
If you want the source code directly you can just download the latest releases here.
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.
Currently under construction. Sign up to be notified when it's ready. Here's proof it's still happening:
Using LiftKit is very simple. You simply apply the class names as needed to elements.
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>
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;
If you're using the app router, it works just like it does in vanilla React. You can import the module wherever you want.
If you're using the pages router, you need to import it in pages/_app.js
. Learn more.
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.
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.
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.
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!
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.
This documentation is broken down into 3 sections:
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.
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.
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.
-
).__
)._
), 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.