SI Design System

Grid System

Our grid system is composed of 12 flexible columns with no gutter between the columns. It has the same logic as the Bootstrap grid System. We apply border-box so that the border and padding is included in the width of the grid columns.

1 Column Grid

12/12

</> Code

<div class="flexRow">
<div class="flexCol12">...</div>
</div>

2 Columns Grid

6/12

6/12

</> Code

<div class="flexRow">
<div class="flexCol6">...</div>
<div class="flexCol6">...</div>
</div>

3 Columns Grid

4/12

4/12

4/12

</> Code

<div class="flexRow">
  <div class="flexCol4">...</div>
  <div class="flexCol4">...</div>
  <div class="flexCol4">...</div>
</div>

4 Columns Grid

3/12

3/12

3/12

3/12

</> Code

<div class="flexRow">
  <div class="flexCol3">...</div>
  <div class="flexCol3">...</div>
  <div class="flexCol3">...</div>
  <div class="flexCol3">...</div>
</div>

6 Columns Grid

2/12

2/12

2/12

2/12

2/12

2/12

</> Code

<div class="flexRow">
  <div class="flexCol2" >...</div>
  <div class="flexCol2" >...</div>
  <div class="flexCol2" >...</div>
  <div class="flexCol2" >...</div>
  <div class="flexCol2" >...</div>
  <div class="flexCol2" >...</div>
</div>

12 Columns Grid

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

</> Code

<div class="flexRow">
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
</div>

Mixed grids

The grid layout is easily extended by nesting and mixing different column sizes.

1/12

11/12

</> Code

<div class="flexRow">
<div class="flexCol1">...</div>
<div class="flexCol11">...</div>
</div>

7/12

5/12

</> Code

<div class="flexRow">
<div class="flexCol7">...</div>
<div class="flexCol5">...</div>
</div>

5/12

1/12

6/12

</> Code

<div class="flexRow">
  <div class="flexCol5">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol6">...</div>
</div>

2/12

8/12

2/12

</> Code

<div class="flexRow">
  <div class="flexCol2">...</div>
  <div class="flexCol8">...</div>
  <div class="flexCol2">...</div>
</div>

1/12

1/12

1/12

1/12

8/12

</> Code

<div class="flexRow">
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol8">...</div>
</div>

1/12

2/12

1/12

2/12

1/12

2/12

1/12

2/12

</> Code

<div class="flexRow">
  <div class="flexCol1">...</div>
  <div class="flexCol2">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol2">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol2">...</div>
  <div class="flexCol1">...</div>
  <div class="flexCol2">...</div>
</div>

Do's & Dont's

Line heights and spacing

Choosing the appropriate line spacing and letter spacing is very important to the reading quality and and efficiency of the typography. It should never be to open or too tight which makes reading difficult and unpleasant for the reader. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

Always divide the live area to ensure equal column and row widths.

Never divide from the canvas boundary when using a margin.

previous

next