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,35 @@
|
||||
---
|
||||
name: system/responsive-patterns
|
||||
title: Responsive Design Patterns
|
||||
description: Breakpoints, mobile-first, container queries.
|
||||
tags: [system, responsive, mobile, container-queries]
|
||||
source: stripe.com, linear.app, brad.co, css-tricks.com
|
||||
---
|
||||
|
||||
# Responsive Patterns
|
||||
|
||||
## Breakpoints
|
||||
|
||||
```css
|
||||
:root {
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
}
|
||||
```
|
||||
|
||||
## Container Queries
|
||||
|
||||
```css
|
||||
@container (min-width: 600px) {
|
||||
.card { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
```
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| ❌ Плохо | ✅ Хорошо |
|
||||
|----------|-----------|
|
||||
| 1000px breakpoint | 768px / 1024px |
|
||||
| Fixed width | `max-width: 1200px` |
|
||||
Reference in new issue
Block a user