блоки
page
- кореневий елемент сторінки
header
- шапка (сторінки або елементу)
footer
- земельна ділянка (сторінки або елементу)
section
- розділ контенту (один з декількох)
body
- основна частина (сторінки або елементу)
content
- вміст елемента
sidebar
- бічна колонка (сторінки або елементу)
aside
- блок з додатковою інформацією
widget
- віджет, наприклад, в боковій колонці
розкладка
wrapper
, wrap
- обгортка, зазвичай зовнішня
inner
- внутрішня обгортка
container
, holder
, box
- контейнер
grid
- розкладка (сторінки або елемента) у вигляді сітки (зазвичай містить в собі row
і col
)
row
- контейнер у вигляді рядка
col
, column
- контейнер у вигляді стовпчика
елементи управління
button
, btn
- кнопка, наприклад, для відправки форми
control
- елемент управління, наприклад, стрілки «Вперед / назад» в фотогалереї, кнопки управління слайдером
dropdown
- випадаючий список
текст
title
, subject
, heading
, headline
, caption
- заголовок
subtitle
- підзаголовок
slogan
- слоган
lead
, tagline
- лід-абзац в тексті
text
- текстовий контент
desc
- опис, варіант текстового контенту
excerpt
- уривок тексту, зазвичай використовується перед посиланням «Читати далі ...»
link
- посилання
copyright
, copy
- копірайт
списки
list
, items
- список
item
- елемент списку
зображення
image
, img
, picture
, pic
- картинка
icon
- іконка
logo
- логотип
userpic
, avatar
- юзерпік, маленька картинка користувача
thumbnail
, thumb
- мініатюра, зменшене зображення
Медіавираженія
phone
, mobile
- мобільні пристрої
phablet
- телефони з великим екраном (6-7 ")
tablet
- планшети
notebook
, laptop
- ноутбуки
desktop
- настільні комп'ютери
Розміри
tiny
- маленький, крихітний
small
- невеликий
medium
- середній
big
, large
- великий
huge
- величезний
narrow
- вузький
wide
- широкий
стану
active
, current
- активний елемент, наприклад, поточний пункт меню
hidden
- прихований елемент
error
- статус помилки
warning
- статус попередження
success
- статус успішного виконання завдання
pending
- стан очікування, наприклад, перед зміною статусу на error або success
додатково
search
- пошук
socials
- блок іконок соцмереж
advertisement
, adv
, commercial
, promo
- рекламний блок (ріжуться Адблоком, не рекомендується використовувати такі класи для блоків з внутрішньою рекламою)
features
, benefits
- список основних особливостей товару, послуги
slider
, carousel
- слайдер, інтерактивний елемент з прокруткою вмісту
pagination
- посторінкова навігація
user
, author
- користувач, автор запису або коментаря
meta
- блок з додатковою інформацією, наприклад, блок тегів і дати в пості
cart
, basket
- корзина
breadcrumbs
- навігаційна ланцюжок, «хлібні крихти»
more
, all
- посилання на повну інформацію
modal
- модальне (діалогове) вікно
popup
- спливаюче вікно
tooltip
, tip
- спливаючі підказки
preview
- анонс, уривок, наприклад новини або поста, може складатися з заголовка, опису і картинки. Передбачається посилання на повну версію
Коментарі
Дописати коментар