Grid

Tangible Design Systems follows a 12 column grid system based on Blueprintcss that scales across four defined breakpoints.

The whole site is based on a grid system and the components are defined within it.

To build a grid you need to write code as in the example below

<div class="o-container">
  <div class="grid">
    <div class="4@md">Component</div>
    <div class="4@md">Component</div>
    <div class="4@md">Component</div>
  </div>
</div>

.o-container is the main wrapper of the website and it is 1920px wide which is the width of the website.

For a complete guide to using the grid, refer to the Blueprintcss documentation.

Breakpoints

Breakpoints are defined in "templates/01-fractal/src/scss/01-settings/_settings.breakpoints.scss".