Formatting utilities allow for a wide range of styling adjustments pertaining to dimensions, alignment, and more.

Gap Classes

These classes are used to set the gap property for an element, ranging from .gap-0 (no gap) to .gap-6 (2em gap).

Class Name Description CSS Code
.gap-0 No gap gap: 0;
.gap-1 0.25em gap gap: 0.25em;
.gap-2 0.5em gap gap: 0.5em;
.gap-3 0.75em gap gap: 0.75em;
.gap-4 1em gap gap: 1em;
.gap-5 1.5em gap gap: 1.5em;
.gap-6 2em gap gap: 2em;

Width and Height Classes

These classes define specific width and height for elements, ranging from 0px to 350px, incremented by 5px.

Class Name Description CSS Code
.w-5 Width: 5px Width: 5px;
.h-5 Height: 5px Height: 5px;
-- -- --
.w-350 Width: 350px Width: 350px;
.h-350 Height: 350px Height: 350px;

Directional Modifiers

These classes adjust the position of an element in specific directions.

Class Name Description CSS Code
.up-1 Move up 1px top: -1px;
.down-1 Move down 1px top: 1px;
.left-1 Move left 1px left: -1px;
.right-1 Move right 1px right: -1px;
.up-2 Move up 2px top: -2px;
.down-2 Move down 2px top: 2px;
.left-2 Move left 2px left: -2px;
.right-2 Move right 2px right: -2px;
.up-3 Move up 3px top: -3px;
.down-3 Move down 3px top: 3px;
.left-3 Move left 3px left: -3px;
.right-3 Move right 3px right: -3px;
.up-4 Move up 4px top: -4px;
.down-4 Move down 4px top: 4px;
.left-4 Move left 4px left: -4px;
.right-4 Move right 4px right: -4px;
.up-5 Move up 5px top: -5px;
.down-5 Move down 5px top: 5px;
.left-5 Move left 5px left: -5px;
.right-5 Move right 5px right: -5px;
.up-6 Move up 6px top: -6px;
.down-6 Move down 6px top: 6px;
.left-6 Move left 6px left: -6px;
.right-6 Move right 6px right: -6px;
.up-7 Move up 7px top: -7px;
.down-7 Move down 7px top: 7px;
.left-7 Move left 7px left: -7px;
.right-7 Move right 7px right: -7px;
.up-8 Move up 8px top: -8px;
.down-8 Move down 8px top: 8px;
.left-8 Move left 8px left: -8px;
.right-8 Move right 8px right: -8px;
.up-9 Move up 9px top: -9px;
.down-9 Move down 9px top: 9px;
.left-9 Move left 9px left: -9px;
.right-9 Move right 9px right: -9px;
.up-10 Move up 10px top: -10px;
.down-10 Move down 10px top: 10px;
.left-10 Move left 10px left: -10px;
.right-10 Move right 10px right: -10px;
.up-20 Move up 20px top: -20px;
.down-20 Move down 20px top: 20px;
.left-20 Move left 20px left: -20px;
.right-20 Move right 20px right: -20px;
.up-30 Move up 30px top: -30px;
.down-30 Move down 30px top: 30px;
.left-30 Move left 30px left: -30px;
.right-30 Move right 30px right: -30px;
.up-40 Move up 40px top: -40px;
.down-40 Move down 40px top: 40px;
.left-40 Move left 40px left: -40px;
.right-40 Move right 40px right: -40px;
.up-50 Move up 50px top: -50px;
.down-50 Move down 50px top: 50px;
.left-50 Move left 50px left: -50px;
.right-50 Move right 50px right: -50px;
.up-60 Move up 60px top: -60px;
.down-60 Move down 60px top: 60px;
.left-60 Move left 60px left: -60px;
.right-60 Move right 60px right: -60px;
.up-70 Move up 70px top: -70px;
.down-70 Move down 70px top: 70px;
.left-70 Move left 70px left: -70px;
.right-70 Move right 70px right: -70px;
.up-80 Move up 80px top: -80px;
.down-80 Move down 80px top: 80px;
.left-80 Move left 80px left: -80px;
.right-80 Move right 80px right: -80px;
.up-90 Move up 90px top: -90px;
.down-90 Move down 90px top: 90px;
.left-90 Move left 90px left: -90px;
.right-90 Move right 90px right: -90px;
.up-100 Move up 100px top: -100px;
.down-100 Move down 100px top: 100px;
.left-100 Move left 100px left: -100px;
.right-100 Move right 100px right: -100px;

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.