Grid
Grids are the start point to arrange all the content in our interface and they are disposed in two ways: vertical and horizontal. Purpose of design by using our grids is allow us to bring a basic structure to the layouts. Our vertical grid system is based in 12 columns considering three break points to cover responsive views for mobile devices. Gutters have a porportional increase starting from mobile devices. For the baseline grid we adopted the 8-Point grid system which will help us to define a consistent and appealing user interfaces and to achieve a good visual rhythm.
Baseline Grid
A baseline grid allows us to track the vertical distances between type and other objects in a layout. Use multiples of 8 to define dimensions, padding, and margin of both block and inline elements. When the only contents of a block element are text (e.g. buttons), set the text to a size consistent with the rest of your UI and/or the specific platform, then use padding to determine the size of the block element. In cases of a full-width element, use padding to determine height and a consistent horizontal margin to determine width. Here some examples:
Space
Based in the 8-Point Grid System we defined four main spaces between the elements in our layout, which are following a geometric progression that could double each step. Starting from 8px till 64px height.
However, we can introduce another values depending on the layout needs, always keeping in mind our 8-Point Grid progression (e.g., 2, 4, 24, 96, among others).
Vertical Grids
Desktop
@960px – Desktop / 12 Columns / 32px Gutters / Gutters on outside
Tablet
@640px – Tablet / 12 Columns / 16px Gutters
Mobile
@320px – Mobile / 12 Columns / 8px Gutters