design_responsive
Breakpoints, fluid typography, container queries ve modern CSS features.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill design_responsiveInstructions
Loading…
Breakpoints, fluid typography, container queries ve modern CSS features.
npxskills add vuralserhat86/antigravity-agentic-skills--skill design_responsiveLoading…
Responsive tasarım ve modern CSS özellikleri.
Mobile: 0 - 639px
Tablet SM: 640 - 767px
Tablet: 768 - 1023px
Desktop: 1024 - 1439px
Wide: 1440px+
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
:root {
--fluid-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--fluid-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
--fluid-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
--fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}
| Device | Max-Width | Padding |
|---|---|---|
| Mobile | 100% | 16px |
| Tablet | 768px | 24px |
| Desktop | 1200px | 32px |
| Wide | 1440px | 48px |
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) { }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
/* High contrast */
@media (prefers-contrast: high) { }
| Device | Columns | Gutter |
|---|---|---|
| Mobile | 4 | 16px |
| Tablet | 8 | 16px |
| Desktop | 12 | 24px |
Kaynak: MDN - Container Queries & Utopia - Fluid Responsive Design
clamp() fonksiyonlarını hesapla ve entegre et.CSS Grid (Area naming) ve Flexbox (Gap) kullan.srcset ve aspect-ratio kullanarak görsel yüklemelerini ve düzenini optimize et.prefers-color-scheme ve prefers-reduced-motion desteğini test et.| Aşama | Doğrulama |
|---|---|
| 1 | Tasarım 320px (iPhone SE) ve 2560px (Ultra-wide) arasında sorunsuz mu? |
| 2 | Horizontal scroll oluşuyor mu? (Overflow kontrolü) |
| 3 | Font boyutları her viewport'ta okunabilir mi? |
Design Responsive v1.5 - With Workflow
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).