Изображения
image , img , picture , pic — картинка
icon — иконка
logo — логотип
userpic , avatar — юзерпик, маленькая картинка пользователя
thumbnail , thumb — миниатюра, уменьшенное изображение
Текст
title , subject , heading , headline , caption — заголовок
subtitle — подзаголовок
slogan — слоган
lead , tagline — лид-абзац в тексте
text — текстовый контент
desc — описание, вариант текстового контента
excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»
quote , blockquote — цитата
snippet — пример кода
link — ссылка
copyright , copy — копирайт
Списки
list , items — список
item — элемент списка
Блоки
page — корневой элемент страницы
header — шапка (страницы или элемента)
footer — подвал (страницы или элемента)
section — раздел контента (один из нескольких)
main , body — основная часть (страницы или элемента)
content — содержимое элемента
sidebar — боковая колонка (страницы или элемента)
aside — блок с дополнительной информацией
widget — виджет, например, в боковой колонке
Раскладка
wrapper , wrap — обёртка, обычно внешняя
inner — внутренняя обёртка
container , holder , box — контейнер
grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)
row — контейнер в виде строки
col , column — контейнер в виде столбца
Элементы управления
button , btn — кнопка, например, для отправки формы
control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
dropdown — выпадающий список
Медиавыражения
phone , mobile — мобильные устройства
phablet — телефоны с большим экраном (6-7″)
tablet — планшеты
notebook , laptop — ноутбуки
desktop — настольные компьютеры
Размеры
tiny , xs — маленький, крохотный
small , sm — небольшой
medium, base — средний
big , large , lg — большой
huge , xl — огромный
narrow — узкий
wide — широкий
Разное
search — поиск
socials — блок иконок соцсетей
advertisement , adv , commercial , promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)
features , benefits — список основных особенностей товара, услуги
slider , carousel — слайдер, интерактивный элемент с прокруткой содержимого
pagination — постраничная навигация
user , author — пользователь, автор записи или комментария
meta — блок с дополнительной информацией, например, блок тегов и даты в посте
cart , basket — корзина
breadcrumbs — навигационная цепочка, «хлебные крошки»
more , all — ссылка на полную информацию
modal — модальное (диалоговое) окно
popup — всплывающее окно
tooltip , tip — всплывающее подсказки
preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию
overlay — перекрывающий слой, например, для затемнения изображений или создания модальных окон
Состояния
active , current — активный элемент, например, текущий пункт меню
visible — видимый элемент
hidden — скрытый элемент
error — статус ошибки
warning — статус предупреждения
success — статус успешного выполнения задачи
pending — состояние ожидания, например, перед сменой статуса на error или success
Примеры использования:
Простой список
Картинка пользователя (юзерпик)
Галерея
Навигация
Главная
Второстепенная
Третья с конца
Предпоследняя
Совсем конец
Виджет в боковой колонке
Блок новостей
Вчерашние новости
Соревнования среди воблы по конькобежному спорту
Победила команда килек из Петрозаводска
Читать дальше
Учёные уточнили роль напильника в уходе за ногтями
Британские учёные высоко оценили вклад
напильника в отращивание полутораметровых ногтей.
Не читать дальше
Статья или пост в блоге (простой вариант)
Нащупываем чакры у пучка петрушки
32 мая, 10:87
Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
к пучку петрушки. Ласково взгляните на него и как следует почешите
за ухом, можно себе или коту. Перевяжите атласной ленточкой,
непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
одомашненный пучок петрушки, который будет весело бегать за вами
по пятам и проращивать свои семена в ваших тапках.
Статья или пост в блоге (сложный вариант)
Достаньте с чердака коробку с полусотней резиновых уточек,
оставшихся после празднования нового года. Из уточек
и горящих свечей выложите пентаграмму на полу комнаты.
Сядьте посередине в позу лотоса, в каждую руку возьмите
по немецко-бразильскому словарю, прокашляйтесь, наберите
полную грудь воздуха и громко и уверенно,
с полной самоотдачей скажите "Кря!"
