BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Layout & the Grid

MetLife’s grid system for web is based on Bootstrap and is fully responsive from desktop through phone viewports. This grid system applies to responsive Web design only.

Layout

Mobile-first Responsive Design

Mobile-first Responsive Web Design is a combination of philosophies that solve for the ever-changing landscape of digital devices.

Responsive Web Design

This is a design system which responds to a website’s layout for multiple screen resolutions using fluid grids. Images and media are flexible while content stays intact at any resolution. A breakpoint is the width at which the design “breaks” or starts to look bad. Using CSS, the layout is optimized to look good at each breakpoint.

Mobile-first

Mobile-first is a philosophy that prioritizes the context when designing user experiences by starting with a mobile platform first. Mobile is more restrictive due to reduced real-estate. If you can support the worst-case scenario from a real-estate perspective, you can support anything.

design principles

the Grid

The desktop grid (based on a 1200px width) is 12 columns of 70px each, with 15px padding at either side of the viewport and 30px gutters.

Breakpoints

Since column widths are fluid (but padding and gutters are fixed widths):

  • • 12 columns for views from 980px and up
  • • 8 columns for views from 979px to 769px
  • • 6 columns for views from 768px to 421px
  • • Below 420px the grid changes to single column
Grid: Specification
Desktop Grid (1200px)
design principles
Tablet Grid (768px)
design principles
Mobile Grid (320px)
design principles