• Docs
Exe.Eyes
Command Palette
Search for a command to run...
Getting started
  • Introduction
  • Core philosophy
  • Installation
  • Page structure
  • Code architecture
Tokens
  • Overview
  • Primitive tokens
  • Semantic tokens
Typography
  • Type scale
  • Text style variable mode
  • Conventional vs. unconventional
Classes
  • Naming convention
  • Spacing classes
  • Layout classes
  • Typography classes
Starter kits
  • Overview
Classes

Spacing classes

Spacing utilities cover padding, margin, and gap. All values map to the fluid spacing scale, no hardcoded pixel values.

Padding

classproperty
u-p-{1-8} padding
u-px-{1-8} padding-inline
u-py-{1-8} padding-block
u-pt-{1-8} padding-top
u-pb-{1-8} padding-bottom
u-pl-{1-8} padding-left
u-pr-{1-8} padding-right

Margin

classproperty
u-m-{1-8} margin
u-mx-{1-8} margin-inline
u-my-{1-8} margin-block
u-mt-{1-8} margin-top
u-mb-{1-8} margin-bottom
u-ml-{1-8} margin-left
u-mr-{1-8} margin-right

Gap

classproperty
u-gap-{1-8} gap
u-gap-row-{1-8} row-gap

When both are applied, u-gap-{n} sets the base gap for both axes and u-gap-row-{n} overrides the row gap only.

Section spacing

For vertical section padding, use the section spacing tokens instead of the base scale.

classproperty
u-py-section-sm padding-block: section-sm
u-py-section-base padding-block: section-base
u-py-section-lg padding-block: section-lg
u-py-section-page-top padding-block: section-page-top
Naming convention
Layout classes