Shop
/
Shop-Storefront
4
0
Fork 0
Code Issues 25 Pull Requests Packages Projects 1 Releases Wiki Activity

Update Abstract layout template

namds29 2025-11-14 03:34:30 +00:00
parent bf5d63276a
commit 35066a0f37
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Abstract-layout-template.md

@ -13,6 +13,12 @@ This document explains the abstract page layout shown in the image above. It foc
- **Main Content Area**: Body section of the page, include all the contents and component we using to show user. - **Main Content Area**: Body section of the page, include all the contents and component we using to show user.
- **Footer**: links, legal, contact, newsletter, social — consistent across pages. - **Footer**: links, legal, contact, newsletter, social — consistent across pages.
## Core Design
- Decide layout per section: use **CSS Grid** for multi-column card grids (categories, products) and **Flexbox** for linear strips (USPs, toolbars, navs, promo bands).
- Mobile-first: stack blocks in one column; scale to 2/3/4 columns at breakpoints while maintaining consistent gutters and container widths.
- Keep blocks modular: each block is a MedusaJS component with a simple, predictable prop shape.
- Drive rendering from a **JSON config**: a `blocks` array declares the page; each item has a `type` (e.g., `hero`, `features`, `categories`, `collection`, `promo`, `story`, `testimonials`) and optional `media`, `content`, `actions`, and `layout` fields.
## Core Sections (Blocks) ## Core Sections (Blocks)
Each block uses a simple “media + content + actions” pattern and can be repeated. Each block uses a simple “media + content + actions” pattern and can be repeated.