forked from yoksel/common-words
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.html
247 lines (247 loc) · 18 KB
/
README.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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<html>
<head>
<meta charset="UTF-8">
<title>README.md</title>
</head>
<body>
<h1 id="-css-">Слова, часто используемые в CSS-классах</h1>
<h2 id="-">Изображения</h2>
<p><code>image</code>, <code>img</code>, <code>picture</code>, <code>pic</code> — картинка</p>
<p><code>icon</code> — иконка</p>
<p><code>logo</code> — логотип</p>
<p><code>userpic</code>, <code>avatar</code> — юзерпик, маленькая картинка пользователя</p>
<p><code>thumbnail</code>, <code>thumb</code> — миниатюра, уменьшенное изображение</p>
<h2 id="-">Текст</h2>
<p><code>title</code>, <code>subject</code>, <code>heading</code>, <code>headline</code>, <code>caption</code> — заголовок</p>
<p><code>subtitle</code> — подзаголовок</p>
<p><code>slogan</code> — слоган</p>
<p><code>lead</code>, <code>tagline</code> — лид-абзац в тексте</p>
<p><code>text</code> — текстовый контент</p>
<p><code>desc</code> — описание, вариант текстового контента</p>
<p><code>excerpt</code> — отрывок текста, обычно используется перед ссылкой «Читать далее...»</p>
<p><code>quote</code>, <code>blockquote</code> — цитата</p>
<p><code>snippet</code> — пример кода</p>
<p><code>link</code> — ссылка</p>
<p><code>copyright</code>, <code>copy</code> — копирайт</p>
<h2 id="-">Списки</h2>
<p><code>list</code>, <code>items</code> — список</p>
<p><code>item</code> — элемент списка</p>
<h2 id="-">Блоки</h2>
<p><code>page</code> — корневой элемент страницы</p>
<p><code>header</code> — шапка (страницы или элемента)</p>
<p><code>footer</code> — подвал (страницы или элемента)</p>
<p><code>section</code> — раздел контента (один из нескольких)</p>
<p><code>main</code>, <code>body</code> — основная часть (страницы или элемента)</p>
<p><code>content</code> — содержимое элемента</p>
<p><code>sidebar</code> — боковая колонка (страницы или элемента)</p>
<p><code>aside</code> — блок с дополнительной информацией</p>
<p><code>widget</code> — виджет, например, в боковой колонке</p>
<h2 id="-">Раскладка</h2>
<p><code>wrapper</code>, <code>wrap</code> — обёртка, обычно внешняя</p>
<p><code>inner</code> — внутренняя обёртка</p>
<p><code>container</code>, <code>holder</code>, <code>box</code> — контейнер</p>
<p><code>grid</code> — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе <code>row</code> и <code>col</code>)</p>
<p><code>row</code> — контейнер в виде строки</p>
<p><code>col</code>, <code>column</code> — контейнер в виде столбца</p>
<h2 id="-">Элементы управления</h2>
<p><code>button</code>, <code>btn</code> — кнопка, например, для отправки формы</p>
<p><code>control</code> — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером</p>
<p><code>dropdown</code> — выпадающий список</p>
<h2 id="-">Медиавыражения</h2>
<p><code>phone</code>, <code>mobile</code> — мобильные устройства</p>
<p><code>phablet</code> — телефоны с большим экраном (6-7")</p>
<p><code>tablet</code> — планшеты</p>
<p><code>notebook</code>, <code>laptop</code> — ноутбуки</p>
<p><code>desktop</code> — настольные компьютеры</p>
<h2 id="-">Размеры</h2>
<p><code>tiny</code> — маленький, крохотный</p>
<p><code>small</code> — небольшой</p>
<p><code>medium</code> — средний</p>
<p><code>big</code>, <code>large</code> — большой</p>
<p><code>huge</code> — огромный</p>
<p><code>narrow</code> — узкий</p>
<p><code>wide</code> — широкий</p>
<h2 id="-">Разное</h2>
<p><code>search</code> — поиск</p>
<p><code>socials</code> — блок иконок соцсетей</p>
<p><code>advertisement</code>, <code>adv</code>, <code>commercial</code>, <code>promo</code> — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)</p>
<p><code>features</code>, <code>benefits</code> — список основных особенностей товара, услуги</p>
<p><code>slider</code>, <code>carousel</code> — слайдер, интерактивный элемент с прокруткой содержимого</p>
<p><code>pagination</code> — постраничная навигация</p>
<p><code>user</code>, <code>author</code> — пользователь, автор записи или комментария</p>
<p><code>meta</code> — блок с дополнительной информацией, например, блок тегов и даты в посте</p>
<p><code>cart</code>, <code>basket</code> — корзина</p>
<p><code>breadcrumbs</code> — навигационная цепочка, «хлебные крошки»</p>
<p><code>more</code>, <code>all</code> — ссылка на полную информацию</p>
<p><code>modal</code> — модальное (диалоговое) окно</p>
<p><code>popup</code> — всплывающее окно</p>
<p><code>tooltip</code>, <code>tip</code> — всплывающее подсказки</p>
<p><code>preview</code> — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию</p>
<h2 id="-">Состояния</h2>
<p><code>active</code>, <code>current</code> — активный элемент, например, текущий пункт меню</p>
<p><code>hidden</code> — скрытый элемент</p>
<p><code>error</code> — статус ошибки</p>
<p><code>warning</code> — статус предупреждения</p>
<p><code>success</code> — статус успешного выполнения задачи</p>
<p><code>pending</code> — состояние ожидания, например, перед сменой статуса на error или success</p>
<h2 id="-">Примеры использования</h2>
<h3 id="-">Простой список</h3>
<pre><code class="lang-html"><ul class="list">
<li class="item">Первое</li>
<li class="item">Второе</li>
<li class="item">Третье</li>
</ul>
</code></pre>
<h3 id="-">Картинка пользователя (юзерпик)</h3>
<pre><code class="lang-html"><div class="user">
<img class="user__img" src="userpic.png" alt="Дормидонт Петрович">
<a class="user__link" href="#">Дормидонт Петрович</a>
</div>
</code></pre>
<h3 id="-">Галерея</h3>
<pre><code class="lang-html"><div class="gallery">
<ul class="gallery__list">
<li class="gallery__item">
<img class="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз">
</li>
<li class="gallery__item">
<img class="gallery__img" src="trees.jpg" alt="Парк «Три сосны»">
</li>
</ul>
</div>
</code></pre>
<h3 id="-">Навигация</h3>
<pre><code class="lang-html"><nav class="nav">
<a class="nav__link nav__link--active">Главная</a>
<a class="nav__link" href="#">Второстепенная</a>
<a class="nav__link" href="#">Третья с конца</a>
<a class="nav__link" href="#">Предпоследняя</a>
<a class="nav__link" href="#">Совсем конец</a>
</nav>
</code></pre>
<pre><code class="lang-html"><nav class="nav">
<ul class="nav__list">
<li class="nav__item nav__item--current">
<a class="nav__link">Главная</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Статьи</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Фотогалерея</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Контакты</a>
</li>
</ul>
</nav>
</code></pre>
<h3 id="-">Виджет в боковой колонке</h3>
<pre><code class="lang-html"><div class="widget">
<h4 class="widget__title">Выращиваем желе</h4>
<div class="widget__content">
<p>Чтобы вырастить общительное дружелюбное желе,
нам потребуется рулон поролона, два килограмма сахара,
три яйца и пол чайной чашки ацетона.</p>
<a class="widget__link" href="#">Не читать дальше...</a>
</div>
</div>
</code></pre>
<h3 id="-">Блок новостей</h3>
<pre><code class="lang-html"><div class="news">
<h3 class="news__title">Вчерашние новости</h3>
<ul class="news__list">
<!-- к классу элемента добавляем класс блока,
чтобы создать новое пространство имён -->
<li class="news__item item-news">
<h4 class="item-news__title">Соревнования среди воблы по конькобежному спорту</h4>
<div class="item-news__text">
<p>Победила команда килек из Петрозаводска</p>
<a href="#" class="item-news__link">Читать дальше</a>
</div>
</li>
<li class="news__item item-news">
<h4 class="item-news__title">Учёные уточнили роль напильника в уходе за ногтями</h4>
<div class="item-news__text">
<p>Британские учёные высоко оценили вклад
напильника в отращивание полутораметровых ногтей.</p>
<a href="#" class="item-news__link">Не читать дальше</a>
</div>
</li>
</ul>
</div>
</code></pre>
<h3 id="-">Статья или пост в блоге (простой вариант)</h3>
<pre><code class="lang-html"><article class="article">
<h3 class="article__title">Нащупываем чакры у пучка петрушки</h3>
<time class="article__datetime">32 мая, 10:87</time>
<div class="article__author author-article">
<img class="author-article__img" src="userpic.png" alt="Клешня Андреевна">
<a class="author-article__link" href="#">Клешня Андреевна Долгорукая</a>
<div class="author-article__desc">Наш эксперт по чакрам</div>
</div>
<div class="article__content">
Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
к пучку петрушки. Ласково взгляните на него и как следует почешите
за ухом, можно себе или коту. Перевяжите атласной ленточкой,
непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
одомашненный пучок петрушки, который будет весело бегать за вами
по пятам и проращивать свои семена в ваших тапках.
</div>
</article>
</code></pre>
<h3 id="-">Статья или пост в блоге (сложный вариант)</h3>
<pre><code class="lang-html"><article class="entry">
<header class="entry__header">
<h3 class="entry__title title-entry">
<a class="title-entry__link" href="#">Резиновые уточки как способ самопознания</a>
</h3>
<time class="entry__datetime">32 мая, 10:87</time>
</header>
<div class="entry__author author-entry">
<img class="author-entry__img" src="userpic.png" alt="Василиса Сергеевич">
<a class="author-entry__link" href="#">Василиса Сергеевич</a>
</div>
<div class="entry__content">
Достаньте с чердака коробку с полусотней резиновых уточек,
оставшихся после празднования нового года. Из уточек
и горящих свечей выложите пентаграмму на полу комнаты.
Сядьте посередине в позу лотоса, в каждую руку возьмите
по немецко-бразильскому словарю, прокашляйтесь, наберите
полную грудь воздуха и громко и уверенно,
с полной самоотдачей скажите "Кря!"
</div>
<div class="entry__tags tags-entry">
<h4 class="tags-entry__title">Метки</h4>
<ul class="tags-entry__list">
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">хоровод своими руками</a>
</li>
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">фарфоровые тапки</a>
</li>
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">гуталин в кулинарии</a>
</li>
</ul>
</div>
<div class="entry__actions actions-entry">
<ul class="actions-entry__list">
<li class="actions-entry__item actions-entry__item--read">
<a class="actions-entry__link" href="#">238 ответов</a>
</li>
<li class="actions-entry__item actions-entry__item--write">
<a class="actions-entry__link" href="#">Написать в спортлото</a>
</li>
<li class="actions-entry__item actions-entry__item--share">
<a class="actions-entry__link" href="#">Поделиться</a>
</li>
</ul>
</div>
</article>
</code></pre>
</body>
</html>