Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Default font family: Segoe UI
Default font size: 14 px
Default color: #333

Normalize.css

normalize.css included.

Adaptive grid

Adaptive grid based on 20-column structure and written on flexbox.

95%

10%

90%

15%

85%

16%

83%

20%

80%

25%

75%

30%

70%

33%

66%

35%

65%

40%

60%

45%

55%

50%

For grid usage need to create element with class cont that would be parent for grid columns.

Name of colunm class: col + width in % / 5 (or 16, 33, 66, 83) + letter of device (p - for phones, t - for tablets, s - for desktops).
Sample: col20t, col33s or col100p.

Code example:

<div class="cont guide__grid-example">
<div class="col5p"><span>5%</span></div>
<div class="col95p"><span>95%</span></div>

<div class="col10p"><span>10%</span></div>
<div class="col90p"><span>90%</span></div>

<div class="col15p"><span>15%</span></div>
<div class="col85p"><span>85%</span></div>

<div class="col16p"><span>16%</span></div>
<div class="col83p"><span>83%</span></div>

<div class="col20p"><span>20%</span></div>
<div class="col80p"><span>80%</span></div>

<div class="col25p"><span>25%</span></div>
<div class="col75p"><span>75%</span></div>

<div class="col30p"><span>30%</span></div>
<div class="col70p"><span>70%</span></div>

<div class="col33p"><span>33%</span></div>
<div class="col66p"><span>66%</span></div>

<div class="col35p"><span>35%</span></div>
<div class="col65p"><span>65%</span></div>

<div class="col40p"><span>40%</span></div>
<div class="col60p"><span>60%</span></div>

<div class="col45p"><span>45%</span></div>
<div class="col55p"><span>55%</span></div>

<div class="col50p"><span>50%</span></div>
<div class="col50p"><span>50%</span></div>
</div>