design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -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
|
||||
Reference in new issue
Block a user