Formatting
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.