-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtypeface.html
164 lines (135 loc) · 8.63 KB
/
typeface.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>ActiGuide — Типографика</title>
<link rel="stylesheet" href="out/style.min.css"/>
<script type="text/javascript" src="out/libs.min.js"></script>
<script type="text/javascript" src="out/app.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="m-box">
<div class="box">
<h1>Типографика</h1>
</div>
</div>
<div class="m-box text-box">
<div class="box">
<p class="text text__small">Фирменный шрифт — Proxima Nova (<a href="http://31.44.93.246:8090/download/attachments/4325696/proximanova.zip" class="link_secondary">Desktop ZIP</a> и <a href="http://31.44.93.246:8090/download/attachments/4325696/proximanova-webfont.zip" class="link_secondary">Web font ZIP</a>). Используются нормальное и жирное начертание. Шрифт для пиктограмм — WebSymbolsLyga (<a href="http://31.44.93.246:8090/download/attachments/4325696/websymbolsliga.zip" class="link_secondary">Web font ZIP</a>).</p>
<p class="text">Стили набора отличаются в зависимости от области применения: для набора в интерфейсах и при верстке текстов.</p>
<p class="secondary">Авторы шрифтов: <a href="http://www.marksimonson.com/fonts/view/proxima-nova">Mark Simonson</a> и <a href="http://www.marksimonson.com/fonts/view/proxima-nova">JustBeNice</a> </p>
</div>
</div>
<div class="m-box">
<div class="box">
<hr>
</div>
</div>
<div class="m-box">
<div class="box">
<h1>В интерфейсах </h1>
</div>
</div>
<div class="col66">
<div class="box">
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<p class="text">Текст</p>
<p class="secondary">Второстепенный текст</p>
<p class="tech">Технический текст</p>
<!--NEW CLASS FOR HR-->
<hr>
<p class="text">Разделительные линии только одного стиля, не заходят в выносы колонок - тег "hr"</p>
<!--NEW CLASS FOR HR-->
<hr>
<p class="text m-middle">Используются пять размеров отступов снизу:</p>
<div style="background: #FFFDBE; height: 5px; width: 110px; float:left; margin:0 5px 40px 0;"><span style="position:relative;top:-20px;">nano - 5px </span></div>
<div style="background: #FFFDBE; height: 10px; width: 110px; float: left; margin: 0 5px 40px 0;"><span style="position:relative;top:-20px;">micro -10px</span></div>
<div style="background: #FFFDBE; height: 20px; width: 110px; float: left; margin: 0 5px 40px 0;"><span style="position:relative;top:-20px;">small 20px</span></div>
<div style="background: #FFFDBE; height: 30px; width: 110px; float: left; margin: 0 5px 40px 0;"><span style="position:relative;top:-20px;">normal - 30px</span></div>
<div style="background: #FFFDBE; height: 40px; width: 110px; float: left; margin: 0 5px 40px 0;"><span style="position:relative;top:-20px;">middle - 40px</span></div>
<div style="background: #FFFDBE; height: 50px; width: 110px; float: left; margin: 0 5px 40px 0;"><span style="position:relative;top:-20px;">big - 50px</span></div>
<div style="background: #FFFDBE; height: 60px; width: 110px; float: left; margin: 0 5px 40px 0;"><span style="position:relative;top:-20px;">giant - 60px</span></div>
</div>
</div>
<div class="m-box">
<div class="box"><hr></div>
</div>
<div class="m-box">
<div class="box">
<h1>В текстах (обертка с классом text-box)</h1>
</div>
<div class="box text-box">
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<p class="text">Текст</p>
<p class="secondary">Второстепенный текст</p>
<p class="tech">Технический текст</p>
<!--NEW CLASS FOR HR-->
<hr class="small">
<h3>Таблица</h3>
<p class="text">
У таблиц свои стили-исключения: вертикальные отступы, которыми окружены разделителей строк, micro и заголовки столбцов micro. Если таблица
не умещается в экран по вертикали, то заголовки столбцов удерживаются
у верхней границы и отделяются своим разделителем, который появляется только в этом случае. Столбцы с численными значениями выравниваются по правому краю и по разряду. Опционально, строки таблицы могут подсвечиваться при наведении курсора.
</p>
<p class="text">Небольшая и <a style="text-decoration: none" href="#">объемная</a> таблица</p>
<h4 class="m-left30">Доход чиновников за 2012-й год</h4>
<table>
<tbody>
<tr>
<th>Имя</th>
<th>Доход</th>
</tr>
<tr class="first">
<td style="padding:15px 0;">Владимир Груздев</td>
<td align="right">1.35</td>
</tr>
<tr>
<td style="padding:15px 0;">Григорий Аникеев</td>
<td align="right">9.2</td>
</tr>
<tr>
<td style="padding:15px 0;">Сергей Петров</td>
<td align="right">8.2</td>
</tr>
</tbody>
</table>
<!--NEW CLASS FOR HR-->
<hr class="small">
<h3>Список</h3>
<p class="text">
Между элементами списка отступ small, интерлиньяж пункта равен интерлиньяжу используемого начертания. Списки бывают без буллитов и с буллитом тире «—». Каждый последующий уровень вложенности втягивается на 30 px.
</p>
<ul>
<li>Первый элемент списка</li>
<li>
Второй элемент списка длиной <br> аж в две строки
<ul>
<li>Первый вложенный</li>
<li>Второй вложенный</li>
</ul>
</li>
<li>Третий элемент списка</li>
</ul>
<!--NEW CLASS FOR HR-->
<hr class="small">
<ol>
<li>Первый элемент списка</li>
<li>
Второй элемент списка длиной <br> аж в две строки
<ol>
<li>Первый вложенный</li>
<li>Второй вложенный</li>
</ol>
</li>
<li>Третий элемент списка</li>
</ol>
</div>
</div>
</div>
</body>
</html>