Dashboard Layout Labs

Reindeer

A sample dashboard layout (from flowdock) implemented using different approaches

• CSS Grid Layout (naive)
• CSS Grid Layout (using areas)
• CSS Grid Layout with element queries
• Bootstrap 3
• Flexbox
• Flexbox with element queries
• Floats
• Skeleton
• <app-layout>

Rainbow

A sample dashboard layout (from Figma) implemented using different approaches

• CSS Grid Layout (naive)
• CSS Grid Layout (using areas)
• CSS Grid Layout with element queries
• Bootstrap 3
• Flexbox
• Flexbox with element queries
• Jens' dashboard made with flexbox and element queries
• Floats
• Skeleton
• <app-layout>