Scaling System

First Published On:
April 23, 2024
Last Updated:
May 4, 2024


Figure 1. Animation demonstrating state layer implementation.

No items found.

Size and spacing in LiftKit are defined in terms of em, which is possible due to the <body> element’s font size of 1rem. In other words, every measurement that has to do with size is defined in terms of the root font size.

If you aren’t familiar with em’s and rem’s, check out the following video. It contains a thorough, detailed explanation of how these units work.

The scaling system is also defined around the golden ratio, making LiftKit the golden framework. However, knowledge of how that works is not necessary in order to use the system, so it won’t be explained here.

Recommended Usage

When making a property greater or lesser, do it with the scaling steps.

Let’s start with a simple example: a <div> block measuring 1em high and 1em wide.

To increase its width, we multiply by an increment.

To decrease the width, we divide by an increment.


Resources that mention this topic