ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
# Grid
|
||
|
||
Grid rules for marketing sections, card layouts, and footers. Grids always live **inside** `<Container>`.
|
||
|
||
## Defaults
|
||
|
||
| Concern | Standard |
|
||
| --- | --- |
|
||
| Framework | Tailwind CSS Grid / Flexbox |
|
||
| Gap scale | Spacing tokens only (`gap-4`, `gap-6`, `gap-8`, `gap-10` …) — see [spacing.md](./spacing.md) |
|
||
| Columns | Mobile-first: 1 → 2 → 3/4 as viewport grows |
|
||
| Alignment | Start-aligned in RTL; use logical properties (`ms-`, `me-`, `ps-`, `pe-`) when offsetting |
|
||
|
||
## Common patterns
|
||
|
||
### Two-column feature / split
|
||
|
||
```tsx
|
||
<div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16">
|
||
<div>…copy…</div>
|
||
<div>…media…</div>
|
||
</div>
|
||
```
|
||
|
||
### Card grid (services / posts)
|
||
|
||
```tsx
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{items.map(…)}
|
||
</div>
|
||
```
|
||
|
||
### Footer link columns
|
||
|
||
```tsx
|
||
<nav className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
|
||
…
|
||
</nav>
|
||
```
|
||
|
||
### Newsletter / CTA split
|
||
|
||
```tsx
|
||
<div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
|
||
…
|
||
</div>
|
||
```
|
||
|
||
## Breakpoint guidance
|
||
|
||
| Viewport | Typical columns |
|
||
| --- | --- |
|
||
| < 640px (`default`) | 1 |
|
||
| `sm` ≥ 640px | 2 for dense cards |
|
||
| `md` ≥ 768px | 2–3 |
|
||
| `lg` ≥ 1024px | 2–4 marketing grids |
|
||
| `xl` ≥ 1280px | Same as `lg`; prefer more whitespace over more columns |
|
||
|
||
Exact breakpoints: [responsive.md](./responsive.md).
|
||
|
||
## Gap rules
|
||
|
||
Prefer these gaps:
|
||
|
||
| Context | Gap |
|
||
| --- | --- |
|
||
| Dense UI (forms, chips) | `gap-2` / `gap-3` (8 / 12) |
|
||
| Card grids | `gap-6` (24) |
|
||
| Section split layouts | `gap-10` / `gap-16` (40 / 64) |
|
||
| Footer columns | `gap-x-6 gap-y-10` |
|
||
|
||
Do not use arbitrary gaps (`gap-[13px]`, `gap-[1.1rem]`).
|
||
|
||
## Alignment & RTL
|
||
|
||
- Site is Persian / RTL. Prefer `start` / `end` over `left` / `right`.
|
||
- For asymmetric hero layouts, mirror with logical classes (`lg:ms-auto`, not `lg:ml-auto` unless intentional LTR islands).
|
||
|
||
## Forbidden
|
||
|
||
- CSS Grid that sets `width` wider than the container without clipping.
|
||
- Mixing Bootstrap / custom 12-column frameworks.
|
||
- Absolute-positioned “fake grids” for primary content.
|
||
|
||
## Related
|
||
|
||
- [layout.md](./layout.md)
|
||
- [spacing.md](./spacing.md)
|
||
- [cards.md](./cards.md)
|