Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/responsive-design.md

@@ -0,0 +1,56 @@
+---
+title: Responsive Design Patterns
+description: Mobile-first responsive design for premium websites.
+tags: [responsive, mobile, breakpoints, grid, layout]
+---
+
+# Responsive Design Patterns
+
+## Breakpoint Scale
+
+```
+xs: 0px    — Mobile (default)
+sm: 640px  — Large mobile
+md: 768px  — Tablet
+lg: 1024px — Laptop
+xl: 1280px — Desktop
+2xl: 1536px — Large desktop
+3xl: 1920px — Widescreen
+```
+
+## Grid System
+
+### Mobile (< 768px)
+- 1 column layout
+- Full-bleed sections
+- Stacked cards
+- Hamburger menu
+
+### Tablet (768px - 1024px)
+- 2 column grid
+- Side-by-side cards
+- Sticky navigation
+
+### Desktop (> 1024px)
+- 12-column grid
+- Bento grid layouts
+- Parallax effects
+- Hover interactions
+
+## Fluid Typography
+
+```css
+font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
+```
+
+## Fluid Spacing
+
+```css
+padding: clamp(1rem, 5vw, 4rem);
+```
+
+## Anti-Patterns
+- Never use fixed pixel widths for containers
+- Never hide content on mobile — restructure instead
+- Never ignore touch targets (min 48x48px)
+- Never disable scroll animations on mobile