Scale
LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.
Choose a Starter Kit
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Quickstart
Get a feel for LiftKit by following along with this short tutorial.
Figure 1. Animation demonstrating state layer implementation.
Overview
Scaling is a way to make the appearance of an element larger or smaller. It does not change its actual size. A 24x24 pixel square div with .scaleUp__wholestep applied will still be 24x24 pixels, but it will look like it's 1.618 times larger.
Usually only recommended to use in a pinch as a combo class for when you're trying to get icons to behave. You normally want them to scale up and down by changing their font size, but sometimes it doesn't listen, and it's helpful for MVP's to just cheat. Don't tell anyone I said that was okay.
.scaleUp__wholestep {
transform: scale(var(--wholestep));
}
.scaleUp__halfstep {
transform: scale(var(--halfstep));
}
.scaleUp__quarterstep {
transform: scale(var(--quarterstep));
}
.scaleDown__wholestep {
transform: scale(calc(1 / var(--wholestep)));
}
.scaleDown__halfstep {
transform: scale(calc(1 / var(--halfstep)));
}
.scaleDown__quarterstep {
transform: scale(calc(1 / var(--quarterstep)));
}