Sign In

Grid System

We use a standard 12 column responsive grid system

What is a grid system and why do we use it.

A grid system helps us organize our user interfaces into columns and rows. It helps our designers group like data, and elements into familiar patterns our user’s can recognize. This helps our user’s by reducing cognitive load by adding clarity and order to the interface.

Developing Adaptive Layouts

Our container, column, gutter and margins sizes are based on the very popular framework Bootstrap 4 Grid System. We do not require our developers to adhere to the bootstrap 4 naming conventions or development patterns. However, if you are developing a grid system we encourage you to study the sizing and structure the framework uses to achieve it’s responsive grid system.

Designing Adaptive Layouts

Material.io and the adaptive grid
To learn more about using a grid to design responsive layouts that adapt to any screen size and orientation, we recommend reading Material.io Responsive Layout Grid. It has a great breakdown of what columns, gutters and margins are, how to design for consistency, and adaptive layouts.
Beeline Sketch Libraries
Our Beeline Sketch Libraries have a built in grid system that can be toggled on and off Download the Beeline Sketch Libraries