Изображения 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
Примеры использования:
Простой список
- Первое
- Второе
- Третье
Картинка пользователя (юзерпик)
Галерея
Навигация
Виджет в боковой колонке
Блок новостей
Вчерашние новости
Соревнования среди воблы по конькобежному спорту
Победила команда килек из Петрозаводска
Читать дальшеУчёные уточнили роль напильника в уходе за ногтями
Британские учёные высоко оценили вклад напильника в отращивание полутораметровых ногтей.
Не читать дальше
Статья или пост в блоге (простой вариант)
Нащупываем чакры у пучка петрушки
Сходите на рынок и купите у старушек пучок петрушки грамм на 100. Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном, вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь к пучку петрушки. Ласково взгляните на него и как следует почешите за ухом, можно себе или коту. Перевяжите атласной ленточкой, непременно завяжите бант. Поздравляем! Теперь у вас есть полностью одомашненный пучок петрушки, который будет весело бегать за вами по пятам и проращивать свои семена в ваших тапках.
Статья или пост в блоге (сложный вариант)
Резиновые уточки как способ самопознания
Достаньте с чердака коробку с полусотней резиновых уточек, оставшихся после празднования нового года. Из уточек и горящих свечей выложите пентаграмму на полу комнаты. Сядьте посередине в позу лотоса, в каждую руку возьмите по немецко-бразильскому словарю, прокашляйтесь, наберите полную грудь воздуха и громко и уверенно, с полной самоотдачей скажите "Кря!"