Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yk911/basic-dictionary
Helpful basic dictionary for developers and designers
https://github.com/yk911/basic-dictionary
Last synced: 7 days ago
JSON representation
Helpful basic dictionary for developers and designers
- Host: GitHub
- URL: https://github.com/yk911/basic-dictionary
- Owner: YK911
- License: mit
- Created: 2023-09-01T21:50:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-03T20:39:49.000Z (12 months ago)
- Last Synced: 2024-11-17T00:29:54.858Z (2 months ago)
- Homepage: https://yk911.github.io/basic-dictionary/
- Size: 746 KB
- Stars: 65
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Словник базових термінів для розробників-початківців та дизайнерів 📔
## Блоки
`page` — кореневий елемент сторінки
`header` — шапка (сторінки чи елемента)
`footer` — підвал (сторінки чи елемента)
`section` — великий розділ, що об'єднує вміст за смисловим значенням
`main`, `body` — основна частина (сторінки чи елемента)
`navigation`, `nav` - основна навігація (сторінки чи елемента)
`content` — вміст елемента
`sidebar`, `navbar` — бокова колонка (сторінки чи елемента)
`aside` — блок з додатковою інформацією
`widget` — віджет, наприклад, в боковій колонці
## Компонування шарів
`container`, `holder`, `box` — основний контейнер сторінки
`wrapper`, `wrap` — обгортка, як правило зовнішня
`inner` — внутрішня обгортка
`grid` — сітка сторінки чи елемента (зазвичай містить рядки і колонки та внутрішні відступи)
`row` — контейнер у вигляді рядка
`col`, `column` — контейнер у вигляді колонки
## Списки
`list`, `items` — список
`item` — один пункт списка
## Текст
`title`, `subject`, `heading`, `headline`, `caption` — заголовок
`subtitle` — підзаголовок
`slogan` — слоган
`lead`, `tagline` — лід-абзац (абзац під заголовком, задача якого спонукати користувача переглядати сторінку далі)
`text` — текстовий контент
`desc` — опис, варіант текстового контенту
`excerpt` — уривок тексту (зазвичай використовується перед посиланням «Читати далі...»)
`quote`, `blockquote` — цитата
`snippet` — приклад вставки з кодом
`copyright`, `copy` — копірайт
## Зобарження
`image`, `img`, `picture`, `pic` — зображення (фотореалістичне)
`icon` — іконка
`logo` — логотип
`userpic`, `avatar` — юзерпік, картинка превʼю користувача
`thumbnail`, `thumb` — мініатюра, зменшене зображення
`ill`, `illustration` — ілюстрація для візуалізації змісту
## Інтерактивні елементи
`button`, `btn` — кнопка, наприклад, для відправки форми чи відкриття попап вікна
`link` — посилання
`control` — елемент контролю, наприклад, стрілки «вперед|назад» для слайдера
`dropdown` — випадаючий список
`tag`, `label` - мітка (підпис) поля для введення даних
`field` — поле для введення даних (зазвичай використовується у формах)
`switcher`, `toggler` — перемикач стану
## Різне
`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` — перекриваючий шар, наприклад, для накладання декоративних ефектів на изображення чи створення затемненої підложки у модальних вікнах
`backdrop` — фон, для відведення уваги від основного контенту на сторінці і переведення фокусу користувача на спливаючий елемент
## Розміри
`tiny`, `xs` — крихітний
`small`, `sm` — маленький
`medium`, `base` — середній
`big`, `large`, `lg` — великий
`huge`, `xl` — величезний
`narrow` — вузький
`wide` — широкий
## Стани
`active`, `current` — активний елемент, наприклад, поточний пункт меню
`visible` — видимий елемент
`hidden` — прихований елемент
`error` — статус помилки
`warning` — статус попередження
`success` — статус успішного виконання задачі
`pending` — стан очікування, наприклад, при зміні статусу з **_error_** на **_warning_**
## Медіавирази для опису пристроїв
`phone`, `mobile` — мобільні пристрої
`phablet` — телефони з великими екранами (6-7")
`tablet` — планшети
`notebook`, `laptop` — ноутбуки
`desktop` — стаціонарні компʼютери
## Приклади використання
### Простий список
```html
- Перший елемент
- Други елемент
- Третій елемент
```
### Список посилань на соціальні мережі
```html
```
### Картинка користувача (юзерпік)
```html
```
### Галерея зображень
```html
```
### Навігація
```html
Home
Studio
Portfolio
Contacts
```
```html
```
### Віджет в боковій колонці
```html
```
### Новинний блок
```html
Latest news
-
The king is made of paper
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
sit amet adipiscing sem neque sed ipsum.
-
Oh, I guess they have the blues
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
sit amet adipiscing sem neque sed ipsum.
```
### Стаття в блозі чи публікація (простий варіант)
```html
Oh, I guess they have the blues
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
```
### Стаття в блозі чи публікація (складний варіант)
```html
The blind man
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
```