Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yoksel/common-words
🧐 Слова, часто используемые в CSS-классах
https://github.com/yoksel/common-words
Last synced: about 2 months ago
JSON representation
🧐 Слова, часто используемые в CSS-классах
- Host: GitHub
- URL: https://github.com/yoksel/common-words
- Owner: yoksel
- Created: 2016-05-31T15:50:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-29T07:34:06.000Z (about 1 year ago)
- Last Synced: 2024-07-25T13:48:55.428Z (about 2 months ago)
- Homepage:
- Size: 61.5 KB
- Stars: 3,125
- Watchers: 149
- Forks: 1,254
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Слова, часто используемые в CSS-классах
## Изображения
`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
## Примеры использования
### Простой список
```html
- Первое
- Второе
- Третье
```
### Картинка пользователя (юзерпик)
```html
```
### Галерея
```html
```
### Навигация
```html
Главная
Второстепенная
Третья с конца
Предпоследняя
Совсем конец
```
```html
```
### Виджет в боковой колонке
```html
```
### Блок новостей
```html
Вчерашние новости
-
Соревнования среди воблы по конькобежному спорту
-
Учёные уточнили роль напильника в уходе за ногтями
Британские учёные высоко оценили вклад
напильника в отращивание полутораметровых ногтей.
```
### Статья или пост в блоге (простой вариант)
```html
Нащупываем чакры у пучка петрушки
Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
к пучку петрушки. Ласково взгляните на него и как следует почешите
за ухом, можно себе или коту. Перевяжите атласной ленточкой,
непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
одомашненный пучок петрушки, который будет весело бегать за вами
по пятам и проращивать свои семена в ваших тапках.
```
### Статья или пост в блоге (сложный вариант)
```html
Резиновые уточки как способ самопознания
Достаньте с чердака коробку с полусотней резиновых уточек,
оставшихся после празднования нового года. Из уточек
и горящих свечей выложите пентаграмму на полу комнаты.
Сядьте посередине в позу лотоса, в каждую руку возьмите
по немецко-бразильскому словарю, прокашляйтесь, наберите
полную грудь воздуха и громко и уверенно,
с полной самоотдачей скажите "Кря!"
```