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
Multi-Toggle v2
Multi-Toggle v3
Multi-Toggle with Active Parent Links
The Ol' Right-to-Left
The Skip the Subnav
The Carousel+
Breadcrumbs
Across the Top
Breadcrumbs Dropdown
Last-One Only
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
3-up Touch Carousel
Fluid Carousel
Accordion
Fluid
Accordion To Tab
Messaging
Slide-Down Notification Bar
Overlay