├── .editorconfig ├── frontend ├── form-work.md ├── getting-project.md ├── links.md ├── settings-windows.md ├── bem.md ├── prod-layout.md ├── naming-conventions.md ├── pure-layout.md ├── plugins.md ├── codestyle.md └── files │ └── .csscomb.json ├── design └── naming-conventions.md └── README.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 | -------------------------------------------------------------------------------- /frontend/form-work.md: -------------------------------------------------------------------------------- 1 | # Робота з формами відсилання Email 2 | 3 | 1. На час тестування/розробки вимкнути відправлення даних із форми на email клієнта. 4 | 2. Замість email-у клієнта поставити свою або тестову адресу. 5 | 3. Знайти всі послуги аналітики, які використовуються для відстеження підрахунків відправок даних із форми. 6 | 4. Прибрати скрізь інкрименти аналітики при надсиланні даних з форми (Google Analitics та інші). Це можуть бути різні функції в JavaScript файлах. 7 | -------------------------------------------------------------------------------- /frontend/getting-project.md: -------------------------------------------------------------------------------- 1 | # Чекліст при отриманні проєкту 2 | 3 | ## Головні вимоги 4 | 5 | 1. Наявність та доступність макетів. 6 | 2. Чи розшарені для тебе доступи у Сonfluence/ActiveCollab. 7 | 3. Наявність Git/SVN репозиторію, а також доступів до FTP/SFTP та інші доступи, які необхідні для виконання завдання. 8 | 4. Викачати проєкт з репозиторію. 9 | 5. Встановлення всіх компонентів Grunt/Gulp. 10 | 6. Перевірка компіляції проєкту, щоб не було помилок у консолі. 11 | 7. Підключення до FTP/SFTP. 12 | 8. Перевірка працездатності dev-сервера. Якщо dev-сервер не створено → створити самостійно або звернутися до Team lead. 13 | 9. Якщо на проєкті йде розробка "бранчами", то створити окремий бранч (git branch — гілка) під своє завдання та працювати із ним. 14 | 10. Перевірити всю необхідну інформацію для роботи із завданням. Якщо щось не зрозуміло чи чогось не вистачає – звернутися до менеджера проєкту. 15 | -------------------------------------------------------------------------------- /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/links.md: -------------------------------------------------------------------------------- 1 | # Online services 2 | - Formatting 3 | * [HTML](http://www.freeformatter.com/html-formatter.html) 4 | * [CSS](http://csscomb.com/online) 5 | - Tidy 6 | * [HTML](https://infohound.net/tidy/) ([настройки](https://pbs.twimg.com/media/CQi9HwCWIAAuVlc.png)) 7 | - Fonts 8 | * [What's the closest Google font to...](http://joelcrawfordsmith.com/closest-font/) 9 | - Compress 10 | * [HTML/CSS/JS](http://refresh-sf.com/) 11 | * [PNG](http://compresspng.com/) (конвертація PNG24 у PNG8+Alpha канал+оптимізація) 12 | * [JPG](http://compressjpeg.com/) 13 | * [SVG](https://jakearchibald.github.io/svgomg/) 14 | * [Base64](http://b64.io/) 15 | * [SVG url-encode in background](https://yoksel.github.io/url-encoder/) 16 | - Performance 17 | * [GTmetrix](http://gtmetrix.com/) 18 | * [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) 19 | - Convert 20 | * [SWF 2 SVG](http://riaxe.com/online-swf-to-svg-converter/) 21 | - Spinners 22 | * [1](http://tobiasahlin.com/spinkit/), [2](http://projects.lukehaas.me/css-loaders/), [3](http://connoratherton.com/loaders) 23 | - Work with video 24 | * [XviD4PSP Unoficial by forclip](https://code.google.com/p/xvid4psp/) 25 | * [FLV Extract](http://www.moitah.net/) 26 | - Code Generation 27 | * [CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) 28 | - Screenshot Generators 29 | * https://launchkit.io/ 30 | * http://mockuphone.com/ 31 | * https://placeit.net/ (commercial!) 32 | -------------------------------------------------------------------------------- /frontend/settings-windows.md: -------------------------------------------------------------------------------- 1 | # OS settings 2 | 3 | ## 1. Install Git 4 | ### 1.1 Install [Git for Windows](https://git-scm.com/downloads/): 5 | - Next → Next 6 | - **Ajusting your PATH environtment** — select "Use Git from the Windows command prompt" 7 | - **Configuring the line endings conversions** — select "Checkout as-is, commit as-is" 8 | - and Next → Next and so on. 9 | 10 | 11 | ### 1.2 Install [TortoiseGit](https://code.google.com/p/tortoisegit/wiki/Download) 12 | x64 version. Next → Next → Done. 13 | Start → Tortoise Git → Settings: 14 | - **Git** — Set "Name" & Email" for **Global** config source 15 | 16 | ## 2. GitHub 17 | Реєструємося на [GitHub](https://github.com/), якщо ще не зареєстровані. Стукаємо до https://github.com/ideus-team 18 | 19 | ## 3. Встановлюємо софт з [HTML-framework](https://github.com/ideus-team/html-framework) 20 | Кроки 1-5 21 | 22 | ## 4. Налаштування 23 | ### Винятки SVN/Git 24 | ``` 25 | dev/.sass-cache 26 | dev/node_modules 27 | css/main.css 28 | js/scripts.js 29 | ``` 30 | 31 | ### Винятки Total Commander / WinSCP / etc. 32 | ``` 33 | .svn 34 | .git 35 | .sass-cache 36 | node_modules 37 | Thumbs.db 38 | desktop.ini 39 | ``` 40 | 41 | Причини: 42 | 1. При комміті вони потраплятимуть у SVN/Git, але це немає сенсу для службових файлів (сміття). 43 | 2. Для генерованих файл зберігання SVN/Git створює конфлікти merge. 44 | 3. При синхронізації з FTP вони потраплятимуть на сайт, а це не має сенсу (сміття). 45 | 4. Службові файли SVN і GIT з появою на FTP є дірою у безпеці бо вони містять вихідники сайту. 46 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/prod-layout.md: -------------------------------------------------------------------------------- 1 | # Чеклист сдачи проекта в продакшн 2 | 3 | **Для выдачи проекта в продакшн нужно так же соблюдать все правила из [чеклиста сдачи верстки в чистом виде](https://github.com/ideus-team/guidelines/blob/master/frontend/pure-layout.md)** 4 | 5 | Для того, чтобы убедиться качеству продакшн версии, нужно еще учесть следующие пункты: 6 | 7 | 1. Нет никаких инструкций в файлах ``.htaccess`` и ``robots.txt``, которые запрещают индексацию сайта\приложения. 8 | 2. После обработки вашей верстки программистом(и) могут появиться не соответствия js логики, которую вы закладывали. Может отвалиться какой-то функционал. Нуэжно обязательно проверить все динамические сценарии, которые вы реализовали при разработке проекта до продакшн релиза. 9 | 3. Отсутствие ошибок и предупреждений в консоли. 10 | 4. Наличие стандартных стилей для контентных страниц или контента, который может редактироваться с помощью wysiwyg из админки. 11 | 5. Сняты все пароли\ограничения, которые могли бы быть для каких-либо разделов или сайта\приложения в целом. 12 | 6. Нет закомментированых(старых\старого функционала) в css\html\php\js etc. файлах. 13 | 7. Нет ни где стандартных\статических заголовков страниц, которые не относятся к проекту. Пример: ``Just another WordPress site`` :) 14 | 8. Итоговый продукт не тормозит в браузерах. Не всегда проблема на стороне сервера. Нужно провести несколько тестов Chrome DevTools во вкладке Timeline. Если же при загрузке или дальнейшей работе страниц вы наблюдаете красные пики в диаграмме, то возможно, что где-то вы не учли о перерисовке элемента, в проекте получился избыток теней у элементов и прочее. Эти моменты нужно обсудить с менеджером\клиентом и прийти к лучшему перфомансу. 15 | 9. Возможно, но не обязательно, наличие [critical CSS](https://www.smashingmagazine.com/2015/08/understanding-critical-css/) между тегами `` ... ``. 16 | 10. Убедиться, что все формы каких-либо подписок, уведомлений и прочее связаны и отправляются и email клиента. 17 | 11. Проставить скрипт Google Analytics на сайте. Если нужен аккаунт клиента - запросить. Если нет, ставить корпоративный. Уточнять у менеджера проекта. 18 | -------------------------------------------------------------------------------- /frontend/naming-conventions.md: -------------------------------------------------------------------------------- 1 | # Naming conventions 2 | Угода про іменування блоків та файлів. 3 | 4 | ## Структура тек 5 | ``` 6 | /assets/css/ 7 | /assets/img/ 8 | /assets/js/ 9 | /dev/ 10 | /dev/src/img/ 11 | /dev/src/js/ 12 | /dev/src/sass/ 13 | ``` 14 | 15 | ## Сторінки 16 | `маленькі-літери-через-тире.html` 17 | Назва має бути англійською (а не translitom), відображати сенс сторінки та гарно виглядати. Думайте головою, щоб не створювати сторінки типу econom_landing_30.html. 18 | 19 | ## Тестові файли 20 | Тестові файли повинні мати префікс `test-номерТікету-`. 21 | Наприклад `test-2567-script.js`. 22 | 23 | ## CSS 24 | `/dev/src/sass/*` 25 | Наші блоки — лише префікс `b-`. 26 | Блоки бібліотеки - по назві бібліотеки (наприклад `mdl-`). _НЕ МОЖНА писати нові блоки з префіксом бібліотеки!_ 27 | 28 | SCSS для l-блоков виноситься в окремі `_blockName.scss`-файли в теці `dev/sass/blocks`. 29 | В `main.scss` вони підключаються через `@import 'blocks/blockName';` 30 | 31 | ## Зображення 32 | `/dev/src/img/*` 33 | Необхідно додавати суфікси: `-bg`, `-btn` и т.д., а для временных заглушек префикс `temp-`. 34 | * bg : background тобто для фонових зображень та фонів 35 | * btn : button, кнопки 36 | * ill : illustartion — для зображень-ілюстрацій 37 | * photo : для фотографій 38 | * logo : для логотипів 39 | * ico : icons — для іконок 40 | * text : для текстових написів, збережених як зображення 41 | Наприклад: `socialLinks-ico.png`,`temp-someImageName.png`. 42 | 43 | ## JS 44 | `/dev/src/js/*` 45 | JS для окремих JS-блоків можуть виноситися в окремі файли. 46 | 47 | ## Стандартні імена класів 48 | ```scss 49 | .b-block__list // список 50 | .b-block__item // елемент списку 51 | .b-block__link // посилання 52 | ``` 53 | 54 | ```scss 55 | .b-block__ill // блок під зображення 56 | .b-block__img // безпосередньо саме зображення 57 | ``` 58 | 59 | ```scss 60 | .b-block__header // блок під заголовок 61 | .b-block__title // безпосередньо сам заголовок 62 | ``` 63 | 64 | ## Стандартні імена модифікаторів 65 | ```scss 66 | &.-num_1 // номер 67 | &.-style_big // зовнішній вигляд 68 | &.-type_facebook // різновид, тип 69 | &.-state_active // стан 70 | ``` 71 | -------------------------------------------------------------------------------- /frontend/pure-layout.md: -------------------------------------------------------------------------------- 1 | # Чеклист сдачи верстки в чистом виде 2 | 3 | Большинство пунктов взято из чеклиста [html5checklist](https://github.com/ihorzenich/html5checklist/blob/master/README.md). Более подробное описание можно прочесть там. 4 | 5 | 1. Соответствие макету. 6 | 2. Кроссбраузерность, кодировка и DOCTYPE. 7 | 3. Валидность HTML - [Markup Validation Service](https://validator.w3.org/). 8 | 4. Сайт должен нормально смотреться во всех стандартных разрешениях от 320 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств. 9 | 5. Корректная работа при вбивании реального текста, надёжность вёрстки. 10 | 6. Проверка и оптимизация скорости загрузки: [WebPerformanceChecklist](https://github.com/ihorzenich/WebPerformanceChecklist). 11 | 7. Наличие Win/Mac/Linux-аналогов шрифтов. 12 | 8. Семантичность. 13 | 9. Правильная структура заголовков (`H1`, `H2`, ... и т.д. и `TITLE`). 14 | 10. Работоспособность при выключенном (незагруженном) JavaScript. 15 | 11. Отсутствие багов при увеличенном zoom-а страницы. 80%-120%. 16 | 12. Линковка страниц либо sitemap со пролинкованными страницами. 17 | 13. Все ссылки должны как-то реагировать на `:hover`, `:active` и `:focus` — показыванием/убиранием подчёркивания, сменой цвета, чем угодно. У всех ссылок, кроме пунктов меню, должна быть реакция на `:visited`. 18 | 14. «Контент в начале страницы» — содержимое страницы должно идти в начале кода, до всяких сайдбаров и прочего. 19 | 15. Копирайт должен быть написан [правильно](http://habrahabr.ru/blogs/typography/23812/) 20 | 16. Должны быть `favicon.ico` (желательно с включенными внутрь неё 32×32, 48×48 и 64×64 вариациями) и apple-touch-icon 21 | 17. В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние неиспользуемые файлы, старые версии файлов и т.п. Все бекапы можно вытянуть из системы контроля версий (например Git или SVN), а на живом проекте «мусор» потом мешает разобраться как что работает. 22 | 18. Если url ссылки неизвестен, то он должен быть равен её анкору, написанному латиницей с заменой пробелов/спецсимволов на тире. 23 | 19. При перелинковке свёрстанных страниц сылки должны быть относительные, чтобы потом эту вёрстку можно было без проблем кинуть в подпапку и ничего не поломалось 24 | 20. Skype-плагин не должен ломать вёрстку 25 | 21. Ресайз textarea не должен ломать вёрстку 26 | 22. Ссылки на чужие сайты должны быть с `target="_blank"`, желательно выделять их иконкой «внешняя ссылка». 27 | 23. Изображения должны масштабироваться в зависимости от размера окна (max-width:100%; height:auto;) 28 | 24. Если в блоке есть\будет динамический контент - нужно забить в него максмильно больше контента для теста. Кол-во контента не должно ломать верстку. 29 | 25. Проверить все между тегами `` ... ``. Не должно быть лишней информации, не связанной с проектом. 30 | 26. **Перед передачей вёрстки в PHP-отдел обязательно соблюдение следующих пунктов:** 31 | * вёрстку помещать в папку `html` в корне рабочей папки/гита 32 | * удалить из `.gitignore` содержимое папки `assets` 33 | 27. Отписаться в задаче о выполненой работе, выложить ссылку(и) на результат работы. 34 | 28. Занести в passwords в раздел dev-сервера ссылку на ваш dev-server или ссылку на результат вашей работы. 35 | -------------------------------------------------------------------------------- /frontend/plugins.md: -------------------------------------------------------------------------------- 1 | # Стандартні плагіни 2 | 3 | *Увага, ця інформація є застарілою* 4 | 5 | Список css/js/php-плагинов, которые мы используем для стандартной функциональности. 6 | Необходимость использования других плагинов должно быть _очень_ аргументирована. 7 | 8 | Функционал | Плагин 9 | --- | --- 10 | DOM helpers+special events | [jQuery++](http://jquerypp.com/) 11 | Аккордеон | [jquery-accordion](https://github.com/vctrfrnndz/jquery-accordion) 12 | Анимации CSS3 | [Animate.css](https://github.com/daneden/animate.css)
[magic](https://github.com/miniMAC/magic) 13 | Анимации CSS3 in viewport only + JS actions| [css3-animate-it.js](http://jackonthe.net/css3animateit/) 14 | Анимация из картинок | [CrossSlide](https://github.com/tobia/CrossSlide) 15 | Анимация css цветов | [jQuery Color](https://github.com/jquery/jquery-color) 16 | Аудио-видео плеер | [jPlayer](http://www.jplayer.org/) 17 | Детект видимости блока на экране | [isInViewport](https://github.com/zeusdeux/isInViewport/) / ['in view' Event Plugin](https://remysharp.com/2009/01/26/element-in-view-event-plugin) 18 | Детект потери соединения с интернетом | [Offline](https://github.com/hubspot/offline) 19 | Детект окончания CSS-анимаций | [jquery.oncssanimationend](http://osvaldas.info/examples/detecting-css-animation-transition-end-with-javascript/jquery.oncssanimationend.js) 20 | Лайтбокс | [fancyBox2](https://github.com/fancyapps/fancyBox) 21 | Кастомный лайтбокс (стилизация Fancybox) | [customFancybox.js](https://gist.github.com/delka/34085666749ed480b27a) 22 | Стилизация select | [jQuery-Selectric](http://lcdsantos.github.io/jQuery-Selectric/) 23 | Select с поиском | [select2](https://github.com/ivaynberg/select2) 24 | Поиск с автозаполнением и кнопками-лэйблами внутри | [MagicSuggest](http://nicolasbize.com/magicsuggest/) 25 | Слайдшоу со swipe | [cycle2](https://github.com/malsup/cycle2) + [swipe plugin](http://jquery.malsup.com/cycle2/download/) 26 | Карусель | [cycle2](https://github.com/malsup/cycle2) + [carousel plugin](http://jquery.malsup.com/cycle2/download/) 27 | Ещё один слайдер | [Swiper](http://idangero.us/swiper/) 28 | Операции со временем и таймзонами | [moment.js](http://momentjs.com/) 29 | Паралакс CSS3 | [Pure CSS Parallax Websites](http://keithclark.co.uk/articles/pure-css-parallax-websites/) 30 | Подгрузка и работа с SVG | [jQuery SVG](http://keith-wood.name/svg.html) 31 | Ползунок | [noUiSlider](http://refreshless.com/nouislider/) 32 | Прелоадер | [jquery.html5loader](https://github.com/GianlucaGuarini/jquery.html5loader) 33 | Стилизация элементов html-форм | [jQuery Form Styler](https://github.com/Dimox/jQueryFormStyler) 34 | Табы | [EasyTabs.js](https://github.com/JangoSteve/jQuery-EasyTabs)+[georgekosmidis/jquery-hashchange](https://github.com/georgekosmidis/jquery-hashchange) 35 | Таймер обратного отсчета | [jQuery Countdown](http://keith-wood.name/countdown.html) 36 | Тултипы | [Tooltipster](http://iamceege.github.io/tooltipster/) 37 | GET URL Parameter | [getparam.js](https://gist.github.com/varemenos/2531765) 38 | Flexbox for IE 8 & 9 | [Flexibility](https://github.com/10up/flexibility) 39 | HTML5 History (hashchange) | [history.js](https://github.com/browserstate/history.js/blob/master/scripts/bundled/html4%2Bhtml5/jquery.history.js) 40 | Mobile Detect | [mobile-detect.js](http://hgoebl.github.io/mobile-detect.js/) 41 | Single page JS (hashchange & other funcs) | [fullPage.js](https://github.com/alvarotrigo/fullPage.js) → [js-fullpage](https://github.com/ideus-interactive/bem-snippets/tree/master/js-fullpage) 42 | Отправка почты | [php-simple-mail](https://github.com/eoghanobrien/php-simple-mail) 43 | Media query for element polyfill | [ElementQuery](https://github.com/tysonmatanich/elementQuery) 44 | position:sticky | [sticky polyfill](https://github.com/matthewp/position--sticky-) 45 | Date & time picker | [DateTimePicker](https://github.com/CuriousSolutions/DateTimePicker) 46 | Cлайд-панель навигации | [bigSlide.js](https://github.com/ascott1/bigSlide.js) 47 | Социальные кнопки | [Social Likes Next](https://github.com/sapegin/social-likes-next) 48 | -------------------------------------------------------------------------------- /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 `