Framework

For our responsive corporate website we defined 3 different breakpoints:

• Mobile > 600px
• Tablet > 768px
• Desktop > 1024px

The grid is providing uniformity to layouts across different viewports.

Our grid consists of 12 columns and is fluid with dynamically adaptive column width but fixed gutter and margin width. Gutter and margin width change from smaller to larger viewports to avoid elements being visually placed to far apart in small viewports or being visually too close on large viewports.

We defined the following percentages for the grid, in which the web components are placed accordingly: 

Desktop%:

• Full Width
• 100%, with 50%. 33% and 25% components (teasers).
• 80% left aligned

Tablet%:

• Full Width
• 100% with 50%. 33% components (teasers).

Mobile%:

• Full Width
• 100%