Responsive Patterns A collection of patterns and modules for responsive designs.

http://bradfrost.github.com/this-is-responsive/patterns.html

Responsive Patterns

A collection of patterns and modules for responsive designs.

Layout

Reflowing Layouts

• Mostly Fluid
• Column Drop
• Layout Shifter
• Tiny Tweaks
• Main column with sidebar
• 3 column
• 3 column v2

Equal Width

• 2 equal-width columns
• 3 equal-width columns
• 4 equal-width columns
• 5 equal-width columns
• 6 equal-width columns

Off Canvas

• Top
• Left
• Right
• Left and Right
• Bottom

Source-Order Shift

• Table Cell
• Flexbox
• AppendAround

Lists

• List with Thumbnails
• List with Thumbnails 2
• List with Thumbnails and Summary

Grid Block

• 4-up Grid Block
• Double-Wide v1
• Double-Wide v2
• Double-Wide v3
• Double-Wide v4
• With Title Sections

Tables

• Responsive Table
• Definition List to Table
• Pie Chart to Table
• Priority Columns
• Link to Full-Table
• Horizontal Overflow

Navigation

Single-Level

• Toggle
• Footer Anchor
• Select Menu
• Left Nav Flyout
• Priority+
• Top Links
• Stacked Top Links
• Horizontal Overflow
• Overlay

Multi-level

• Multi-Toggle
• The Ol' Right-to-Left
• The Skip the Subnav
• The Carousel+

Breadcrumbs

• Across the Top
• Breadcrumbs Dropdown
• Last-One Only

Anchored Sections

• Stacking Responsive Menu

Images

Fluid Images

• Basic Fluid Image

Adaptive Images

• Picturefill
• Server-side

Image Grid

• Image Grid

Media

Video

• Fluid Video

Maps

• Fluid Map Maintaining Aspect Ratio
• Static Map to Embedded Map

Forms

• Form with Left Labels
• Search Form
• Login Form

Modules

Carousel

• 3-up Carousel
• Fluid Carousel

Accordion

• Fluid
• Accordion To Tab

Messaging

• Slide-Down Notification Bar
• Overlay