├── CONTRIBUTING.md └── README.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Как добавить новые слова? 2 | 3 | Есть слова, которые часто встречаются в разметке самых разных проектов, 4 | некие универсальные названия для часто используемых блоков — например, `title`, `text` 5 | или `icon`. Любой более-менее опытный верстальщик может сходу перечислить с десяток примеров. 6 | Если собрать такие слова в одном месте, получится хороший справочник 7 | для начинающих верстальщиков, и им не придётся ломать голову придумывая 8 | классы для элементов, которые уже имеют общепринятые названия. 9 | 10 | Цель документа — собрать простые и очевидные названия блоков и элементов страницы, поэтому 11 | добавляя новые слова, проверьте: 12 | 13 | 1. Будут ли они полезны именно для начинающих? 14 | 15 | 2. Имеют ли они простое и короткое описание? Можно ли легко набросать код 16 | примера с такими классами или привести пример использования? 17 | 18 | 3. Не дублируют ли они названия тэгов? Например, `textarea` или `form` — не подойдут. 19 | Исключение составляют названия, которые могут быть самостоятельными понятиями 20 | и не всегда используются с одноимёнными тэгами (например, `header` или `footer`). 21 | 22 | Слова можно предложить в ишью или через пулреквест. 23 | 24 | Обратите внимание: это небольшой справочник по словам, часто используемым в названиях классов, он не стремится включить в себя все возможные термины и понятия — для них уже существует большой и подробный **[Словарь терминов по фронтенду](https://github.com/web-standards-ru/dictionary)**. 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Слова, часто используемые в CSS-классах 2 | 3 | ## Изображения 4 | 5 | `image`, `img`, `picture`, `pic` — картинка 6 | 7 | `icon` — иконка 8 | 9 | `logo` — логотип 10 | 11 | `userpic`, `avatar` — юзерпик, маленькая картинка пользователя 12 | 13 | `thumbnail`, `thumb` — миниатюра, уменьшенное изображение 14 | 15 | ## Текст 16 | 17 | `title`, `subject`, `heading`, `headline`, `caption` — заголовок 18 | 19 | `subtitle` — подзаголовок 20 | 21 | `slogan` — слоган 22 | 23 | `lead`, `tagline` — лид-абзац в тексте 24 | 25 | `text` — текстовый контент 26 | 27 | `desc` — описание, вариант текстового контента 28 | 29 | `excerpt` — отрывок текста, обычно используется перед ссылкой «Читать далее...» 30 | 31 | `quote`, `blockquote` — цитата 32 | 33 | `snippet` — пример кода 34 | 35 | `link` — ссылка 36 | 37 | `copyright`, `copy` — копирайт 38 | 39 | ## Списки 40 | 41 | `list`, `items` — список 42 | 43 | `item` — элемент списка 44 | 45 | ## Блоки 46 | 47 | `page` — корневой элемент страницы 48 | 49 | `header` — шапка (страницы или элемента) 50 | 51 | `footer` — подвал (страницы или элемента) 52 | 53 | `section` — раздел контента (один из нескольких) 54 | 55 | `main`, `body` — основная часть (страницы или элемента) 56 | 57 | `content` — содержимое элемента 58 | 59 | `sidebar` — боковая колонка (страницы или элемента) 60 | 61 | `aside` — блок с дополнительной информацией 62 | 63 | `widget` — виджет, например, в боковой колонке 64 | 65 | ## Раскладка 66 | 67 | `wrapper`, `wrap` — обёртка, обычно внешняя 68 | 69 | `inner` — внутренняя обёртка 70 | 71 | `container`, `holder`, `box` — контейнер 72 | 73 | `grid` — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе `row` и `col`) 74 | 75 | `row` — контейнер в виде строки 76 | 77 | `col`, `column` — контейнер в виде столбца 78 | 79 | ## Элементы управления 80 | 81 | `button`, `btn` — кнопка, например, для отправки формы 82 | 83 | `control` — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером 84 | 85 | `dropdown` — выпадающий список 86 | 87 | ## Медиавыражения 88 | 89 | `phone`, `mobile` — мобильные устройства 90 | 91 | `phablet` — телефоны с большим экраном (6-7") 92 | 93 | `tablet` — планшеты 94 | 95 | `notebook`, `laptop` — ноутбуки 96 | 97 | `desktop` — настольные компьютеры 98 | 99 | ## Размеры 100 | 101 | `tiny`, `xs` — маленький, крохотный 102 | 103 | `small`, `sm` — небольшой 104 | 105 | `medium`, `base` — средний 106 | 107 | `big`, `large`, `lg` — большой 108 | 109 | `huge`, `xl` — огромный 110 | 111 | `narrow` — узкий 112 | 113 | `wide` — широкий 114 | 115 | ## Разное 116 | 117 | `search` — поиск 118 | 119 | `socials` — блок иконок соцсетей 120 | 121 | `advertisement`, `adv`, `commercial`, `promo` — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой) 122 | 123 | `features`, `benefits` — список основных особенностей товара, услуги 124 | 125 | `slider`, `carousel` — слайдер, интерактивный элемент с прокруткой содержимого 126 | 127 | `pagination` — постраничная навигация 128 | 129 | `user`, `author` — пользователь, автор записи или комментария 130 | 131 | `meta` — блок с дополнительной информацией, например, блок тегов и даты в посте 132 | 133 | `cart`, `basket` — корзина 134 | 135 | `breadcrumbs` — навигационная цепочка, «хлебные крошки» 136 | 137 | `more`, `all` — ссылка на полную информацию 138 | 139 | `modal` — модальное (диалоговое) окно 140 | 141 | `popup` — всплывающее окно 142 | 143 | `tooltip`, `tip` — всплывающее подсказки 144 | 145 | `preview` — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию 146 | 147 | `overlay` — перекрывающий слой, например, для затемнения изображений или создания модальных окон 148 | 149 | ## Состояния 150 | 151 | `active`, `current` — активный элемент, например, текущий пункт меню 152 | 153 | `visible` — видимый элемент 154 | 155 | `hidden` — скрытый элемент 156 | 157 | `error` — статус ошибки 158 | 159 | `warning` — статус предупреждения 160 | 161 | `success` — статус успешного выполнения задачи 162 | 163 | `pending` — состояние ожидания, например, перед сменой статуса на error или success 164 | 165 | ## Примеры использования 166 | 167 | ### Простой список 168 | 169 | ```html 170 | 175 | ``` 176 | 177 | ### Картинка пользователя (юзерпик) 178 | 179 | ```html 180 |
181 | Дормидонт Петрович 182 | Дормидонт Петрович 183 |
184 | ``` 185 | 186 | ### Галерея 187 | 188 | ```html 189 |
190 | 198 |
199 | ``` 200 | 201 | ### Навигация 202 | 203 | ```html 204 | 211 | ``` 212 | 213 | ```html 214 | 230 | ``` 231 | 232 | ### Виджет в боковой колонке 233 | 234 | ```html 235 |
236 |

Выращиваем желе

237 | 238 |
239 |

Чтобы вырастить общительное дружелюбное желе, 240 | нам потребуется рулон поролона, два килограмма сахара, 241 | три яйца и пол чайной чашки ацетона.

242 | 243 | Не читать дальше... 244 |
245 |
246 | ``` 247 | 248 | ### Блок новостей 249 | 250 | ```html 251 |
252 |

Вчерашние новости

253 | 254 | 276 |
277 | ``` 278 | 279 | ### Статья или пост в блоге (простой вариант) 280 | 281 | ```html 282 |
283 |

Нащупываем чакры у пучка петрушки

284 | 285 | 286 |
287 | Клешня Андреевна 288 | Клешня Андреевна Долгорукая 289 |
Наш эксперт по чакрам
290 |
291 | 292 |
293 | Сходите на рынок и купите у старушек пучок петрушки грамм на 100. 294 | Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться 295 | коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном, 296 | вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь 297 | к пучку петрушки. Ласково взгляните на него и как следует почешите 298 | за ухом, можно себе или коту. Перевяжите атласной ленточкой, 299 | непременно завяжите бант. Поздравляем! Теперь у вас есть полностью 300 | одомашненный пучок петрушки, который будет весело бегать за вами 301 | по пятам и проращивать свои семена в ваших тапках. 302 |
303 |
304 | ``` 305 | 306 | ### Статья или пост в блоге (сложный вариант) 307 | 308 | ```html 309 |
310 |
311 |

312 | Резиновые уточки как способ самопознания 313 |

314 | 315 | 316 |
317 | 318 |
319 | Василиса Сергеевич 320 | 321 | Василиса Сергеевич 322 |
323 | 324 |
325 | Достаньте с чердака коробку с полусотней резиновых уточек, 326 | оставшихся после празднования нового года. Из уточек 327 | и горящих свечей выложите пентаграмму на полу комнаты. 328 | Сядьте посередине в позу лотоса, в каждую руку возьмите 329 | по немецко-бразильскому словарю, прокашляйтесь, наберите 330 | полную грудь воздуха и громко и уверенно, 331 | с полной самоотдачей скажите "Кря!" 332 |
333 | 334 |
335 |

Метки

336 | 337 | 348 |
349 | 350 |
351 | 362 |
363 |
364 | ``` 365 | --------------------------------------------------------------------------------