Struggling to find the perfect home? Explore Movely services that can help you!
Everything that you dreamed of can be brought to life exactly at the moment when you decide to move
- **`xs`** → `--space-xs` = `0.5rem` (≈ 8px)
- **`sm`** → `--space-sm` = `0.625rem` (≈ 10px)
- **`s`** → `--space-s` = `0.75rem` (≈ 12px)
- **`m`** → `--space-m` = `1rem` (≈ 16px, базовый)
- **`md`** → `--space-md` = `1.25rem` (≈ 20px)
- **`l`** → `--space-l` = `1.5rem` (≈ 24px)
- **`xl`** → `--space-xl` = `2rem` (≈ 32px)
- **`2xl`** → `--space-2xl` = `3rem` (≈ 48px)
- **`3xl`** → `--space-3xl` = `4rem` (≈ 64px)
- **`4xl`** → `--space-4xl` = `5rem` (≈ 80px)
- **`huge`** → `--space-huge` = `3.75rem` (≈ 60px, спец‑размер)
- **`giant`** → `--space-giant` = `6.25rem` (≈ 100px, максимум)
#### 3.1. Margin (десктоп)
- `mt-*` — `margin-top`
- `mb-*` — `margin-bottom`
- `mv-*` — вертикальный margin (top + bottom)
#### 3.2. Margin (мобильный)
Те же, но с префиксом `m-`:
- `m-mt-*`, `m-mb-*`, `m-mv-*`
#### 3.3. Padding (десктоп)
- `p-*` — padding со всех сторон
- `pv-*` — padding по вертикали (top + bottom)
- `ph-*` — padding по горизонтали (left + right)
- `pt-*` — `padding-top`
- `pb-*` — `padding-bottom`
- `pl-*` — `padding-left`
- `pr-*` — `padding-right`
Аналогично, но с `m-`:
- `m-p-*`, `m-pv-*`, `m-ph-*`, `m-pt-*`, `m-pb-*`, `m-pl-*`, `m-pr-*`
#### 3.5. Gap
- `gap-*` — `gap` между элементами (flex/grid), базовое значение.
- `m-gap-*` — `gap` только на мобилках.
- `fl-l` — `display: flex; justify-content: flex-start;`
- `fl-c` — `display: flex; justify-content: center;`
- `fl-r` — `display: flex; justify-content: flex-end;`
- `fl-m` — центр и по горизонтали, и по вертикали (`justify-content: center; align-items: center;`)
- `fl-btwn` — `justify-content: space-between;`
- `fl-w` — `flex-wrap: wrap;`
- `ta-l` — `text-align: left;`
- `ta-c` — `text-align: center;`
- `ta-r` — `text-align: right;`
- `m-ta-l`, `m-ta-c`, `m-ta-r`
