Responsive Web Design

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Create responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices.

Instructions onlySoftware Development Design & Creative

AI-generated overview

Guides building mobile-first responsive web layouts with CSS Grid, Flexbox, media queries and typography.

What it does: Provides reference guides and a component template for creating responsive web interfaces. It covers mobile-first media query strategy, Flexbox navigation, CSS Grid layouts, responsive typography and card components. The material is instructional, with CSS examples and a TSX component template.
When to use it: Use when building adaptive interfaces that need to work across devices, including multi-device applications, mobile-first development, accessible layouts and flexible UI systems.
Requirements: No scripts or runtime dependencies; it ships reference markdown files and a TSX component template.

Overview

Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences.

When to Use

Multi-device applications
Mobile-first development
Accessible layouts
Flexible UI systems
Cross-browser compatibility

Quick Start

Minimal working example:

css

/* Mobile styles (default) */.container {  display: flex;  flex-direction: column;  padding: 16px;  gap: 16px;}
.card {  padding: 16px;  border-radius: 8px;  background: white;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.grid {  display: grid;  grid-template-columns: 1fr;  gap: 16px;}
/* Tablet (640px and up) */@media (min-width: 640px) {  .container {    flex-direction: row;// ... (see reference guides for full implementation)

/* Mobile styles (default) */.container {  display: flex;  flex-direction: column;  padding: 16px;  gap: 16px;}
.card {  padding: 16px;  border-radius: 8px;  background: white;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.grid {  display: grid;  grid-template-columns: 1fr;  gap: 16px;}
/* Tablet (640px and up) */@media (min-width: 640px) {  .container {    flex-direction: row;// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Mobile-First Media Query Strategy [blocked]	Mobile-First Media Query Strategy
Flexbox Responsive Navigation [blocked]	Flexbox Responsive Navigation
CSS Grid Responsive Layout [blocked]	CSS Grid Responsive Layout
Responsive Typography [blocked]	Responsive Typography
Responsive Cards Component [blocked]	Responsive Cards Component

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/responsive-web-designat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Responsive Web Design

Responsive Web Design

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices