sofatutor Playground

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.

More information about the 8-Point Grid System, here:

https://spec.fm/specifics/8-pt-grid

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:

Baseline Grid

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.

Baseline Grid

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

Grid Vertical Desktop

@960px – Desktop / 12 Columns / 32px Gutters / Gutters on outside

Tablet

Grid Vertical Tablet

@640px – Tablet / 12 Columns / 16px Gutters

Mobile

Grid Vertical Mobile

@320px – Mobile / 12 Columns / 8px Gutters