responsive-design
SKILL.md
Responsive Standards
-
Mobile-First approach:
- Write standard classes for MOBILE views first (e.g.,
flex-col,w-full). - Use
md:andlg:prefixes for Tablet/Desktop overrides.
- Write standard classes for MOBILE views first (e.g.,
-
Navigation:
- Desktop: Show full links (Store, Admin Portal).
- Mobile: Hide links. Show a "Hamburger Menu" icon that opens a Sheet/Drawer.
-
Typography Scaling:
- Use
text-xlon mobile andmd:text-3xlon desktop for headings. - The Logo 'FASTTRACK' must be visible on ALL screens.
- Use