├── .editorconfig ├── README.md ├── design └── naming-conventions.md └── frontend ├── bem.md ├── codestyle.md ├── files └── .csscomb.json ├── form-work.md ├── getting-project.md ├── links.md ├── naming-conventions.md ├── plugins.md ├── prod-layout.md ├── pure-layout.md └── settings-windows.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in 2 | # this file, please see the EditorConfig documentation: 3 | # http://editorconfig.org/ 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_size = 2 11 | indent_style = tab 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Guidelines 2 | 3 | ## Design 4 | 5 | ### Інформація 6 | * [Naming conventions](https://github.com/ideus-team/guidelines/blob/master/design/naming-conventions.md) 7 | 8 | ## Frontend / WordPress 9 | 10 | ### Налаштування 11 | * [Встановлення оточення під Windows](https://github.com/ideus-team/guidelines/blob/master/frontend/settings-windows.md) 12 | 13 | ### Інструменти 14 | * [HTML framework](https://github.com/ideus-team/html-framework) 15 | * [Бібліотека блоків](https://github.com/ideus-team/bem-snippets) (не підтримується) 16 | * [Стандартні плагіни](https://github.com/ideus-team/guidelines/blob/master/frontend/plugins.md) 17 | * [Інформація щодо роботи з WordPress](https://github.com/ideus-team/wordpress) 18 | * [Сторонні сервіси](https://github.com/ideus-team/guidelines/blob/master/frontend/links.md) 19 | 20 | ### Інформація 21 | * [Codestyle](https://github.com/ideus-team/guidelines/blob/master/frontend/codestyle.md) 22 | * [BEM-діалект](https://github.com/ideus-team/guidelines/blob/master/frontend/bem.md) 23 | * [Naming conventions](https://github.com/ideus-team/guidelines/blob/master/frontend/naming-conventions.md) 24 | * [WordPress Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/) 25 | 26 | ### Чеклісти 27 | * [Чекліст при отриманні проекту/завдання](https://github.com/ideus-team/guidelines/blob/master/frontend/getting-project.md) 28 | * [Чекліст роботи з формами відправлення email](https://github.com/ideus-team/guidelines/blob/master/frontend/form-work.md) 29 | * [Чекліст здачі верстки у чистому вигляді](https://github.com/ideus-team/guidelines/blob/master/frontend/pure-layout.md) 30 | * [Чекліст здачі проекту у продакшн](https://github.com/ideus-team/guidelines/blob/master/frontend/prod-layout.md) 31 | * [Чекліст оптимізації швидкості завантаження](https://github.com/delka/WebPerformanceChecklist) 32 | -------------------------------------------------------------------------------- /design/naming-conventions.md: -------------------------------------------------------------------------------- 1 | # Naming conventions 2 | Угода про назву файлів. 3 | 4 | ## Структура папок 5 | Макети та все до них складається на мережеве сховище NewExchange в теку /projectName/design/ 6 | ``` 7 | /design/ 8 | /design/fonts/ 9 | /design/graphics/ (для стокових фото, вектора, кліпартів) 10 | /design/PSD/ 11 | ``` 12 | 13 | ## PSD 14 | ``` 15 | home_page_01_01_031314.psd 16 | internal_page_02_01_031314.psd 17 | ``` 18 | 1. Ніяких пробілів у назвах, всі літери малі 19 | 2. Назви файлів виключно англійською, назва файлу має бути зрозумілою. Тобто, дивлячись на назву файлу, має бути зрозуміло, що всередині – наприклад: home_01.psd, internal_page_01.psd, etc. 20 | 3. Формат файлу скрізь де не вказано інше - PSD, для попередніх макетів - PNG24 21 | 4. Дата вписується останньою в американському форматі MMDDYY `******_031314.psd` 22 | 5. Авторство. Тут якщо нема запари, пропоную вписувати прізвища в метадані https://clip2net.com/s/6EbauY. Якщо поспіх, можна не робити, але прагнемо єдиного порядку. Вписувати і в PSD, і в PNG. 23 | -------------------------------------------------------------------------------- /frontend/bem.md: -------------------------------------------------------------------------------- 1 | # BEM-діалект iDeus 2 | 3 | Ми використовуємо BEM CSS — тобто BEM-методологію тільки стосовно CSS: без i-bem.js, bemjson, bem-tools — ось цього всього. 4 | Відповідно до [класифікації Харісова](http://download.yandex.ru/company/experience/subbotnik/minsk_harisov.pdf) (сторінка 83) у нас схема: 5 | * Блоки в окремих файлах-папках (розділені всередині scss, img, js, а не по блоках) 6 | * + Префікси 7 | * + АНБ 8 | * + Модикатори в одному файлі (немає рівнів перевизначення) 9 | * немає i-bem.js 10 | * немає збірки 11 | 12 | ## Відмінності від канонічного Yandex BEM-діалекту 13 | 1. Код пишеться вручну без bem-tools 14 | 2. Всі блоки і модифікатори в одному файлі 15 | 3. js-хуки замість i-bem.js 16 | 3. Використовуються префікси, оскільки є legacy-код (старий + сторонніх бібліотек) 17 | * b — блок 18 | * l — layout (блок, що використовується для розкладки) 19 | * g — глобальний модифікатор (наприклад, g-tel) 20 | * js — для JS-хуків 21 | 4. Скорочені модифікатори через multiple classes `class="b-blockName__elementName -modifier_value"`. 22 | Стилі модифікаторів не пишуться без прив'язки до імені блоку `.b-block_modifier_value {} = .b-block.-modifier_value {}` 23 | 5. Синтаксіс виду: `.b-blockName__elementName.-modifier_value {}` 24 | 25 | ## Техпроцес 26 | * Генерації html-коду немає (на жаль, ми хочемо, але у нас немає одного великого проекту, що об'єднує все, а є (як у більшості) купа дрібних). 27 | * Сбірка відбувається через Grunt+Sass. 28 | * Бібліотека блоків — пишеться руками, використовується копіпаст та правки під конкретні потрібні. Оновлення блоків відбувається за принципом «новий проект → полізли скопіпастити код із бібліотеки → побачили, що там чогось бракує або щось неправильно → оновили в бібліотеці». У існуючі проекти поновлення блоків з бібліотеки не розкочуються, всі проекти автономні. (Ця інформація застаріла, ми вже не підтримуємо бубліотеку блоків зараз) 29 | * Модифікатори обтяжують вагу селекторів, за 9 років проблем жодного разу не було. 30 | -------------------------------------------------------------------------------- /frontend/codestyle.md: -------------------------------------------------------------------------------- 1 | This document outlines the way @iDeus_team is expected to write their HTML markup. Following this document ensures that everyone is writing markup is doing so with good practices and accessibility in mind. 2 | This document borrows ideas from: 3 | * [Google's HTML Style Guide](https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) 4 | * [SMACSS](http://smacss.com/book/formatting) 5 | * [CSS Guidelines by Harry Roberts](http://cssguidelin.es/) 6 | 7 | Ми навмисно скорочуємо правила для зручності читання і не пишемо в стилі КО a-la "Separate structure from presentation from behavior" та "Items in list form should always be in `