💄 Spacing and Layout - Githubissues

tinacms / tina.io

Website for TinaCMS 🦙 - General info, documentation, blogs & contribution guidelines.

https://tina.io

246 stars 1.59k forks source link

💄 Spacing and Layout #2533

Open bettybondoc opened 1 week ago

bettybondoc commented 1 week ago

Objective: Reverse-engineer the grid layouts used on the live site, define responsive grid styles, and add them to the design library to ensure consistency and scalability across designs.

Key Tasks:

[x] Inspect existing grid layouts across the live site for forms, cards, and sections.
[x] Define grid systems for different screen sizes (mobile, tablet, desktop), including responsive behaviors.
[x] Map Tailwind utilities for spacing, alignment, and grid configurations
[ ] Add grid styles to the design library in Figma
[ ] Document grid usage guidelines with examples (e.g., forms, feature sections, cards).

Acceptance Criteria:

Grid systems are reverse-engineered, defined, and documented for all screen sizes.
Tailwind utilities used for grids are mapped to the design system.
Documentation includes visual examples of grid layouts and usage.
Developers confirm grid specifications are feasible for implementation.

bettybondoc commented 1 day ago

✅ WIP - Tina.io Design Library