├── CODE_OF_CONDUCT.md ├── LICENSE.txt ├── README.md └── SECURITY.md /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [frontendlovers@gmail.com](mailto:frontendlovers@gmail.com). 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Frontend Lovers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Популярні слова у CSS-класах 2 | 3 | Веб-розробка часто потребує використання зрозумілих і уніфікованих CSS-класів для стилізації елементів. Нижче наведено категорії з найбільш вживаними словами, які допоможуть підтримувати ваш код чистим і структурованим. 4 | 5 | --- 6 | 7 | ## 🏠 Основні блоки сторінки 8 | 9 | | Слово | Приклад класу | Опис | 10 | | -------------- | ------------------ | ----------------------------- | 11 | | `page` | `.page` | Кореневий елемент сторінки | 12 | | `header` | `.page-header` | Шапка (сторінки чи елемента) | 13 | | `footer` | `.page-footer` | Підвал (сторінки чи елемента) | 14 | | `section` | `.about-section` | Розділ контенту | 15 | | `main`, `body` | `.main-content` | Основна частина | 16 | | `content` | `.article-content` | Вміст елемента | 17 | | `sidebar` | `.sidebar-menu` | Бокова колонка | 18 | | `aside` | `.news-aside` | Додатковий блок інформації | 19 | | `widget` | `.search-widget` | Віджет | 20 | 21 | --- 22 | 23 | ## 🖼️ Зображення 24 | 25 | | Слово | Приклад класу | Опис | 26 | | -------------------- | ----------------- | -------------------------------------- | 27 | | `image`, `img` | `.product-image` | Зображення | 28 | | `icon` | `.search-icon` | Іконка | 29 | | `logo` | `.site-logo` | Логотип | 30 | | `userpic`, `avatar` | `.user-avatar` | Аватар користувача | 31 | | `thumbnail`, `thumb` | `.post-thumbnail` | Мініатюра | 32 | | `hero` | `.hero-banner` | Великий банер | 33 | | `gallery` | `.image-gallery` | Галерея зображень | 34 | | `lightbox` | `.lightbox-view` | Модальне вікно для перегляду зображень | 35 | 36 | --- 37 | 38 | ## 📝 Текстові елементи 39 | 40 | | Слово | Приклад класу | Опис | 41 | | ---------------------------------------------------- | ----------------- | ----------------- | 42 | | `title`, `heading`, `headline`, `caption`, `subject` | `.main-title` | Заголовок | 43 | | `subtitle` | `.card-subtitle` | Підзаголовок | 44 | | `slogan` | `.brand-slogan` | Слоган | 45 | | `lead`, `tagline` | `.lead-text` | Лід-абзац | 46 | | `text` | `.content-text` | Текстовий контент | 47 | | `desc` | `.item-desc` | Опис | 48 | | `excerpt` | `.post-excerpt` | Відривок тексту | 49 | | `quote`, `blockquote` | `.quote-block` | Цитата | 50 | | `snippet` | `.code-snippet` | Приклад коду | 51 | | `link` | `.footer-link` | Посилання | 52 | | `copyright`, `copy` | `.site-copyright` | Копірайт | 53 | 54 | --- 55 | 56 | ## 📋 Списки 57 | 58 | | Слово | Приклад класу | Опис | 59 | | --------------- | --------------- | -------------- | 60 | | `list`, `items` | `.feature-list` | Список | 61 | | `item` | `.list-item` | Елемент списку | 62 | 63 | --- 64 | 65 | ## 🎛️ Елементи управління 66 | 67 | | Слово | Приклад класу | Опис | 68 | | --------------- | --------------- | ------------------ | 69 | | `button`, `btn` | `.submit-btn` | Кнопка | 70 | | `control` | `.form-control` | Елемент управління | 71 | | `dropdown` | `.nav-dropdown` | Випадаючий список | 72 | 73 | --- 74 | 75 | ## 📱 Медіа-запити 76 | 77 | | Слово | Приклад використання | Опис | 78 | | -------------------- | ---------------------------- | -------------------------------- | 79 | | `mobile`, `phone` | `@media (max-width: 600px)` | Стилі для мобільних пристроїв | 80 | | `phablet` | `@media (max-width: 768px)` | Телефони з великими екранами | 81 | | `tablet` | `@media (max-width: 1024px)` | Стилі для планшетів | 82 | | `notebook`, `laptop` | `@media (max-width: 1200px)` | Стилі для ноутбуків | 83 | | `desktop` | `@media (min-width: 1200px)` | Стилі для настільних комп’ютерів | 84 | 85 | --- 86 | 87 | ## 📏 Розміри 88 | 89 | | Слово | Приклад класу | Опис | 90 | | -------------------- | ------------------- | ----------- | 91 | | `tiny`, `xs` | `.btn-xs` | Маленький | 92 | | `small`, `sm` | `.btn-small` | Невеликий | 93 | | `medium`, `base` | `.btn-medium` | Середній | 94 | | `big`, `large`, `lg` | `.btn-large` | Великий | 95 | | `huge`, `xl` | `.container-xl` | Гігантський | 96 | | `narrow` | `.container-narrow` | Вузький | 97 | | `wide` | `.container-wide` | Широкий | 98 | 99 | --- 100 | 101 | ## 🔧 Додаткові елементи 102 | 103 | | Слово | Приклад класу | Опис | 104 | | --------------------------------------------- | ----------------------- | ------------------------------------- | 105 | | `search` | `.search-bar` | Пошук | 106 | | `socials` | `.social-icons` | Іконки соцмереж | 107 | | `advertisement`, `adv`, `commercial`, `promo` | `.advertisement-banner` | Рекламний блок | 108 | | `features`, `benefits` | `.product-features` | Особливості товару | 109 | | `slider`, `carousel` | `.carousel-slider` | Слайдер | 110 | | `pagination` | `.page-pagination` | Посторінкова навігація | 111 | | `user`, `author` | `.post-author` | Автор запису | 112 | | `meta` | `.post-meta` | Блок з додатковою інформацією | 113 | | `cart`, `basket` | `.cart-items` | Корзина | 114 | | `breadcrumbs` | `.breadcrumb-nav` | Хлібні крихти / Навігаційний ланцюжок | 115 | | `more`, `all` | `.read-more-link` | Посилання на більше | 116 | | `modal` | `.modal-window` | Модальне вікно | 117 | | `popup` | `.popup-window` | Вспливаюче вікно | 118 | | `tooltip`, `tip` | `.tooltip-text` | Підказка | 119 | | `preview` | `.post-preview` | Попередній перегляд | 120 | | `overlay` | `.overlay-layer` | Перекриваючий шар | 121 | 122 | --- 123 | 124 | ## 🌟 Стани елементів 125 | 126 | | Слово | Приклад класу | Опис | 127 | | ------------------- | ---------------- | ------------------- | 128 | | `active`, `current` | `.active-item` | Активний елемент | 129 | | `visible` | `.visible-item` | Видимий елемент | 130 | | `hidden` | `.hidden-item` | Прихований елемент | 131 | | `error` | `.error-state` | Статус помилки | 132 | | `warning` | `.warning-state` | Статус попередження | 133 | | `success` | `.success-state` | Статус успіху | 134 | | `pending` | `.pending-state` | Стан очікування | 135 | 136 | --- 137 | 138 | ## 🗃️ Контейнери 139 | 140 | | Слово | Приклад класу | Опис | 141 | | ---------------------------- | ---------------- | ---------------------------------------------------------------------------- | 142 | | `wrapper`, `wrap` | `.wrapper` | Обгортка, зазвичай зовнішня | 143 | | `inner` | `.inner-wrapper` | Внутрішня обгортка | 144 | | `container`, `holder`, `box` | `.container` | Контейнер | 145 | | `grid` | `.grid` | Макет сторінки або елемента у вигляді сітки (зазвичай містить `row` і `col`) | 146 | | `row` | `.row` | Контейнер у вигляді рядка | 147 | | `col`, `column` | `.col` | Контейнер у вигляді стовпця | 148 | 149 | --- 150 | 151 | ## Приклад використання: 152 | 153 | - HTML 154 | 155 | ```html 156 | 164 | ``` 165 | 166 | - CSS 167 | 168 | ```css 169 | .nav { 170 | background-color: #f8f9fa; 171 | padding: 10px; 172 | } 173 | 174 | .list { 175 | list-style: none; 176 | padding: 0; 177 | margin: 0; 178 | display: flex; 179 | } 180 | 181 | .item { 182 | margin-right: 10px; 183 | } 184 | 185 | .link { 186 | text-decoration: none; 187 | color: #007bff; 188 | } 189 | 190 | .link:hover { 191 | text-decoration: underline; 192 | } 193 | 194 | .item.active .link { 195 | font-weight: bold; 196 | color: #333; 197 | } 198 | ``` 199 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # 🔒 Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | If you discover a security issue in any of my projects, I would greatly appreciate your help in resolving it responsibly. Here's how you can report it: 6 | 7 | 1. **Contact me:** 8 | Please send an email to **[frontendlovers@gmail.com](mailto:frontendlovers@gmail.com)** with: 9 | 10 | - A clear description of the issue. 11 | - Steps to reproduce the vulnerability. 12 | - Any relevant code or logs for better understanding. 13 | 14 | 2. **Handling process:** 15 | 16 | - I will acknowledge your report within **48 hours**. 17 | - Together, we will work on resolving the issue as quickly as possible. 18 | 19 | 3. **Confidentiality:** 20 | Please keep the details of the vulnerability private until it has been resolved. 21 | 22 | Your cooperation helps ensure the safety and security of my work. Thank you for contributing to a safer tech environment! 🙌 23 | --------------------------------------------------------------------------------