Drop-in CSS stylesheet for quick styling based on modern CSS features and optional components.

Spacing and margin

Spacing utilities use a base unit of 0.25rem (4px), scaled by a multiplier from 1 to 16. On screens ≤768px, the base unit shrinks to 0.2rem for tighter layouts.

Spacing scale

All spacing utilities share the same scale from 0 to 16.

--spacing-1:  0.25rem   (4px)
--spacing-2:  0.5rem    (8px)
--spacing-3:  0.75rem   (12px)
--spacing-4:  1rem      (16px)
--spacing-5:  1.25rem   (20px)
--spacing-6:  1.5rem    (24px)
--spacing-7:  1.75rem   (28px)
--spacing-8:  2rem      (32px)
--spacing-9:  2.25rem   (36px)
--spacing-10: 2.5rem    (40px)
--spacing-11: 2.75rem   (44px)
--spacing-12: 3rem      (48px)
--spacing-13: 3.25rem   (52px)
--spacing-14: 3.5rem    (56px)
--spacing-15: 3.75rem   (60px)
--spacing-16: 4rem      (64px)

Margin

Use m- classes to add margin on all sides, or directional variants for specific sides.

<div class="m-4">All sides</div>
<div class="mx-4">Inline (left + right)</div>
<div class="my-4">Block (top + bottom)</div>
<div class="mt-4">Top</div>
<div class="mb-4">Bottom</div>
<div class="ml-4">Left</div>
<div class="mr-4">Right</div>

Available classes for each direction:

Auto margins

Use auto margin utilities for centering or pushing elements.

<div class="mx-auto">Centered horizontally</div>
<div class="my-auto">Centered vertically</div>
<div class="ml-auto">Pushed to the right</div>
<div class="mr-auto">Pushed to the left</div>
<div class="mt-auto">Pushed to the bottom</div>
<div class="mb-auto">Pushed to the top</div>

Padding

Use p- classes to add padding. Same scale and directional variants as margin.

<div class="p-4">All sides</div>
<div class="px-4">Inline (left + right)</div>
<div class="py-4">Block (top + bottom)</div>
<div class="pt-4">Top</div>
<div class="pb-4">Bottom</div>
<div class="pl-4">Left</div>
<div class="pr-4">Right</div>