initial commit

.idea/copyright/profiles_settings.xml

+<component name="CopyrightManager">
+  <settings default="" />
+</component>
\ No newline at end of file

.idea/deployment.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PublishConfigData">
+    <serverData>
+      <paths name="TestUnionBitrix">
+        <serverdata>
+          <mappings>
+            <mapping local="$PROJECT_DIR$" web="/" />
+          </mappings>
+        </serverdata>
+      </paths>
+    </serverData>
+  </component>
+</project>
\ No newline at end of file

.idea/dictionaries/gente.xml

+<component name="ProjectDictionaryState">
+  <dictionary name="gente" />
+</component>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file

.idea/inspectionProfiles/profiles_settings.xml

+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="PROJECT_PROFILE" value="Project Default" />
+    <option name="USE_PROJECT_PROFILE" value="true" />
+    <version value="1.0" />
+  </settings>
+</component>
\ No newline at end of file

.idea/jsLibraryMappings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="ECMAScript 6" />
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Behat">
+    <behat_settings>
+      <BehatSettings />
+    </behat_settings>
+  </component>
+  <component name="BladeInjectionConfiguration" escapedTextEnd="!!}" escapedTextStart="{!!" />
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+  <component name="JsBowerSettings">
+    <exe-path>$USER_HOME$/AppData/Roaming/npm/bower.cmd</exe-path>
+    <config-path />
+  </component>
+  <component name="ProjectInspectionProfilesVisibleTreeState">
+    <entry key="Project Default">
+      <profile-state>
+        <expanded-state>
+          <State>
+            <id />
+          </State>
+        </expanded-state>
+        <selected-state>
+          <State>
+            <id>Blade files</id>
+          </State>
+        </selected-state>
+      </profile-state>
+    </entry>
+  </component>
+  <component name="ProjectLevelVcsManager" settingsEditedManually="false">
+    <OptionsSetting value="true" id="Add" />
+    <OptionsSetting value="true" id="Remove" />
+    <OptionsSetting value="true" id="Checkout" />
+    <OptionsSetting value="true" id="Update" />
+    <OptionsSetting value="true" id="Status" />
+    <OptionsSetting value="true" id="Edit" />
+    <ConfirmationsSetting value="0" id="Add" />
+    <ConfirmationsSetting value="0" id="Remove" />
+  </component>
+  <component name="VagrantProjectSettings">
+    <option name="instanceFolder" value="" />
+    <option name="provider" value="" />
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ScopeChooserConfigurable.UI">
+        <settings>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/zk-developer-guide.iml" filepath="$PROJECT_DIR$/.idea/zk-developer-guide.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.idea/zk-developer-guide.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

1-standarts/1.1.1-html.md

+# HTML
+
+**Статус:** актуально.
+
+## Оглавление
+
+- [HTML](#html)
+  - [Синтаксис](#html-syntax)
+  - [HTML5 doctype](#html-doctype)
+  - [Атрибут языка](#html-lang)
+  - [Режим совместимости Internet Explorer](#html-ie-compatibility-mode)
+  - [Кодировка символов](#html-encoding)
+  - [Подключение CSS и JavaScript](#html-style-script)
+  - [Относительные и абсолютные пути до ресурсов](#html-absolute-and-relative-paths)
+  - [Название файлов](#html-file-name)
+  - [Идентификаторы](#html-identificators)
+  - [Порядок атрибутов](#html-attribute-order)
+  - [Логические атрибуты](#html-boolean-attributes)
+  - [Элементы и атрибуты элементов форм](#html-form)
+  - [Ссылки с протоколами](#html-links-and-protocol)
+  - [Сокращение разметки](#html-reducing-markup)
+  - [Изображения](#html-images)
+  - [Взаимодействие HTML и JavaScript](#html-javascript)
+  - [Комментарии](#html-comments)
+
+## <a name="html">HTML</a>
+
+Старайтесь соблюдать стандарты HTML и семантику, но не за счет практичности. Используйте меньшее количество разметки с наименьшим числом тонкостей, когда это возможно.
+
+
+
+### <a name="html-syntax">Синтаксис</a>
+
+- Для вложенных элементов отступы должны быть только табами. В любом редакторе можно задать индивидуальный размер. Оптимальный размер - 4.<br>
+В этом примере `∙∙` - два пробела, а `――――` - один отступ с табуляцией.
+```html
+<!-- Плохо -->
+<div class="block">
+∙∙<div class="block__element">ZK</div>
+</div>
+
+<!-- Хорошо -->
+<div class="block">
+――――<div class="block__element">ZK</div>
+</div>
+```
+
+- Блочные элементы должны иметь перенос на новую строку, один строчный элемент можно оставлять на месте. Если строчных элементов больше одного или контента достаточно много, то следует переносить.
+```html
+<!-- Плохо -->
+<div class="block"><div class="block__element">ZK</div></div>
+
+<!-- Хорошо -->
+<div class="block">
+  <div class="block__element">ZK</div>
+</div>
+```
+
+- Группа однотипных блоков должна иметь два переноса.
+```html
+
+<!-- Плохо -->
+<div class="project">
+  <div class="project__name">Lorem</div>
+  <div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
+</div>
+<div class="project">
+  <div class="project__name">Ipsum.</div>
+  <div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
+</div>
+
+<!-- Хорошо-->
+<div class="project">
+  <div class="project__name">Lorem</div>
+  <div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
+</div>
+
+<div class="project">
+  <div class="project__name">Ipsum.</div>
+  <div class="project__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
+</div>
+```
+
+- Блочные элементы не должны находиться в строчных.
+```html
+<!-- Плохо -->
+<span>
+  <div>:(</div>
+</span>
+
+<!-- Хорошо -->
+<span>
+  <span>:)</span>
+</span>
+```
+
+- После закрывающихся тегов не должно быть лишних пробелов и/или табов. Для автоудаления можно настроить свой редактор кода. Для Sublime Text можно посмотреть в репе [sputnik](https://github.com/ZK/sputnik/wiki/Софт).
+```html
+<!-- Плохо -->
+<div class="block">∙
+  <div class="block__element">ZK</div>∙∙∙∙
+</div>――――――――
+
+<!-- Хорошо -->
+<div class="block">
+  <div class="block__element">ZK</div>
+</div>
+```
+
+- Названия тегов, атрибутов и значений свойств (кроме текстовых данных) должны быть в нижнем регистре.
+```html
+<!-- Плохо -->
+<INPUT TYPE="TEXT" VALUE="ZK">
+
+<!-- Хорошо -->
+<input type="text" value="ZK">
+```
+
+- Всегда используйте двойные кавычки `""` для значений атрибутов.
+```html
+<!-- Плохо -->
+<div class=block>
+  <div class=block__element>ZK</div>
+</div>
+
+<div class='block'>
+  <div class='block__element'>ZK</div>
+</div>
+
+<!-- Хорошо -->
+<div class="block">
+  <div class="block__element">ZK</div>
+</div>
+```
+
+- Не добавляйте слэш `/` в конец одиночного тега — в HTML5 он необязателен.
+```html
+<!-- Плохо -->
+<input type="text" value="ZK"/>
+
+<!-- Хорошо -->
+<input type="text" value="ZK">
+```
+
+- Не пропускайте необязательные закрывающие теги (например, `</li>`, `</p>` или `</body>`).
+```html
+<!-- Плохо -->
+<body>
+  <p>Полезные инструменты
+  <ul>
+    <li>Grunt
+    <li>Jade
+    <li>Stylus
+  </ul>
+
+
+<!-- Хорошо -->
+<body>
+  <p>Полезные инструменты</p>
+  <ul>
+    <li>Grunt</li>
+    <li>Jade</li>
+    <li>Stylus</li>
+  </ul>
+</body>
+```
+
+
+
+### <a name="html-doctype">HTML5 doctype</a>
+
+Укажите в начале каждой вашей HTML-страницы этот тип документа. Это заставит браузер работать в режиме соответствия стандартам, что обеспечит единообразное отображение ваших страниц в разных браузерах.
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+	  <!-- ... -->
+	</head>
+	<body>
+	  <!-- ... -->
+	</body>
+</html>
+```
+
+
+
+### <a name="html-lang">Атрибут языка</a>
+
+Из спецификации HTML5:
+> Для указания языка документа авторам рекомендуется прописывать атрибут языка в корневом элементе HTML. Это поможет инструментам синтеза речи определить какое произношение использовать, а инструментам перевода - какие правила, и так далее.
+
+```html
+<html lang="ru">
+	<!-- ... -->
+</html>
+```
+
+Подробнее познакомиться с атрибутом `lang` можно в [спецификации](http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element).
+
+Список кодов различных языков на [Sitepoint](http://reference.sitepoint.com/html/lang-codes).
+
+
+
+### <a name="html-ie-compatibility-mode">Режим совместимости Internet Explorer</a>
+
+IE поддерживает использование специального `<meta>`-тега, который указывает в режиме совместимости с какой версией IE следует отрендерить страницу. Если обстоятельства не требуют какой-то специальной версии IE, то самым правильным будет заставить браузер использовать режим самой последней версии (**edge mode**).
+
+```html
+<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+```
+
+Если сайт будет находиться на собственном хостинге, то следует убрать этот `meta`-тег и настроить хостинг для определения IE и добавления специальных заголовков.
+
+Для получения дополнительной информации можно ознакомиться с обсуждением на [Stack Overflow](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e).
+
+
+
+### <a name="html-encoding">Кодировка символов</a>
+
+Явно объявив кодировку символов, вы быстро и легко обеспечите правильное отображение вашего контента. При этом, вы сможете избежать использования [символьных сущностей](http://www.w3schools.com/html/html_entities.asp) в вашем HTML-коде, при условии, что их кодировка совпадает с кодировкой документа (как правило, utf-8).
+
+```html
+<head>
+	<meta charset="utf-8">
+</head>
+```
+
+
+
+### <a name="html-style-script">Подключение CSS и JavaScript</a>
+
+Все стили и скрипты должны быть только в отдельных файлах. Встроенных и внедрённых в тег стилей (в атрибуте style) не должно быть.
+
+Согласно спецификации HTML5, при подключении CSS и JavaScript файлов не требуется указание атрибута `type`, так как `text/css` и `text/javascript` являются значениями по умолчанию.
+
+```html
+<!-- Внешний CSS -->
+<link rel="stylesheet" href="styles/main.css">
+
+<!-- CSS внутри документа, внедрять в страницу не нужно -->
+<style>
+	/* ... */
+</style>
+
+<!-- Внешний JavaScript -->
+<script src="scripts/main.js"></script>
+
+<!-- JavaScript внутри документа, внедрять в страницу не нужно -->
+<script>
+	console.log('ZK');
+</script>
+```
+
+Ссылки на спецификацию HTML5:
+* [Использование тега `link`](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element)
+* [Использование тега `style`](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element)
+* [Использование тега `script`](http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element)
+
+
+
+### <a name="html-absolute-and-relative-paths">Абсолютные и относительные пути к ресурсам</a>
+
+По умолчанию пути до ресурсов должны быть относительного текущего расположения страницы для просмотра на GitHub Pages.
+
+Относительно корня или абсолютные пути можно использовать в некоторых случаях:
+- Для страниц сайта, находящихся в поддиректории (обычно на хостинге ZK или заказчика).
+- В JavaScript, например, для указания изображения метки на Яндекс.Картах или Google Maps.
+
+Подробнее можно почитать на [htmlbook.ru](http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki).
+
+
+
+### <a name="html-file-name">Название файлов</a>
+
+Называйте файлы страниц по-английски без ошибок, не используйте кириллицу, транслит и комбинацию транслита и английского.
+
+Само название должно отражать содержимое файла.
+
+Плохо:
+```
+Главная страница.html
+Stranica novostey.html
+01_about-NEW!!!.html
+page-kontakti.html
+```
+
+Хорошо:
+```
+main.html
+news.html
+about.html
+contacts.html
+```
+
+
+
+### <a name="html-identificators">Идентификаторы</a>
+
+Идентификатор - это атрибут с уникальным названием элемента, которое в документе должно быть единственным. Не допускайте элементов с одинаковыми идентификаторами.
+
+
+
+### <a name="html-attribute-order">Порядок атрибутов</a>
+
+Для удобства чтения HTML-атрибуты должны быть указаны именно в этом порядке:
+- `class`
+- `id`, `name`
+- `data-*`
+- `src`, `for`, `type`, `href`
+- `title`, `alt`
+- `aria-*`, `role`
+
+Классы создаются для многократно используемых компонентов верстки, поэтому они идут первыми. Идентификаторы более специфичны и должны использоваться умеренно (например, для закладок на странице), поэтому они следуют вторыми.
+```html
+<a class="link" id="toggle" data-modal="toggle" href="javascript:void(0);">Меню</a>
+
+<input class="input-text" type="text">
+
+<img class="logo" src="images/logo.png" alt="ZK">
+```
+
+
+
+### <a name="html-boolean-attributes">Логические атрибуты</a>
+
+Логические атрибуты одни из тех, которые не требуют объявленного значения. XHTML требует от вас задать значение, но в HTML5 нет такого требования.
+
+За подробной информацией обратимся к разделу [о логических атрибутах на WhatWG](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes):
+
+> Наличие логического атрибута у элемента говорит об истинном его значении, а отсутствие атрибута — о ложном.
+
+Если вы *должны* указать значение атрибута, но **вам это не нужно**, следуйте этой рекомендации от WhatWG:
+
+> Если атрибут присутствует, его значение должно быть либо пустой строкой или [...] каноническим именем атрибута без начальных или конечных пробелов.
+
+**Если коротко, то не указывайте значение логическому атрибуту.**
+
+```html
+<!-- Плохо -->
+<input class="input-text" type="text" disabled="disabled">
+
+<input class="input-checkbox" type="checkbox" value="on" checked="checked">
+
+<select class="select">
+	<option value="0" selected="selected">Grunt</option>
+	<option value="1">Jade</option>
+	<option value="2">Stylus</option>
+</select>
+
+<!-- Хорошо -->
+<input class="input-text" type="text" disabled>
+
+<input class="input-checkbox" type="checkbox" value="on" checked>
+
+<select class="select">
+	<option value="0" selected>Grunt</option>
+	<option value="1">Jade</option>
+	<option value="2">Stylus</option>
+</select>
+```
+
+
+
+### <a name="html-form">Формы, элементы и атрибуты элементов форм</a>
+
+- Формы логично должны быть в теге `form`.
+
+- Формы не должны вкладываться друг в друга. Если они разные, то должны быть раздельны друг от друга.
+
+- Форма должна иметь атрибуты:
+  - `action` - для указания адреса отправки данных.
+  - `method` - метод передачи данных, обычно в значении указывается `post`.
+```html
+<!-- Плохо -->
+<form>
+  <!-- ... -->
+  <button type="submit">Подать заявку</button>
+</form>
+
+<!-- Хорошо -->
+<form action="send.php" method="post">
+  <!-- ... -->
+  <button type="submit">Подать заявку</button>
+</form>
+```
+
+- Кнопки подтверждения формы логично должны быть кнопками с атрибутом `type="submit"`, а не ссылками, строчными или блочными элементами.
+```html
+<!-- Плохо -->
+<form action="send.php" method="post">
+    <!-- ... -->
+    <a href="send.php">Подать заявку</a>
+</form>
+
+<!-- Хорошо -->
+<form action="send.php" method="post">
+    <!-- ... -->
+    <button type="submit">Подать заявку</button>
+</form>
+```
+
+- Если нестандартные элементы форм типа списков или слайдеров генерируются с помощью JavaScript, то выбранное значение должно сохраняться в специальном теге `<input type="hidden">`, если испольузется тег `select`, то сохраняться в дочернем теге `option`.
+
+- Элементы формы должны иметь атрибуты:
+    - `name` и `value` - для ключа и значения.
+    - `for` и `id` - для связи надписи и элемента, при клике на надпись элемент будет фокусироваться.
+```html
+<label for="skype">Skype</label>
+<input id="skype" name="skype" value="zolotoykod.ru">
+```
+
+
+
+### <a name="html-links-and-protocol">Ссылки и протоколы</a>
+
+- Для ссылок без адреса вместо `#` вставлять `javascript:void(0);`, чтобы страницу не скроллило вверх.
+```html
+<!-- Плохо -->
+<a href="#">Портфолио ZK</a>
+
+<!-- Хорошо -->
+<a href="javascript:void(0);">Портфолио ZK</a>
+```
+
+- Если элемент, похожий на ссылку, не является ею и событие клика обрабатывается в JavaScript, то стоит заменить тег `a` на `span` или `div` и убрать атрибуты `href` и `target`, для фокусировки можно задать атрибут `tabindex`.
+
+- Для внешних ссылок нужно добавлять атрибуты `target="_blank"` для открытия в новой вкладке и `rel="nofollow"` для запрета отслеживания.
+```
+<!-- Плохо -->
+Мы пользуемся поисковой системой <a href="http://yandex.ru/">Яндекс</a>.
+
+<!-- Хорошо -->
+Мы пользуемся поисковой системой <a href="http://yandex.ru/" target="_blank" rel="nofollow">Яндекс</a>.
+```
+
+- Телефоны, email-адреса и Skype-контакт должны быть ссылками:
+	- `tel:+79876543210` - для указания телефона, номер должен начинаться с плюса и состоять только из чисел без спецсимволов типа пробелов, круглых скобок или дефиса.
+	- `mailto:info@zolotoykod.ru` - для указания e-mail.
+	- `skype:zolotoykod.ru?chat` - для указания Skype-контакта.
+
+```html
+<a href="tel:+79876543210">+7-987-654-32-10</a>
+<a href="mailto:info@zolotoykod.ru">Напишите нам на почту</a>
+<a href="skype:zolotoykod.ru?chat">Напишите нам в Skype</a>
+```
+
+
+
+### <a name="html-reducing-markup">Сокращение разметки</a>
+
+Всякий раз, когда это возможно, избегайте лишних родительских элементов. Во многих случаях это требует повторения и рефакторинга, но позволяет создать меньшее количество разметки. Посмотрите на следующий пример:
+
+```html
+<!-- Неплохо -->
+<span class="avatar">
+	<img src="avatars/zolotoykod.png" alt="ZK">
+</span>
+
+<!-- Лучше -->
+<img class="avatar" src="avatars/zolotoykod.png" alt="ZK">
+```
+
+
+
+### <a name="html-images">Изображения</a>
+
+При размещении изображений следует учитывать то, чем они являются:
+- Если изображение - стилевое оформление сайта, то реализуется в CSS фонах через свойство `background`. Например:
+	- Фон сайта;
+	- Паттерн;
+	- Декоративные элементы;
+	- И прочее.
+
+- Используйте тег `img` для изображений:
+	- Аватарок;
+	- Продуктов в витрине;
+	- Фотографий;
+	- Любых изображений находящихся в контентной части:
+		- Статьи;
+		- Записи в блоге;
+		- Комменатрия.
+
+	Такие изображения должны быть отдельными файлами и находиться в папке `images/temp/`.
+
+- В тегах `img` обязательно должен быть атрибут `alt`. Если изображение не меняет свой размер (не *резиновое*), то нужно его указать в атрибутах `width` и `height`.
+```html
+<!-- Плохо -->
+<img src="images/zolotoykod.png">
+
+<!-- Хорошо -->
+<img src="images/zolotoykod.png" alt="ZK">
+
+<img src="images/zolotoykod.png" alt="ZK" width="128" height="64">
+```
+
+
+
+### <a name="html-javascript">Взаимодействие HTML и JavaScript</a>
+
+- Создание разметки с помощью JavaScript делает её менее производительной, сложной для поиска и редактирования. По возможности избегайте этого.
+
+- В зависимости от поддерживаемых браузеров используйте CSS по максимуму (анимации, табы, псевдоэлементы), не используйте JavaScript.
+
+- Если JavaScript изменяет вид страницы, обязательно делать это при помощи смены CSS-классов, а не путём правки атрибута `style` элемента.
+
+- Если в форме элемент удаляется (скрывается), он должен удаляться и из [DOM](http://ru.wikipedia.org/wiki/Document_Object_Model).
+
+
+
+### <a name="html-comments">Комментирование кода</a>
+
+По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно.
+Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском.

1-standarts/1.1.2-pug.md

+# Pug - HTML препроцессор
+
+**Статус:** черновик.
+
+На проекте используется шаблонизатор [Pug](http://pugjs.com/) (бывш. [Jade](http://jade-lang.com/)) для компиляции в HTML.
+
+Полезные ссылки для ознакомления:
+* [pugjs.com](http://pugjs.com/) - документация Pug.
+* [jade-lang.com](http://jade-lang.com/) - документация Jade.
+* [naltatis.github.io/jade-syntax-docs](http://naltatis.github.io/jade-syntax-docs/) - ещё одна документация Jade.
+* [jsman.ru/jade/](http://jsman.ru/jade/) - ещё одна документация Jade.
+* [html2jade.org](http://html2jade.org/) - конвертация HTML в Jade и Jade в HTML.
+* [html2jade.aaron-powell.com](http://html2jade.aaron-powell.com/) - и еще один инструмент для конвертации HTML → Jade.
+
+
+## 1. Назначение папок
+
+```
+templates/                     # Папка с шаблонами Jade
+├── blocks/                    # Папка с подключаемыми блоками
+├── helpers/                   # Папка с помощниками
+│   ├── mixins.pug             # Примеси
+│   └── variables.pug          # Переменные
+├── layouts/                   # Папка с шаблонами раскладки
+│   └── default.pug            # Шаблон раскладки по умолчанию
+├── pages/                     # Папка с генерируемыми страницами
+│   └── index.pug              # Шаблон одной из страниц
+└── partials/                  # Папка с подлючаемыми шаблонами
+    ├── footer.pug             # Шаблон подвала
+    ├── head.pug               # Шаблон с ресурсами, SEO и мета-тегами
+    ├── header.pug             # Шаблон шапки
+    └── scripts.pug            # Шаблон со скриптами
+```
+
+
+## 2. Подключение частиц в страницы
+
+* `include header` - используется для подключения частиц страницы, например, для шапок и подвалов.
+* `extends partials/default` - используется для внедрения контент в расширяемый шаблон. `layouts/default.pug`.
+* `block content` - используется для добавления строк кода в определённое место другого шаблона.
+
+Во всех случаях через пробел указывается путь от текущего расположения до шаблона без расширения `.pug`.
+
+
+## 3. Теги, классы и идентификаторы
+
+- Классы и идентификаторы пишутся в начале, а не в атрибутах. Указывать тег `div` не нужно, т.к. он используется по умолчанию.
+```pug
+//- Плохо
+div(class='carousel' id="carousel")
+nav(class='nav nav_pos_left')
+div(id="carousel")
+
+//- Хорошо
+.carousel
+nav.nav.nav_pos_left
+#carousel
+```
+
+- Идентификатор ставится после классов.
+```pug
+//- Плохо
+.carousel#carousel.carousel_theme_dark
+#carousel.carousel
+
+//- Хорошо
+.carousel.carousel_theme_dark#carousel
+.carousel#carousel
+```
+
+
+## 4. Атрибуты элемента и их значения
+
+- Для нескольких атрибутов запятая не нужна.
+```pug
+//- Плохо
+input.input-text(type='text', name='project', value='zk', required)
+
+//- Хорошо
+input.input-text(type='text' name='project' value='zk' required)
+```
+
+- Используйте одинарные кавычки для текстовых значений.
+```pug
+//- Плохо
+input.input-text(type="text" name="project" value="zk" required)
+
+//- Хорошо
+input.input-text(type='text' name='project' value='zk' required)
+```
+
+- Не давайте необязательные значения атрибутам.
+```pug
+//- Плохо
+input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked='checked')
+
+//- Хорошо
+input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
+```
+
+- Распологайте одиночные атрибуты в последнюю очередь.
+```pug
+//- Плохо
+input.input-checkbox(type='checkbox' checked name='browser[]' value='chrome')
+
+//- Хорошо
+input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
+```
+
+- Для числовых значений кавычки не нужны.
+```pug
+//- Плохо
+input.input-text(type="text" name="price" value="24999")
+
+//- Хорошо
+input.input-text(type='text' name='price' value=24999)
+```
+
+- Переносите атрибуты новую строку, если их много и/или значения длинные.
+```pug
+//- Плохо
+input.input-text(type='text' name='project' value='zk' data-required='Это поле обязательно для заполнения!'  data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required)
+
+//- Хорошо
+input.input-text(
+    type='text'
+    name='project'
+    value='zk'
+    data-required='Это поле обязательно для заполнения!'
+    data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.'
+    required
+)
+```
+
+## 5. Переносы строк
+
+- Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте [примесь (mixin)](http://jade-lang.com/reference/#mixins).
+```pug
+//- Плохо
+.project
+   .project__name Lorem
+   .project__desc
+      | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
+.project
+   .project__name Ipsum.
+   .project__desc
+      | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
+
+//- Хорошо
+.project
+   .project__name Lorem
+   .project__desc
+      | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
+
+.project
+   .project__name Ipsum.
+   .project__desc
+      | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      | Unde doloremque neque facilis sed repudiandae tempore ipsum provident officia eaque quas.
+```
+
+- Строчные элементы можно записывать на одной строке через двоеточие `:`.<br>Не злоупотреблять с длинными классами.
+```pug
+//- Хорошо
+ul.nav
+   li.nav__item
+      a.nav__link(href='/') Главная
+   li.nav__item
+      a.nav__link(href='/projects') Проекты
+   li.nav__item
+      a.nav__link(href='/contacts') Контакты
+
+//- Лучше
+ul.nav
+    li.nav__item: a.nav__link(href='/') Главная
+    li.nav__item: a.nav__link(href='/projects') Проекты
+    li.nav__item: a.nav__link(href='/contacts') Контакты
+```
+
+## 6. Комментарии
+
+- Комментарии в Jade, которые не должны попасть в HTML записываются через `//-`.
+```pug
+// Этот комментарий попадёт в HTML.
+
+//- Этот комментарий не попадёт в HTML.
+```
+
+- Простые или условные комментарии можно записывать прямо в HTML-формате.
+```html
+<!--[if IE]>
+meta(name='imagetoolbar' content='no')
+meta(name='msthemecompatible' content='no')
+<![endif]-->
+
+<!--noindex-->
+Это содержимое не будет индексироваться поисковиком.
+<!--/noindex-->
+```
+
+
+## 7. Пиши меньше, делай больше или используйте примеси!
+
+Для однотипных и повторяющихся строк кода имеет смысл использовать [примеси (mixins)](http://jade-lang.com/reference/#mixins) и указать только данные.
+```pug
+mixin tools(list)
+    ul.list
+        each item in list
+            li.list__item
+                span.mark= item[0]
+                = ' - ' + item[1]
+
++tools([
+    ['spritesmith', 'генератор спрайтов и CSS переменных'],
+    ['imagemin', 'сжатие картинок']
+])
+```
+
+Скомпилирует
+
+```html
+<ul class="list">
+    <li class="list__item">
+        <span class="mark">spritesmith</span> - генератор спрайтов и CSS переменных
+    </li>
+    <li class="list__item">
+        <span class="mark">imagemin</span> - сжатие картинок
+    </li>
+</ul>
+```

1-standarts/1.2.1-css.md

+# CSS
+
+**Статус:** черновик.
+
+## Оглавление
+
+- [CSS синтаксис](#css-syntax)
+- [Порядок объявления](#css-declaration-order)
+- [Не используйте @import](#css-import)
+- [Место для media query](#css-media-queries)
+- [Свойства с префиксами](#css-prefixed-properties)
+- [Правила с одиночными объявлениями](#css-single-declarations)
+- [Сокращенная запись](#css-shorthand)
+- [Комментарии](#css-comments)
+- [Селекторы](#css-selectors)
+- [Организация кода](#css-organization)
+- [БЭМ](#bem)
+
+
+## <a name='#css-syntax'>CSS синтаксис</a>
+
+- Для отступов использовать 2 пробела. В этом примере `∙∙∙∙` - четыре пробела, а `――――` - один отступ с табуляцией.
+
+```css
+/* Плохо */
+.heading {
+∙∙∙∙font-size: 32px;
+――――font-color: #000;
+}
+
+/* Хорошо */
+.heading {
+∙∙font-size: 32px;
+∙∙font-color: #000;
+}```
+
+- Каждый селектор на отдельной строке.
+
+```css
+/* Плохо */
+.header, .main, .footer {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Хорошо */
+.header,
+.main,
+.footer {
+  margin-left: auto;
+  margin-right: auto;
+}
+```
+
+- 1 пробел перед `{`.
+
+```css
+/* Плохо */
+.heading{
+  font-size: 32px;
+}
+
+/* Хорошо */
+.heading {
+  font-size: 32px;
+}
+```
+
+- 1 перенос на новою строку перед `}`.
+
+```css
+/* Плохо */
+.heading {
+  font-size: 32px;}
+
+.heading {
+  font-size: 32px;
+  }
+
+/* Хорошо */
+.heading {
+  font-size: 32px;
+}
+```
+
+- 1 перенос на новую строку после `}` и между группами объявлений.
+
+```css
+/* Плохо */
+.heading {
+  font-size: 32px;
+}
+.highlight {
+  background-color: #f00;
+}
+
+/* Хорошо */
+.heading {
+  font-size: 32px;
+}
+
+.highlight {
+  background-color: #f00;
+}
+```
+
+- 1 пробел после `:`.
+
+```css
+/* Плохо */
+.heading {
+  font-size:32px;
+}
+
+/* Хорошо */
+.heading {
+  font-size: 32px;
+}
+```
+
+- Все объявления завершаются с `;`.
+
+```css
+/* Плохо */
+.heading {
+  font-size: 32px
+}
+
+/* Хорошо */
+.heading {
+  font-size: 32px;
+}
+```
+
+- 1 пробел после запятых в значениях свойств.
+
+```css
+/* Плохо */
+.header {
+  background-color: rgba(0,0,0,.5);
+}
+
+/* Хорошо */
+.header {
+  background-color: rgba(0, 0, 0, .5);
+}
+```
+
+- Не добавляйте начальный ноль для значений.
+
+```css
+/* Плохо */
+.transparent {
+  opacity: 0.5;
+}
+
+/* Хорошо */
+.transparent {
+  opacity: .5;
+}
+```
+
+- Все 16-ичные значения записывайте строчными буквами (в нижнем регистре). Строчные буквы гораздо легче различить при просмотре файла, поскольку они, как правило, имеют больше уникальных форм.
+
+```css
+/* Плохо */
+.white {
+  background-color: #FFF;
+}
+
+/* Хорошо */
+.white {
+  background-color: #fff;
+}
+```
+
+- Используйте короткие 16-ичные значения.
+
+```css
+/* Плохо */
+.highlight {
+  color: #ffffff;
+  background-color: #0088ff;
+}
+
+/* Хорошо */
+.highlight {
+  color: #fff;
+  background-color: #08f;
+}
+```
+
+- `"` для значений атрибутов внутри селектора.
+
+```css
+/* Плохо */
+input[type=text] {
+  /* ... */
+}
+
+/* Хорошо */
+input[type="text"] {
+  /* ... */
+}
+```
+
+- Опускайте единицы измерения при нулевом значении.
+
+```css
+/* Плохо */
+.header {
+  margin-top: 0px;
+}
+
+/* Хорошо */
+.header {
+  margin-top: 0;
+}
+```
+
+
+
+## <a name='#css-declaration-order'>Порядок объявления</a>
+
+Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:
+
+  - Позиционирование - может удалить элемент из нормального потока документа и переопределить блочную модель связанных стилей.
+  - Расположение - задаются внешние и внутренние отступы.
+  - Блочная модель - диктует размеры
+  - Типографика - шрифты, стилизация текста
+  - Отображение - цвет, фон и т.п.
+  - Прочее - трансформации, поведение и т.п.
+
+Небольшой пример:
+
+```css
+.declaration-order {
+  /* Позиционирование */
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+
+  /* Расположение */
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8px 16px;
+
+  /* Блочная модель */
+  display: block;
+  float: left;
+  width: 100px;
+  height: 100px;
+
+  /* Типографика */
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: center;
+
+  /* Отображение */
+  color: #333;
+  background-color: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  opacity: 1;
+
+  /* Прочее */
+  transition: .25s ease-out;
+  transform: scale(.75);
+}
+```
+
+
+## <a name='#css-import'>Не используйте @import</a>
+
+По сравнению с тегом `<link>` правило `@import` медленнее, создает дополнительные запросы и может вызвать иные непредвиденные проблемы. Избегайте это правило и используйте вместо него один из альтернативных подходов:
+
+- Склеивайте CSS-файлы в один файл и минифицируйте.
+- Компилируйте CSS-код в один файл с помощью препроцессоров, например, Stylus, Sass или Less.
+
+Для получения дополнительной информации следует ознакомиться со [статьей Стива Соудерса](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/).
+
+```html
+<!-- Используйте тег link -->
+<link rel="stylesheet" href="assets/styles/main.min.css">
+
+<!-- Избегайте @import -->
+<style>
+  @import url(assets/styles/main.css);
+</style>
+```
+
+
+## <a name='#css-media-queries'>Место для media query</a>
+
+Помещайте медиавыражения настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей. Не помещайте их в конце файла, для этого можно использовать специальный сборщик в [Grunt](https://www.npmjs.org/package/grunt-combine-media-queries) или [Gulp](https://www.npmjs.org/package/gulp-combine-media-queries). В противном случае это приведет к тому, что медиавыражения будут не замечены в будущем.
+
+Вот типичная структура:
+
+```css
+.element { /* ... */ }
+.element-avatar { /* ... */ }
+.element-selected { /* ... */ }
+
+@media only screen and (min-width: 480px) {
+  .element { /* ... */}
+  .element-avatar { /* ... */ }
+  .element-selected { /* ... */ }
+}
+```
+
+## <a name='#css-prefixed-properties'>Свойства с префиксами</a>
+
+Свойства с префиксами
+Когда вы используете свойства с префиксами вендоров, оставляйте отступы для каждого свойства так, чтобы значения объявлений выстраивались в вертикальную линию. Это упрощает многострочное редактирование.
+
+```css
+/* Свойства с префиксами */
+.selector {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+}
+```
+
+## <a name='#css-single-declarations'>Правила с одиночными объявлениями</a>
+
+В случаях, когда набор правил включает в себя только одно объявление, рекомендуется оставить переносы строк, иначе в будущем при добавлении новых свойств потребуется добавлять переносы. Любой набор правил с несколькими объявлениями должен быть разделен на отдельные строки.
+
+Ключевым фактором здесь является обнаружение ошибок — например, валидатор CSS сообщает вам, что в строке 183 есть синтаксическая ошибка. С одиночным объявлением не возникнет сложности с исправлением. В случае с несколькими объявлениями, разделенными на строки, так же проблем не возникнет. Но если несколько объявлений будут записаны в одну строку, то вам будет сложнее понять какое именно объявление вызвало синтаксическую ошибку.
+
+```css
+/* Плохо */
+.sprite { display: inline-block; width: 16px; height: 16px; background-image: url(../images/sprite.png); }
+.sprite-home  { background-position: 0 -20px; }
+.sprite-account { background-position: 0 -40px; }
+
+/* Хорошо */
+.sprite {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url(../img/sprite.png);
+}
+
+.sprite-home {
+  background-position: 0 -20px;
+}
+
+.sprite-account {
+  background-position: 0 -40px;
+}
+```
+
+## <a name='#css-shorthand'>Сокращенная запись</a>
+
+Старайтесь ограничить использование сокращенных объявлений в тех случаях, когда необходимо явно задать все доступные значения. Наиболее часто злоупотребляют сокращением следующих свойств:
+- `padding`
+- `margin`
+- `font`
+- `background`
+- `border`
+- `border-radius`
+
+Часто нам не нужно устанавливать все значения сокращенной записи свойства. Например, HTML заголовки устанавливают только отступы сверху и снизу, таким образом, в случае необходимости нужно переопределить только эти два значения. Чрезмерное использование сокращенной записи свойств часто приводит к грязному коду с ненужными переопределения и непреднамеренными побочными эффектами.
+
+На сайте Mozilla Developer Network есть отличная статья о [сокращенной записи свойств](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) для тех кто не знаком с такой формой записи.
+
+```css
+/* Плохо */
+.element {
+  margin: 0 0 10px;
+  background: red;
+  background: url(../img/image.jpg);
+  border-radius: 3px 3px 0 0;
+}
+
+/* Хорошо */
+.element {
+  margin-bottom: 10px;
+  background-color: red;
+  background-image: url(../img/image.jpg);
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+```
+
+## <a name='#css-comments'>Комментарии</a>
+
+- Пишите комментарии только по мере необходимости, передающие контекст и цель кода, а не просто повторение названия класса или компонента.
+- Всё комментировать не нужно.
+- Комментарии только на английском языке.
+
+## <a name='#css-selectors'>Селекторы</a>
+
+- Используйте только классы вместо тегов для оптимальной производительности отображения.
+- Не используйте селекторы по атрибуту (например, `[class^="..."]`) для часто встречающихся компонентов. Это негативно повлияет на производительность браузера.
+- Не используйте идентификаторы.
+- Используйте короткие селекторы.
+- Не используйте каскад (вложенность селекторов).
+- Вложенность селекторов допускается **только** в случае необходимости, например, когда нужно изменить свойства при наведении (`:hover`) или другом подобного псевдоселекторе, и при использовании специальных глобальных классов.
+
+Дополнительно к прочтению:
+- [Scope CSS classes with prefixes](http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/).
+- [Stop the cascade](http://markdotto.com/2012/03/02/stop-the-cascade/).
+
+```css
+/* Плохо */
+span { /* ... */ }
+a.link { /* ... */ }
+#logo { /* ... */ }
+.page-container #stream .stream-item .tweet .tweet-header .username { /* ... */ }
+.user { /* ... */ }
+
+/* Хорошо */
+.link {
+  /* ... */
+}
+
+.user {
+  /* ... */
+}
+
+.user:hover .user__name {
+  /* ... */
+}
+```
+
+## <a name='#css-organization'>Организация кода</a>
+
+- Разделите CSS-код на несколько файлов со своими состовляющими:
+  - Сброс стилей.
+  - Шрифты.
+  - Базовые стили.
+  - Общие стили:
+    - Шапка.
+    - Подвал.
+  - Блоки.
+  - Компоненты.
+- Ориентируйтесь на блоки и компоненты, а не на страницы, которые могут быть переработаны, а блоки и компоненты могут перемещаться с одной страницы на другую.
+
+## <a name='#bem'>БЭМ</a>
+
+> Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро, а поддерживать долгие годы. Она позволяет создавать расширяемые и повторно используемые компоненты интерфейса.
+
+Чтобы понять что к чему, необходимо подробнее ознакомиться с [методологией БЭМ](https://ru.bem.info/methodology/quick-start/)
+
+Именование классов
+
+Для обозначения БЭМ-сущностей зачастую используется специальный формат строки, по которой можно однозначно определить, какая именно сущность представлена. В Золотом Коде используется следующий стандарт именования БЭМ-сущностей:
+
+- `BlockName` — блок.
+- `BlockName--modName` — булевый модификатор блока.
+- `BlockName_ElemName` — элемент блока.
+- `BlockName_ElemName--modName` — булевый модификатор элемента.

1-standarts/1.2.2-less.md

+# Less
+## Синтаксис в Less
+
+- Используйте вложенность с `&` ([амперсанд](https://ru.wikipedia.org/wiki/Амперсанд)), так будет видна зависимость и иерархическое дерево классов.
+
+```stylus
+// Плохо
+.project { /* ... */ }
+.project__name { /* ... */ }
+.project__description { /* ... */ }
+
+// Хорошо
+.project
+	// ...
+
+	&__name
+		// ...
+
+	&__description
+		// ...
+```
+
+- Используйте табы для отступов, не используйте табы и пробелы одновременно - стили не скомпилируются.<br>
+В этом примере `∙∙∙∙` - четыре пробела, а `――――` - один отступ с табуляцией.
+
+```stylus
+// Плохо
+.project
+∙∙∙∙// ...
+
+∙∙∙∙&__name
+∙∙∙∙∙∙∙∙// ...
+
+// Хорошо
+.project
+――――// ...
+
+――――&__name
+—―――――――// ...
+```
+
+- Между классами с группой свойств добавляте перенос строки для лучшей читабельности.
+
+```stylus
+// Плохо
+.project
+	// ...
+	&__name
+		// ...
+		&:before
+			// ...
+
+// Хорошо
+.project
+	// ...
+
+	&__name
+		// ...
+
+		&:before
+			// ...
+```
+
+- Опускайте использование фигурных скобок `{}`, двоеточий `:` и точек с запятыми `;`, в Stylus можно обходиться без них.
+
+```stylus
+// Плохо
+.button {
+	position: relative;
+	font-size: 14px;
+	line-height: 1;
+	background-color: #08f;
+}
+
+// Хорошо
+.button
+	position relative
+	font-size 14px
+	line-height 1
+	background-color #08f
+```
+
+- Не используйте `&-` для описания имен составных блоков. Это затрудняет их поиск.
+
+```stylus
+// Плохо
+.project
+	// ...
+
+	&-container
+		// ...
+
+	&__name
+		// ...
+
+		&:before
+			// ...
+
+// Хорошо
+.project
+	// ...
+
+	&__name
+		// ...
+
+		&:before
+			// ...
+
+.project-container
+	// ...
+
+```
+
+- Один файл — один блок. Имя файла совпадает с именем блока. Все стили для блока должны быть описаны в этом файле. Блок не должен встречаться в других файлах.
+
+```stylus
+// Плохо
+// main.styl
+.project
+	// ...
+
+	&__name
+		// ...
+
+	&__before
+		// ...
+
+.project-container
+	// ...
+
+.portfolio
+	// ...
+
+
+// Хорошо
+// project.styl
+.project
+	// ...
+
+	&__name
+		// ...
+
+	&__before
+		// ...
+
+// project-container.styl
+.project-container
+	// ...
+
+// portfolio.styl
+.portfolio
+	// ...
+
+```
+
+- [Rupture](https://github.com/jenius/rupture)-примеси содержат в себе только блок свойств, селекторов внутри быть не должно.
+
+```stylus
+// Плохо
+.block
+	+below(666px)
+		&:first-child
+			margin-top: 5px
+
+// Хорошо
+.block
+	&:first-child
+		+below(666px)
+			margin-top: 5px
+
+```
+
+- Исходя из всех предыдущих получаем следующую иерархию и последовательность
+
+```stylus
+// Блок
+.block
+	// ...
+
+	// @media-примеси блока
+	+below(640px)
+		// ...
+
+	// Псевдоэлементы блока
+	&::after
+		// ...
+
+	// Псевдоклассы блока
+	&:first-child
+		// ...
+
+		// Псевдоэлементы с псевдоклассом блока
+		&::after
+			// ...
+
+	// Модификаторы блока
+	&_key_val
+		// ...
+
+		// Псевдоклассы модификатора блока
+		&:first-child
+			// ...
+
+		// Псевдоэлементы модификатора блока
+		&::after
+			// ...
+
+	// Элементы
+	&__element
+		// ...
+
+		// @media-примеси элемента
+		+below(640px)
+			// ...
+
+		// Псевдоэлементы элемента
+		&::after
+			// ...
+
+		// Псевдоклассы элемента
+		&:first-child
+			// ...
+
+			// Псевдоэлементы с псевдоклассом элемента
+			&::after
+				// ...
+
+		// Модификаторы элемента
+		&_key_val
+			// ...
+
+			// Псевдоклассы модификатора элемента
+			&:first-child
+				// ...
+
+			// Псевдоэлементы модификатора элемента
+			&::after
+				// ...
+
+	// Псевдоклассы блока, влияющие на элементы
+	&:first-child &__element
+		// ...
+
+	// Модификаторы блока, влияющие на элементы
+	&_key_val &__element
+		// ...
+
+	// N элементов ещё...
+```
+
+- Используйте примеси (mixins) для частоповторяющихся участков кода.
+- Используйте циклы для однотипных строк с различием в значениях.
+
+
+Полезные ссылки:
+
+- [Документация Stylus](http://stylus-lang.com/).
+- [CSS2Stylus](http://css2stylus.com/) - онлайн препроцессор CSS в Stylus. Для табов в options выбрать Indentation - tab.
+
+
+
+## Переменные
+
+При частой записи одиноковых значений следует использовать переменные:
+- Название шрифтов.
+- Фирменные цвета.
+- Ресурсы в `data-uri`.
+
+## Возможные проблемы и пути их решения
+
+- Когда комментируются свойства, нужно комментировать ещё и селектор, иначе он будет брать свойства вместе со следующим селектором или, если следующего селектора нет, компилятор выдаст ошибку.
+
+```stylus
+// Плохо
+.block
+    // ...
+
+    &__item
+        // color #08f
+
+// Хорошо
+.block
+    // ...
+
+    // &__item
+    //    color #08f
+```

1-standarts/1.3-javascript.md

+# Стиль написания кода на JavaScript
+
+Здесь, в Золотом Коде, для написания JavaScript мы используем [подход Google](https://google.github.io/styleguide/javascriptguide.xml), проверенный годами, с некоторыми изменениями.
+Поэтому, в любом, не описанном ниже случае, стоит прибегать к стайлгайду от Google.
+
+## <a name='TOC'>Оглавление</a>
+
+1. [Оглавление](#TOC)
+1. [ES2015](#es2015)
+1. [Пробелы](#whitespace)
+1. [Типы](#types)
+1. [Объекты](#objects)
+1. [Массивы](#arrays)
+1. [Запятые](#commas)
+1. [Точки с запятой](#semicolons)
+1. [Приведение типов](#type-coercion)
+1. [Строки](#strings)
+1. [Функции](#functions)
+1. [Свойства](#properties)
+1. [Условные выражения и равенства](#conditionals)
+1. [Блоки кода](#blocks)
+1. [Комментарии](#comments)
+1. [jQuery](#jquery)
+1. [Быстродействие](#performance)
+1. [Ресурсы](#resources)
+
+## <a name='es2015'>ES2015</a>
+
+На проектах используется система сборки [`startanull`](https://github.com/hustlahusky/startanull), которая позволяет использовать новый стандарт JavaScript - [ECMAScript 2015](https://learn.javascript.ru/es-modern), и компилироваь его в привычный всем бразуерам ES5.
+
+- Указывайте директиву use strict в начале файла, для работы с новым стандартом:
+
+```javascript
+'use strict';
+```
+
+- Объявляйте переменные через `let`, а константы через `const`
+
+```javascript
+const CONSTANT_NAME = 'constant';
+let variableName = 'value';
+```
+
+- Используйте стрелочные функции (arrow functions), когда внутри нее не требуется использовать `this`
+
+```javascript
+$(window).load(() => {
+  // Do something
+  
+  // But
+  $('form-selector').submit(function(e) {
+    e.preventDefault();
+    let form = $(this);
+  });
+});
+```
+
+- Разбивайте код на модули, подключаемые в основной файл. Так же все зависимости, как jquery, UIkit, underscore и т.д., устанавливайте чере `npm` и подключайте, так где они необходимы.
+
+```javascript
+// module.js
+import $ from 'jquery'; // from node_modules
+export default (() => {
+  let body = $('body');
+  return () => {
+    body.addClass('className');
+  };
+})();
+
+// main.js
+import module form './module'; // local module
+module();
+```
+
+## <a name='whitespace'>Пробелы</a>
+
+- Для отступов использовать 2 пробела. В этом примере `∙∙∙∙` - четыре пробела, а `――――` - один отступ с табуляцией.
+
+```javascript
+// плохо
+function() {
+∙let name;
+}
+
+// плохо
+function() {
+∙∙∙∙let name;
+}
+
+// плохо
+function() {
+	let name;
+}
+
+// хорошо
+function() {
+∙∙let name;
+}
+```
+
+- Используйте отступы, когда делаете цепочки вызовов.
+
+```javascript
+// плохо
+$('#items').find('.selected').highlight().end().find('.open').updateCount();
+
+// хорошо
+$('#items')
+  .find('.selected')
+    .highlight()
+    .end()
+  .find('.open')
+    .updateCount();
+```
+
+**[[⬆]](#Оглавление)**
+
+## <a name='types'>Типы</a>
+
+- **Простые типы**: Когда вы взаимодействуете с простым типом, вы взаимодействуете непосредственно с его значением в памяти.
+
++ `string`
++ `number`
++ `boolean`
++ `null`
++ `undefined`
+
+```javascript
+let foo = 1;
+let bar = foo;
+
+bar = 9;
+
+console.log(foo, bar); // => 1, 9. foo не изменился
+```
+- **Сложные типы**: Когда вы взаимодействуете со сложным типом, вы взаимодействуете с ссылкой на его значение в памяти.
+
++ `object`
++ `array`
++ `function`
+
+```javascript
+let foo = [1, 2];
+let bar = foo;
+
+bar[0] = 9;
+
+console.log(foo[0], bar[0]); // => 9, 9.
+```
+
+**[[⬆]](#Оглавление)**
+
+## <a name='objects'>Объекты</a>
+
+- Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор `new Object`.
+
+```javascript
+// плохо
+let item = new Object();
+
+// хорошо
+let item = {};
+```
+
+- Не используйте [зарезервированные слова](http://es5.github.io/#x7.6.1) в качестве ключей объектов. Они не будут работать в IE8. [Подробнее](https://github.com/airbnb/javascript/issues/61)
+
+```javascript
+// плохо
+let superman = {
+  default: { clark: 'kent' },
+  private: true
+};
+
+// хорошо
+let superman = {
+  defaults: {clark: 'kent'},
+  hidden: true
+};
+```
+
+- Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.
+
+```javascript
+// плохо
+let superman = {
+  class: 'alien'
+};
+
+// плохо
+let superman = {
+  klass: 'alien'
+};
+
+// хорошо
+let superman = {
+  type: 'alien'
+};
+```
+**[[⬆]](#Оглавление)**
+
+## <a name='arrays'>Массивы</a>
+
+- Для создания массива используйте квадратные скобки. Не создавайте массивы через конструктор `new Array`.
+
+```javascript
+// плохо
+let items = new Array();
+
+// хорошо
+let items = [];
+```
+
+- Если вы не знаете длину массива, используйте `Array::push`.
+
+```javascript
+let someStack = [];
+
+
+// плохо
+someStack[someStack.length] = 'zk';
+
+// хорошо
+someStack.push('zk');
+```
+
+- Если вам необходимо скопировать массив, используйте `Array::slice`. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7)
+
+```javascript
+let len = items.length,
+    itemsCopy = [],
+    i;
+
+// плохо
+for (i = 0; i < len; i++) {
+  itemsCopy[i] = items[i];
+}
+
+// хорошо
+itemsCopy = items.slice();
+```
+
+- Чтобы скопировать похожий по свойствам на массив объект (например, `NodeList` или `Arguments`), используйте `Array::slice`.
+
+```javascript
+function trigger() {
+  let args = Array.prototype.slice.call(arguments);
+  ...
+}
+```
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='commas'>Запятые</a>
+
+- Запятые в начале строки: **Нет.**
+
+```javascript
+// плохо
+let once
+  , upon
+  , aTime;
+
+// хорошо
+let once,
+    upon,
+    aTime;
+
+// плохо
+let hero = {
+    firstName: 'Bob'
+  , lastName: 'Parr'
+  , heroName: 'Mr. Incredible'
+  , superPower: 'strength'
+};
+
+// хорошо
+let hero = {
+  firstName: 'Bob',
+  lastName: 'Parr',
+  heroName: 'Mr. Incredible',
+  superPower: 'strength'
+};
+```
+
+- Дополнительная запятая в конце объектов: **Нет**. Она способна вызвать проблемы с IE6/7 и IE9 в режиме совместимости. В некоторых реализациях ES3 запятая в конце массива увеличивает его длину на 1, что может вызвать проблемы. Этот вопрос был прояснен только в ES5 ([оригинал](http://es5.github.io/#D)):
+
+```javascript
+// плохо
+let hero = {
+  firstName: 'Kevin',
+  lastName: 'Flynn',
+};
+
+let heroes = [
+  'Batman',
+  'Superman',
+];
+
+// хорошо
+let hero = {
+  firstName: 'Kevin',
+  lastName: 'Flynn'
+};
+
+let heroes = [
+  'Batman',
+  'Superman'
+];
+```
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='semicolons'>Точки с запятой</a>
+
+- **Да.**
+
+```javascript
+// плохо
+(function() {
+  let name = 'Skywalker'
+  return name
+})()
+
+// хорошо
+(function() {
+  let name = 'Skywalker';
+  return name;
+})();
+
+// хорошо
+;(function() {
+  let name = 'Skywalker';
+  return name;
+})();
+```
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='type-coercion'>Приведение типов</a>
+
+- Выполняйте приведение типов в начале операции, но не делайте его избыточным.
+- Строки:
+
+```javascript
+//  => this.reviewScore = 9;
+
+// плохо
+let totalScore = this.reviewScore + '';
+
+// хорошо
+let totalScore = '' + this.reviewScore;
+
+// плохо
+let totalScore = '' + this.reviewScore + ' итого';
+
+// хорошо
+let totalScore = this.reviewScore + ' итого';
+```
+
+- Используйте `parseInt` для чисел и всегда указывайте основание для приведения типов.
+
+```javascript
+let inputValue = '4';
+
+// плохо
+let val = new Number(inputValue);
+
+// плохо
+let val = +inputValue;
+
+// плохо
+let val = inputValue >> 0;
+
+// плохо
+let val = parseInt(inputValue);
+
+// хорошо
+let val = Number(inputValue);
+
+// хорошо
+let val = parseInt(inputValue, 10);
+```
+
+- Если по какой-либо причине вы делаете что-то дикое, и именно на `parseInt` тратится больше всего ресурсов, используйте побитовый сдвиг [из соображений быстродействия](http://jsperf.com/coercion-vs-casting/3), но обязательно оставьте комментарий с объяснением причин.
+
+```javascript
+// хорошо
+/**
+ * этот код медленно работал из-за parseInt
+ * побитовый сдвиг строки для приведения ее к числу
+ * работает значительно быстрее.
+ */
+let val = inputValue >> 0;
+```
+
+- **Примечание:** Будьте осторожны с побитовыми операциями. Числа в JavaScript являются [64-битными значениями](http://es5.github.io/#x4.3.19), но побитовые операции всегда возвращают 32-битные значенения. [Источник](http://es5.github.io/#x11.7). Побитовые операции над числами, значение которых выходит за 32 бита (верхний предел: 2,147,483,647).
+
+```
+2147483647 >> 0 //=> 2147483647
+2147483648 >> 0 //=> -2147483648
+2147483649 >> 0 //=> -2147483647
+```
+
+- логические типы(Boolean):
+
+```javascript
+let age = 0;
+
+// плохо
+let hasAge = new Boolean(age);
+
+// хорошо
+let hasAge = Boolean(age);
+
+// хорошо
+let hasAge = !!age;
+```
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='strings'>Строки</a>
+
+- Используйте одинарные кавычки `''` для строк.
+
+```javascript
+// плохо
+let name = "Боб Дилан";
+
+// хорошо
+let name = 'Боб Дилан';
+
+// плохо
+let fullName = "Боб " + this.lastName;
+
+// хорошо
+let fullName = 'Дилан ' + this.lastName;
+```
+
+- Используйте строки-шаблоны, когда внутри них необходимо использовать переменные:
+
+```javascript
+let apples = 2;
+let oranges = 3;
+console.log(`${apples} + ${oranges} = ${apples + oranges}`); // 2 + 3 = 5
+```
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='functions'>Функции</a>
+
+- Объявление функций:
+
+```javascript
+// объявление анонимной функции
+let anonymous = function () {
+  return true;
+};
+
+// объявление именованной функции
+let named = function named() {
+  return true;
+};
+
+// объявление функции, которая сразу же выполняется (замыкание)
+(function () {
+  console.log('Если вы читаете это, вы открыли консоль.');
+})();
+```
+- Никогда не объявляйте функцию внутри блока кода — например в if, while, else и так далее. Единственное исключение — блок функции. Вместо этого присваивайте функцию уже объявленной через `let` переменной. Условное объявление функций работает, но в различных браузерах работает по-разному.
+- **Примечание** ECMA-262 устанавливает понятие `блока` как списка операторов. Объявление функции (не путайте с присвоением функции переменной) не является оператором. [Комментарий по этому вопросу в ECMA-262](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).
+
+```javascript
+// плохо
+if (currentUser) {
+  function test() {
+    console.log('Плохой мальчик.');
+  }
+}
+
+// хорошо
+let test;
+if (currentUser) {
+  test = function test() {
+    console.log('Молодец.');
+  };
+}
+```
+
+- Никогда не используйте аргумент функции `arguments`, он будет более приоритетным над объектом `arguments`, который доступен без объявления для каждой функции.
+
+```javascript
+// плохо
+function nope(name, options, arguments) {
+  // ...код...
+}
+
+// хорошо
+function yup(name, options, args) {
+  // ...код...
+}
+```
+
+**[[⬆]](#Оглавление)**
+
+## <a name='properties'>Свойства</a>
+
+- Используйте точечную нотацию для доступа к свойствам и методам.
+
+```javascript
+let luke = {
+  jedi: true,
+  age: 28
+};
+
+// плохо
+let isJedi = luke['jedi'];
+
+// хорошо
+let isJedi = luke.jedi;
+```
+
+- Используйте нотацию с `[]`, когда вы получаете свойство, имя для которого хранится в переменной.
+
+```javascript
+let luke = {
+  jedi: true,
+  age: 28
+};
+
+function getProp(prop) {
+  return luke[prop];
+}
+
+let isJedi = getProp('jedi');
+```
+
+**[[⬆]](#Оглавление)**
+
+## <a name='conditionals'>Условные выражения и равенства</a>
+
+- Используйте `===` и `!==` вместо `==` и `!=`.
+- Условные выражения вычисляются посредством приведения к логическому типу Boolean через метод `ToBoolean` и всегда следуют следующим правилам:
+
++ **Object** всегда соответствует **true**
++ **Undefined** всегда соответствует **false**
++ **Null** всегда соответствует **false**
++ **Boolean** остается неизменным
++ **Number** соответствует **false**, если является **+0, -0, или NaN**, в противном случае соответствует **true**
++ **String** означает **false**, если является пустой строкой `''`, в противном случае **true**. Условно говоря, для строки происходит сравнение не ее самой, а ее длины – в соответствии с типом number.
+
+```javascript
+if ([0]) {
+  // true
+  // Массив(Array) является объектом, объекты преобразуются в true
+}
+```
+
+- Используйте короткий синтаксис.
+
+```javascript
+// плохо
+if (name !== '') {
+  // ...код...
+}
+
+// хорошо
+if (name) {
+  // ...код...
+}
+
+// плохо
+if (collection.length > 0) {
+  // ...код...
+}
+
+// хорошо
+if (collection.length) {
+  // ...код...
+}
+```
+
+- Более подробно можно прочитать в статье [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) от Angus Croll
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='blocks'>Блоки кода</a>
+
+- Используйте фигурные скобки для всех многострочных блоков.
+
+```javascript
+// плохо
+if (test) {
+  return false;
+}
+
+// хорошо
+if (test)
+  return false;
+
+// еще лучше
+if (test) return false;
+
+// плохо
+function() { return false; }
+
+// хорошо
+function() {
+  return false;
+}
+```
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='comments'>Комментарии</a>
+
+- Документируйте код в формате [jsdoc](http://usejsdoc.org/). Включите описание, опишите типы и значения для всех параметров и возвращаемых значений.
+
+```javascript
+// плохо
+// make() возвращает новый элемент
+// основываясь на получаемом имени тэга
+//
+// @param <String> tag
+// @return <Element> element
+function make(tag) {
+
+  // ...создаем element...
+
+  return element;
+}
+
+// хорошо
+/**
+ * make() возвращает новый элемент
+ * основываясь на получаемом имени тэга
+ *
+ * @param <String> tag
+ * @return <Element> element
+ */
+function make(tag) {
+
+  // ...создаем element...
+
+  return element;
+}
+```
+
+- Используйте `//` для комментариев в одну строку. Размещайте комментарии на новой строке над темой комментария. Добавляйте пустую строку над комментарием.
+
+```javascript
+// плохо
+let active = true;  // устанавливаем активным элементом
+
+// хорошо
+// устанавливаем активным элементом
+let active = true;
+
+// плохо
+function getType() {
+  console.log('проверяем тип...');
+  // задаем тип по умолчанию 'no type'
+  let type = this._type || 'no type';
+
+  return type;
+}
+
+// хорошо
+function getType() {
+  console.log('проверяем тип...');
+
+  // задаем тип по умолчанию 'no type'
+  let type = this._type || 'no type';
+
+  return type;
+}
+```
+
+- Префикс `TODO` помогает другим разработчикам быстро понять, что вы указываете на проблему, к которой нужно вернуться в дальнейшем, или если вы предлагете решение проблемы, которое должно быть реализовано. Эти комментарии отличаются от обычных комментариев, так как не описывают текущее поведение, а призывают к действию, например `TODO -- нужно реализовать интерфейс`. Такие комментарии также автоматически обнаруживаются многими IDE и редакторами кода, что позволяет быстро перемещаться между ними.
+
+- Используйте `// TODO FIXME:` для аннотирования проблем
+
+```javascript
+function Calculator() {
+
+  // TODO FIXME: тут не нужно использовать глобальную переменную
+  total = 0;
+
+  return this;
+}
+```
+
+- Используйте `// TODO:` для указания решений проблем
+
+```javascript
+function Calculator() {
+
+  // TODO: должна быть возможность изменять значение через параметр функции
+  this.total = 0;
+
+  return this;
+}
+```
+
+**[[⬆]](#Оглавление)**
+
+## <a name='jquery'>jQuery</a>
+
+- Для jQuery-переменных используйте префикс `$`.
+
+```javascript
+// плохо
+let sidebar = $('#sidebar');
+
+// хорошо
+let $sidebar = $('#sidebar');
+```
+
+- Кэшируйте jQuery-запросы. Каждый новый jQuery-запрос делает повторный поиск по DOM-дереву, и приложение начинает работать медленнее.
+
+```javascript
+// плохо
+function setSidebar() {
+  $('#sidebar').hide();
+
+  // ...код...
+
+  $('#sidebar').css({
+    backgroundColor: 'pink'
+  });
+}
+
+// хорошо
+function setSidebar() {
+  let $sidebar = $('#sidebar');
+  $sidebar.hide();
+
+  // ...код...
+
+  $sidebar.css({
+    backgroundColor: 'pink'
+  });
+}
+```
+
+- Для DOM-запросов используйте классический каскадный CSS-синтаксис `$('.sidebar ul')` или родитель > потомок `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
+- Используйте `find` для поиска внутри DOM-объекта.
+
+```javascript
+// плохо
+$('ul', '#sidebar').hide();
+
+// плохо
+$('#sidebar').find('ul').hide();
+
+// хорошо
+$('#sidebar ul').hide();
+
+// хорошо
+$('#sidebar > ul').hide();
+
+// хорошо
+$sidebar.find('ul').hide();
+```
+
+- Для поиска одного элемента используйте только идентификатор `#id`.
+```javascript
+// плохо
+$('.menu button');
+
+// плохо
+$('.menu button#menuToggler');
+
+// плохо
+$('button#menuToggler');
+
+// хорошо
+$('#menuToggler');
+```
+
+- Для задания обработчика элементу используйте метод [`.on()`](http://api.jquery.com/on/).
+```javascript
+// Плохо
+$input
+.click(function () { /* ... */ })
+.focus(function () { /* ... */ })
+.blur(function () { /* ... */ });
+
+// Хорошо
+$input
+.on('click', function () { /* ... */ })
+.on('focus', function () { /* ... */ })
+.on('blur', function () { /* ... */ });
+
+// Лучше
+// Несколько событий разделяются пробелами
+$field.on('click focus', function () { /* ... */ });
+
+$input.on({
+// Несколько событий разделяются пробелами
+'click focus': function () { /* ... */ },
+blur: function () { /* ... */ }
+});
+```
+
+**[[⬆]](#Оглавление)**
+
+## <a name='performance'>Быстродействие</a>
+
+- [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/)
+- [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2)
+- [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost)
+- [Bang Function](http://jsperf.com/bang-function)
+- [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13)
+- [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text)
+- [Long String Concatenation](http://jsperf.com/ya-string-concat)
+- В процессе наполнения...
+
+**[[⬆]](#Оглавление)**
+
+
+## <a name='resources'>Ресурсы</a>
+
+**Прочитайте это**
+
+- [Annotated ECMAScript 5.1](http://es5.github.com/)
+
+**Другие руководства по стилю**
+
+- [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
+- [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)
+- [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/)
+
+**Другие стили**
+
+- [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen
+- [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52)
+- [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript)
+
+**Дальнейшее прочтение**
+
+- [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll
+- [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer
+
+**Книги**
+
+- [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
+- [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
+- [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X)  - Ross Harmes and Dustin Diaz
+- [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
+- [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
+- [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
+- [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
+- [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
+- [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
+- [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg
+- [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
+- [JSBooks](http://jsbooks.revolunet.com/)
+
+**Блоги**
+
+- [DailyJS](http://dailyjs.com/)
+- [JavaScript Weekly](http://javascriptweekly.com/)
+- [JavaScript, JavaScript...](http://javascriptweblog.wordpress.com/)
+- [Bocoup Weblog](http://weblog.bocoup.com/)
+- [Adequately Good](http://www.adequatelygood.com/)
+- [NCZOnline](http://www.nczonline.net/)
+- [Perfection Kills](http://perfectionkills.com/)
+- [Ben Alman](http://benalman.com/)
+- [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/)
+- [Dustin Diaz](http://dustindiaz.com/)
+- [nettuts](http://net.tutsplus.com/?s=javascript)
+
+**[[⬆]](#Оглавление)**

1-standarts/1.4-images.md

+# Изображения и их оптимизация
+**Статус:** черновик.
+
+
+## Растр
+С вырезанием растра проблем обычно не возникает.
+Проблемы возникают в размерах файлов.
+Основные 2 формата изображений: JPG и PNG.
+В первом хранятся всякие фотографии или фоны.
+В PNG - иконки, все что требует прозрачности.
+
+
+## Оптимизация растровых изображений
+Картинки следует ужимать в любом случае.
+Для начала стоит использовать Save for Web в самом Adobe Photoshop.
+Затем, для JPG используется JPEGMini: использовать можно [на сайте](http://www.jpegmini.com/main/shrink_photo)
+или установить условнобесплатное приложение, бесплатная версия позволяет ужимать до 20 фотографий в день,
+это как правило, вполне достатончно. Экономия может достигать 50-500%.
+Для PNG есть сервис [TinyPNG](https://tinypng.com). Суть заключается в том, что глубина цвета с 24 бит меняется на 8 бит.
+Т.е. получается всего 256 цветов, но для отдельных иконок этого более чем достаточно.
+При этом экономия получается примерно вдвое-втрое.
+Нет смысла ужимать отдельные иконки, которые пойдут в спрайт, но есть смысл ужимать спрайт целиком.
+TinyPNG доступен в виде пакета для Grunt и Gulp, который ужимает все это в автоматическом режиме,
+единственное ограничение — 500 картинок в месяц.
+
+
+## Вектор в Adobe Illustartor
+Вектор из AI – при наличии установленного AI проблем нет тоже.
+Открывается Vector Smart Object в самом AI (контекстное меню слоя — Редактирвоать содержимое / Edit Contents)
+и оттуда экспортируется в SVG. В случае отсутствия установленного иллюстратора можно из Photoshop
+экспортировать его в отдельный AI файл (контекстное меню слоя – Экспорт содержимого / Export Contents)
+и сконвертировать в SVG – https://cloudconvert.org/ai-to-svg.
+Но тут проблема в том, что экспортируется файл целиком, поэтому всякие наборы иконок вырезать таким способом не получится.
+
+
+## Вектор в формах Photoshop
+Формы (shape) — это лучший вариант. Можно вырезать самим Photoshop,
+если версия CC или CC2014 – http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/.
+Либо есть плагины (платные) — Zeick и SVG Hero. Все это хорошо, но в некоторых конвретных случаях все это может лагать
+и вырезать SVG, внутри которого PNG в BASE64. Например, сам Photoshop не умеет экспортировать папки шейпов.
+По размеру можно понять или просто проверить содержимое иконки. Такие «кривые» иконки мало того что не вектор,
+весят больше чем обычный png, так еще и не отображаются на мобильниках и в сафари.
+
+
+## Использование векторных иконок
+Самый лучший вариант — строчный SVG, внедрённый в HTML-разметку.
+Это несколько «захламляет» разметку, но зато позволяет делать очень крутые вещи.
+Смена цвета иконок из стилей, SMIL-анимация.
+По этому поводу можно посмотреть лекцию http://video.yandex.ru/users/ya-events/view/3228.
+Тем более, SVG поддерживается всеми современными браузерами.
+Проблема есть лишь в IE8 и Android 2.3.
+Но это решаемо изящным костылем — навешивание фона на `<svg>` элемент.
+А для конвертации SVG в PNG есть всякие Grunt-задачи.
+
+
+## Минификация SVG
+Для SVG есть прекрасный инструмент — [SVGO](https://github.com/svg/svgo).
+Как показывает практика, после экспорта почти любая иконка ужимается вдвое, были случаи с уменьшением и на 90%.
+Но с SVGO стоит быть аккуратным — некоторые особо сложные SVG он портит.
+После экспорта из редакторов внутри SVG есть куча ненужного кода, но SVGO не знает, что именно лишнее.
+Например, Sketch при экспорте SVG добавляет две лишних обертки `<g>`,
+на многие мешает атрибуты из области видимости скетча (ну и сама область видимости).
+Примерно так же поступает и Adobe Illustrator.
+По-хорошему, всё лишнее убрать и затем пропустить через SVGO.

1-standarts/1.5-editorconfig.md

+# Настройки редактора кода
+
+**Статус:** черновик.
+
+[EditorConfig](http://editorconfig.org/) это конфигурационный файл и набор расширений, к большому количеству редакторов кода и IDE.
+
+Его задача — создать единый формат настроек, и, раз и навсегда, решить вопросы вроде “табы или пробелы” для всех IDE и всех языков программирования.
+Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию. 
+
+В каждом проекте Золотого Кода в корне находится файл конфигурации `.editorconfig`. В нем уже описано большинство соглашений по форматированию кода. Все что вам требуется - настроить свой редактор для работы с ним.

1-standarts/readme.md

+# Стандарт по написанию кода в "Золотом Коде"
+
+Стандарты для разработки гибкого, надёжного и поддерживаемого кода.
+
+Строго соблюдайте, предложенные здесь, соглашения.<br>
+Если вы нашли ошибку, будь она большая или маленькая, сразу сообщите об этом.<br>
+Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, создайте [issue](https://git.zolotoykod.ru/111/developer-guide/issues/new).
+
+В наших проектах мы используем автоматизированные инструменты для облегчения разработки сайтов - Gulp c препроцессорами Pug (бывш. Jade) и Less (и др.), систему конроля версий - Git, код проекта в репозитории git.zolotoykod.ru
+
+- Каждая строка кода должна казаться написанной только одним человеком, вне зависимости от количества разработчиков.
+- Стили, предназначенные только для одной страницы, не должны конфликтовать и видоизменять другие.
+- При копировании строк кода из примеров из внешних источников - **форматировать код в соответствии со стандартом**.
+- Оставляйте новую строку в конце файла.
\ No newline at end of file

2-git/2.1-git.md

+# Git - система контроля версий
+
+## 1. Устанавливаем Git
+
+Скачайте и установите консольную версию [Git с официального сайта](https://git-scm.com/downloads)
+
+## 2. Знакомимся с Git
+
+### 2.1. Проходим обучающийся курс
+1. Для новичков рекомендуется пройти небольшой обучающийся курс [Git How To](http://githowto.com/ru).
+1. Разбираемся в том, как устроена работа в команде - [Github Flow](https://guides.github.com/introduction/flow/)
+
+
+### 2.2. Полезные ссылки
+
+#### 2.2.1. Разбираемся с Git
+* [Git How To](http://githowto.com/ru) — это интерактивный тур, который познакомит вас с основами Git. Тур создан с пониманием того, что лучшим способом научиться чему-нибудь — сделать это своими руками.
+* [Команды git](http://git-scm.com/book/commands) - полный список команд на официальном сайте
+* [git - the simple guide](http://rogerdudler.github.io/git-guide/)
+* [Ежедневная работа с Git](http://habrahabr.ru/post/174467/) - статья на Хабре
+* [Что нам стоит Git настроить!](http://habrahabr.ru/post/164297/) - статья на Хабре
+
+#### 2.2.2. Видео
+* [Git & GitHub Tutorials](https://www.youtube.com/playlist?list=PLEACDDE80A79CE8E7)
+
+#### 2.2.3. Книги
+* [Pro Git](http://git-scm.com/book/ru/v2) - официальная книга Git
+* [Магия Git](http://dl.dropboxusercontent.com/u/281916/delete/book.pdf)
+
+#### 2.2.4. Шпаргалки
+* [GitHub Cheatsheet](https://raw.githubusercontent.com/github/training-kit/master/downloads/github-git-cheat-sheet.pdf)
+
+
+## 3. Работаем с Git
+
+### 3.1. Стартуем проект с нуля:
+
+* `git init` - инициализируем Git.
+* `git add -A` - индексируем все файлы.
+* `git commit -m 'chore(project): init project'` - коммитим и комментируем в соответствии с соглашением по коммитоименованию.
+* `git remote add origin <url>` - добавляем удалённый репозиторий, где `<url>` - ссылка на git-репозиторий.
+* `git push origin master` - заливаем проект в удалённый репозиторий в ветку `master`.
+* Если залить не удалось, проект уже не пустой и может содержать `readme.md`, поэтому нужно сделать `rebase`:
+```
+git pull --rebase origin master
+```
+* Если есть конфликты, то см. п. 3.4.
+* Заливаем снова.
+
+### 3.2. Разворачиваем уже имеющийся проект
+
+* `git clone <url>` - клонируем проект.
+
+### 3.3. Повседневная работа с проектом
+
+* `git pull --rebase origin master` - обновляем ветку `master` с ключём `--rebase`, чтобы избежать промежуточных коммитов.
+* Если конфликтов не произошло, то пропускаем этот пункт. Если есть, то правим руками (см. п. 3.4).
+* Делаем изменения в коде, например, добавляем главную страницу.
+* `git add -A` - индексируем изменения.
+* `git commit -m 'feat(main): add main page'` - закоммитили в соответствии с соглашением по коммитоименованию.
+* `git push origin master` - заливаем изменения в удалённый репозиторийй в ветку `master`.
+
+### 3.4. Разрешаем конфликты
+
+* Правим руками файлы, содержащие конфликты (посмотреть их можно через `git status`):
+```
+<<<<<<< HEAD
+// 1 секция: Код текущей ветки
+=======
+// 2 секция: Наш изменения в коде
+>>>>>>> master
+```
+
+Чтобы разрешить конфликт, нужно *внимательно* сравнить изменения в 1 секции и добавить недостающий (новый) код в свою (2 секцию). После этого удаляем всё, кроме 2 секции.
+
+```
+// 2 секция: Наш изменения в коде
+```
+
+* После этого индексируем изменения.
+```
+git add -A
+```
+
+* Далее нужно продолжить `rebase` с помощью команды:
+```
+git rebase --continue
+```
+
+* Если конфликтов больше нет и `reabase` завершился, то на это всё, если конфликты есть, то повторить итерацию.
+
+### 3.5. Работаем в отдельной ветке
+
+#### 3.5.1. Создаём ветку
+
+* `git pull --rebase origin master` - обновляем ветку `master` с ключём `--rebase`, чтобы избежать промежуточных коммитов.
+* `git checkout -b <name>` - создаём ветку, где `<name>` - название фичи.
+* Делаем изменения в коде, например, добавляем главную страницу.
+* `git add -A` - индексируем изменения.
+* `git commit -m 'feat(main): add main page'` - закоммитили в соответствии с соглашением по коммитоименованию.
+* `git push origin <name>` - заливаем нашу ветку в удалённый репозиторий.
+
+
+#### 3.5.2. Сливаем изменения в `master`.
+
+* Переходим в ветку `master` и сливаем в неё фичу:
+```
+git merge <name>
+```
+* Разрешаем конфликты, если они возникли
+* `git push origin master` - заливаем итоговые изменения в удалённый репозиторий.
+
+### 3.6. Полезные команды на всякий случай
+
+* `git commit --amend` - позволяет изменить название коммита. Если нужно включить ещё и изменённые файлы, то перед этим проиндексировать файлы.
+* `git reset --hard HEAD^` - полное удаление последнего коммита.
+
+### 4. Соглашение по именованию коммитов
+
+Используется подход conventional changelog.
+
+#### 4.1. Формат
+
+Каждый коммит начинается с **типа (type)**, **области (scope)** и **сообщения (subject)**.
+
+В самом конце может быть **описание (body)** с замечанием и т.п.
+
+- `type` - тип изменений, который содержит коммит;
+- `scope` - область кода, в которой производились изменения;
+- `subject` - сообщение;
+- `body` (не обязательно) - подробно описание изменнений или важное замечание.
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+```
+
+Примеры:
+
+```
+feat(ruler): add inches as well as centimeters
+fix(protractor): fix 90 degrees counting as 91 degrees
+refactor(pencil): use graphite instead of lead
+
+Closes #640.
+
+Graphite is a much more available resource than lead, so we use it to lower the price.
+fix(pen): use blue ink instead of red ink
+
+BREAKING CHANGE: Pen now uses blue ink instead of red.
+
+To migrate, change your code from the following:
+
+`pen.draw('blue')`
+
+To:
+
+`pen.draw('red')`
+```
+
+Каждая строка в коммите может содержать не более 100 символов.
+
+#### 4.2. Типы
+
+- `feat` - новая фича;
+- `fix` - багофикс;
+- `docs` - изменения в документации;
+- `style` - форматирование кода или любые другие изменения, не влияющие на работу кода;
+- `refactor` - изменения в коде, которые не относятся к фиксам или фиче;
+- `test` - добавлен или обновлён тест;
+- `chore` - измененения в сборщике, зависимостях и т.п.
+
+#### 4.3. Область
+
+Может быть любым специфичным местом в коде, в котором были изменения. **Не допускается более одной области.**
+
+#### 4.4. Сообщения
+
+- Только английский язык, никакого транслита;
+- Используйте настоящее время, например, `change`, но не `changed` или `changes`;
+- Первое слово с прописной буквы, не с заглавной;
+- Не ставьте точку на конце.

2-git/2.2-git.zolotoykod.md

+# Настройка доступа к git Золотого Кода
+
+## Шаг 1. Генерация SSH ключа
+
+Работа с Git Золотого Кода происходит по ssh. Поэтому для начала надо сгенерировать ssh-ключ. На Unix системах это делается из стандартного терминала, а на Windows можно использовать Bash on Windows или Git-Bash, поставляемый вместе с Git.
+
+```bash
+ssh-keygen
+```
+
+После этого в домашней директории пользователя создастся папка `.ssh`, внутри которой будет 2 файла:
+* id_rsa - Приватный ключ
+* id_rsa.pub - Публичный ключ
+
+## Шаг 2. Привязываем ключ к своему профилю
+
+* Скопируйте содержимое вашего публичного ключа id_rsa.pub
+* На [git.zolotoykod.ru](http://git.zolotoykod.ru), перейдите в настройки профиля
+* Добавьте свой ключа в разделе *SSH Keys*.
+* Проверьте работоспособность ключа
+    ```bash
+    ssh -T git@git.zolotoykod.ru -p 22222
+    ```
+
+    Данная команда должна выдать следующий ответ:
+    ```bash
+    Welcome to GitLab, [Your Name]!
+    ```
+
+### Шаг 3. Настройка конфига SSH
+
+В папке `.ssh` создайте файл `config` или измените существующий. Добавьте в него следующие строки:
+
+```
+Host git.zolotoykod.ru
+  HostName git.zolotoykod.ru
+  Port 22222
+  IdentityFile ~/.ssh/id_rsa
+```
+
+Где `~/.ssh/id_rsa` - путь до вашего приватного ключа. Для Git-Bash на Windows необходимо указать полный путь от буквы локального диска до файла.
+
+Теперь вы можете можете работать с репозиториями Git.
+
+### Шаг 4. Прокидываие ключей (Forwarding)
+
+Данный шаг необязателен. Его можно выполнить, если Вам требуется использовать ваши ключи для доступа к Git при работе с подключением к другому серверу по ssh.
+
+Для автоматического добавления ключей при старте терминала добавьте в `~/.bashrc` следующий скрипт:
+
+```bash
+# Autolaunch ssh-agent
+env=~/.ssh/agent.env
+
+agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }
+
+agent_start () {
+    (umask 077; ssh-agent >| "$env")
+    . "$env" >| /dev/null ; }
+
+add_private_keys () {
+  for f in ~/.ssh/*.pub; do
+    private="${f/.pub/''}"
+    ssh-add "$private"
+  done
+}
+
+agent_load_env
+
+# agent_run_state: 0=agent running w/ key; 1=agent w/o key; 2= agent not running
+agent_run_state=$(ssh-add -l >| /dev/null 2>&1; echo $?)
+
+if [ ! "$SSH_AUTH_SOCK" ] || [ $agent_run_state = 2 ]; then
+    agent_start
+    add_private_keys
+elif [ "$SSH_AUTH_SOCK" ] && [ $agent_run_state = 1 ]; then
+    add_private_keys
+fi
+
+unset env
+```
+
+А в `~/.ssh/config` следующую директиву:
+
+```
+Host *
+  ForwardAgent yes
+```
+
+После этого подключитесь к серверу по ssh и проверьте работоспособность ключа
+
+```bash
+ssh -T git@git.zolotoykod.ru -p 22222
+```
+
+Эта команда должна вывести Вам приветственное сообщение с Вашим именем.
+
+[Using SSH agent forwarding](https://developer.github.com/guides/using-ssh-agent-forwarding/)
+[Working with SSH key passphrases](https://help.github.com/articles/working-with-ssh-key-passphrases/#auto-launching-ssh-agent-on-msysgit)
+

3-software/3.1-local-server.md

+# Локальный сервер
+
+В качестве локального сервера настоятельно рекомендуется использовать [Nginx Stack by Bitnami](https://bitnami.com/stack/nginx).
+
+Bitnami Nginx Stack предоставляет полноценное окружение для разработки на PHP, MySQL и Nginx. В пакет также входят: phpMyAdmin, SQLite, ImageMagick, FastCGI, Memcache, GD, CURL, PEAR, PECL и другие компоненты. Также известен как LEMP для Linux, WEMP для Windows и MEMP для OS X.
+
+Документация по [Nginx Stack](https://wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack)
+
+## После установки
+
+### Обновить Composer
+
+Composer - менеджер зависимостей для PHP. По-умолчанию в Nginx Stack включен Composer, но обычно устаревшей версии. Поэтому лучше сразу его обновить и настроить работу с ним.
+
+1. Скачайте последнюю версию файла [`composer.phar`](https://getcomposer.org/download/)
+1. Замените им устаревшую версию в папке `php`
+1. Создайте bat-файл для исполнения команды composer (для Windows):
+    ```
+    echo @php "%~dp0composer.phar" %*>composer.bat
+    ```
+1. Добавить папку php в PATH
+
+### Работа с проектами
+
+Как разворачивать новые проекты описано в [документации](https://wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack#How_can_I_create_a_custom_PHP_application.3f) + настройки [создания виртуального хоста](https://wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack#How_to_create_a_Virtual_Host.3f)

3-software/IDE Plugins.md

+# Список используемых плагинов в редакторах кода или IDE
+
+_Обращаем внимание, что это не полный список только любимых плагинов._
+
+### Sublime Text
+
+- [Emmet](http://emmet.io) — пожалуй, самый полезный плагин со сниппетами для вёрстки HTML. Прирост к скорости — 100500%.
+- [GitGutter](https://github.com/jisaacks/GitGutter) — плагин для git с подсветкой измнений в файле от последнего коммита.
+- [AngularJS](https://github.com/angular-ui/AngularJS-sublime-package) — поддержка фреймворка в среде: подсветка синтаксиса, ключевых слов, анализ проекта и его индексирование; позволяет быстро найти нужный контроллер/директиву/фильтр, понимает доку, подскажет название переменной из inject.
+- [SublimeLinter](http://www.sublimelinter.com/en/latest/) — обнаруживает большинство ошибок и опечаток  уже на стадии написания кода.
+- [Project Manager](https://github.com/randy3k/Project-Manager) — управляет проектами.
+- [Color Highlighter](https://github.com/Monnoroch/ColorHighlighter) — подсвечивает текст в цвет, который указан.
+- [Color picker](http://weslly.github.io/ColorPicker/) — позволяет вставить нужный hex-цвет в стили или HTML.
+- [SideBarEnchancements](https://github.com/titoBouzout/SideBarEnhancements) —  ништяки для сайдабара типа копирования файлов, переименования, открытия в чем-нибудь и так далее.
+- [EasyMotion](https://github.com/tednaleid/sublime-EasyMotion) – удобное перемещение к указанному символу.
+- [FileBrowser](https://github.com/aziz/SublimeFileBrowser) — проводник сразу в редакторе.
+- [Bracket Highlighter](https://github.com/facelessuser/BracketHighlighter) — подсвечивает парные скобки; проще не путаться, когда их много.
+- [Prettify](https://github.com/victorporof/Sublime-HTMLPrettify) — плагин для форматирования кода.
+- [LiveReload](https://github.com/dz0ny/LiveReload-sublimetext2) — перезагружалка страницы.
+
+
+### Webstorm, PHPStorm
+
+_WS-адепты считают, что их IDE совершенна и не требует сторонних плагинов. Но мы смогли вытащить из них целых два._
+
+- [EditorConfig](http://editorconfig.org) — плагин для форматирования чужого кода без боли и конфликтов в VCS.
+- [Deployment](https://www.jetbrains.com/webstorm/help/deployment.html) — возможность автозагрузки/синхронизации кода на удаленом хостинге, помогает в случае удаленного расположение проекта.
+
+
+### Brackets
+
+- [Extract for Brackets (Preview)](https://github.com/adobe/brackets) — фотошоп скоро будет не нужен! Всё в редакторе! От создателей Фотошопа.
+
+### VIM
+
+- [neocomplete](https://github.com/Shougo/neocomplete.vim) — крутой автокомплит кода.
+
+### Emacs
+
+Мне было лень разбираться, поэтому вот:
+- flycheck
+- auto-complete
+- pony-mode
+- pep8
+- tabbar
+- tabbar-ruler
+- highlight-parentheses
+- js2-mode
+- flymake-jshint
+- expand-region
+- js2-refactor
+- less-css-mode
+
+### Atom
+- [emmet](https://atom.io/packages/emmet) - ускорение набора HTML и CSS при помощи сниппетов;
+- [stylus](https://atom.io/packages/Stylus) - подсветка синтаксиса Stylus, также включает в себя сниппеты, но лучше использовать emmet, как наиболее популярное решение для разных редакторов;
+- [language-jade](https://atom.io/packages/language-jade) - подсветка синтаксиса Jade (Pug);
+- [merge-conflicts](https://atom.io/packages/merge-conflicts) - merge-tool для разрешения конфликтов в Git;
+- [blame](https://atom.io/packages/blame) - вывод построковой истории изменений для выбранного файла;
+- [atom-ungit](https://atom.io/packages/atom-ungit) - подробный просмотр изменений в Git-репозитории (ветки, коммиты, подсветка изменений);
+- [git-control](https://atom.io/packages/git-control) - GUI для Git;
+- [vim-mode](https://atom.io/packages/vim-mode) - добавляет возможности Vim;
+- [file-icons](https://atom.io/packages/file-icons) - заменяет стандартные иконки в файловом дереве на иконки, соответствующие расширениям файлов;
+- [pigments](https://atom.io/packages/pigments) - подсвечивает определения цветов в CSS соответствующими цветами;
+- [sync-settings](https://atom.io/packages/sync-settings) - синхронизация настроек редактора через Gist;
+- [tabs-to-spaces](https://atom.io/packages/tabs-to-spaces) - заменяет табы на пробелы, если необходимо в текущем проекте.

3-software/readme.md

+# Програмное обеспечение
+
+## Основные инструменты
+
+* [Git](https://git-scm.com/downloads). (Вернуться в раздел по Git)
+* [Python 2.7](https://www.python.org/) (**Добавить в PATH после установки!**)
+
+### Node.js
+
+Node.js используется практически в каждом проекте, как минимум для сборки фронт-энда и управления зависимостями.
+
+1. Скачайте и установите [Node.js](https://nodejs.org)
+1. Установите глобальные пакеты
+    ```bash
+    npm install -g bower eslint eslint-config-google express-generator grunt-cli gulp mongodb node-inspector spawn-sync supervisor yo
+    ```
+
+### MongoDB
+
+Если для проекта требуется MongoDB:
+
+1. Устанавливаем [MongoDB Community Server](https://www.mongodb.com/download-center)
+1. Добавить папку с установленными бинарниками в PATH
+1. Настраиваем исполнение MongoDB в качестве демона в Unix и в качестве службы в Windows
+Для Windows
+    ```
+    // Устанавливаем службу
+    mongod --dbpath=D:\mongodb --logpath=D:\mongodb\log.txt --install
+    // Смотрим список служб
+    services.msc
+    ```
+1. Для просмотра в удобном виде базы MongoDB можно использовать [RoboMongo](https://robomongo.org/)
+
+### [Sublime Text](http://www.sublimetext.com/) - кроссплатформенный редактор кода.
+![Sublime Text](http://beta.hstor.org/storage2/8a4/83f/7a7/8a483f7a7efcf995491cb6d6a6474010.png)<br>
+
+* [Скачать с официального сайта.](http://www.sublimetext.com/3)<br>
+_Рекомендую установить **portable** версию для пользователей Windows._
+
+* [Установка Package Control.](https://sublime.wbond.net/installation)<br>
+Самый простой способ установки - это прямо в консоли Sublime Text. Консоль доступна с помощью `` ctrl+` `` или<br>
+`View > Show Console menu`. После открытия вставьте соответствующий Python код для Вашей версии Sublime Text в консоль.
+
+Для Sublime Text 3:
+```python
+import urllib.request,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
+```
+
+Для Sublime Text 2:
+```python
+import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
+```
+
+* Установка пакетов доступна с помощью `Preferences > Package Control`, в списке выбрать `Install Package`. Через несколько секунд появится список доступных пакетов.
+Нас интересуют следующие пакеты:<br>
+	* `Emmet` - [плагин для ускорения разработки](http://emmet.io/).
+	* `Jade` - подсветка кода для Jade.
+	* `Less` - подсветка кода для Less.
+	* `Stylus` - подсветка кода для Stylus.
+	* `CoffeeScript` - подсветка кода для CoffeeScript.
+
+* Настройте редактор для удобства с помощью `Preferences > Settings - User`. После открытия файла пользовательских настроек вставьте код ниже и сохраните.
+```js
+{
+	// Всегда отображается карта кода с рамкой текущего положения
+	"always_show_minimap_viewport": true,
+
+	// Карта с рамкой
+	"draw_minimap_border": true,
+
+	// Папки будут отображаться жирным шрифтом
+	"bold_folder_labels": true,
+
+	// Подсветка кода по умолчанию Monokai
+	"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
+
+	// Переносы строк по умолчанию в стиле Unix.
+	"default_line_ending": "unix",
+
+	// Если кодировка файла не будет распознана, то файл будет открыт в Кириллице (Windows 1251)
+	"fallback_encoding": "Cyrillic (Windows 1251)",
+
+	// Исключение файлов и папок в боковой панели
+	"folder_exclude_patterns": [
+		".svn",
+		".git",
+		"node_modules"
+	],
+
+	// Размер шрифта
+	"font_size": 8,
+
+	// Подсветка текущей линии
+	"highlight_line": true,
+
+	// Подсветка табов редактируемых файлов
+	"highlight_modified_tabs": true,
+
+	// Добавляет вертикальную линию после 120 символов
+	"rulers": [120],
+
+	// Горячие клавиши `shift + tab` убирают 1 уровень отступа
+	"shift_tab_unindent": true,
+
+	// Отображает отступы табуляции и пробелов
+	// Включать данный параметр необязательно, т.к. может затруднять чтение кода
+	"draw_white_space": "all",
+
+	// Убирает лишние табы и пробелы в конце строки
+	"trim_trailing_white_space_on_save": true,
+
+	// Добавляет новую строку в конце файла
+	"ensure_newline_at_eof_on_save": true
+}
+
+```
+
+* Добавляем проект в Sublime Text с помощью `Project > Add Folder to Project`. Выбрав папку с проектом, он появится на панели проектов слева, которую можно открыть с помощью последовательных комбинаций горячих клавиш `ctrl+k` и `ctrl+b` или `View > Side Bar > Show Side Bar`.<br>
+В панели проектов будет доступно дерево папок и файлов проекта.

Awesome Features.md

+# Awesome Features
+
+- [Single Element CSS Spinners](http://projects.lukehaas.me/css-loaders/)
+- [Giving Animations Life](https://medium.com/tictail-makers/giving-animations-life-8b20165224c5/)
+- [iHover - CSS3 hover effects pack](http://gudh.github.io/ihover/dist/index.html)
+- [Hover.css](http://ianlunn.github.io/Hover/)
+- [![tp] Hover Effect Ideas](http://tympanus.net/Development/HoverEffectIdeas/)
+- [Example for `background-attachment: fixed`](http://codepen.io/stefanjudis/pen/nrzHI?editors=010) ([Article](http://davidwalsh.name/parallax))
+- [Кнопки на CSS](http://liveweave.com/TPQOMw)
+- [Arrow Navigation Styles](http://tympanus.net/Development/ArrowNavigationStyles/)
+- [CSS Toggle Switch Examples](http://callmenick.com/tutorial-demos/css-toggle-switch/)
+- [Monokle and more demos](http://lab.hakim.se/)
+- [Centering in CSS: A Complete Guide](http://css-tricks.com/centering-css-complete-guide/)
+- [![tp] Tab Styles Inspiration](http://tympanus.net/Development/TabStylesInspiration/)
+- [Pure CSS speech bubbles](http://nicolasgallagher.com/pure-css-speech-bubbles/demo/)
+- [Mobile Web App Checklist](http://www.luster.io/blog/9-29-14-mobile-web-checklist.html)
+- [18 CSS Effect Libraries for Creating Beautiful Animations](http://codegeekz.com/css-effect-libraries-creating-beautiful-animations/)
+- [7 simple ways to optimize your website](http://www.developerdrive.com/2014/10/7-simple-ways-to-optimize-your-website/)
+- [![tp] Creative Link Effects](http://tympanus.net/Development/CreativeLinkEffects/)
+- [![tp] Off-Canvas Menu Effects](http://tympanus.net/Development/OffCanvasMenuEffects/index.html)
+- [Demo: Create a CSS Flipping Animation](http://davidwalsh.name/demo/css-flip.php)
+- [Foldy Thingy - CodePen](http://codepen.io/bennettfeely/pen/zdafH)
+- [SVG CSS3 Menu / Burger Button - CodePen](http://codepen.io/kyleHenwood/pen/Alayb)
+- [The Code Player - Learn HTML5, CSS3, Javascript and more...](http://thecodeplayer.com/)
+- [CSS Column Ecommerce Product Layout - CodePen](http://codepen.io/jaycozzy/full/kptob/)
+- [![habr] 60 FPS? Легко! pointer-events:none!](http://habrahabr.ru/post/204238/) ([Оригинал](http://www.thecssninja.com/javascript/pointer-events-60fps))
+- [HINT.css](http://kushagragour.in/lab/hint/)
+- [Print.css](http://printstylesheet.com/)
+- [CSS3 Shapes](http://www.css3shapes.com/)
+- [![tp] Dot Navigation Styles](http://tympanus.net/Development/DotNavigationStyles/)
+- [Perspective open door](http://jsfiddle.net/vgwhhhv7/)
+- [magic.css - CSS3 Animations with special effects](http://minimamente.com/example/magic_animations/)
+- [![tp] Nifty Modal Window Effects](http://tympanus.net/Development/ModalWindowEffects/)
+- [![tp] Progress Button Styles](http://tympanus.net/Development/ProgressButtonStyles/)
+- [![tp] Animated Content Tabs with CSS3](http://tympanus.net/Tutorials/CSS3ContentTabs/)
+- [No JS: Tabs That Scale Down to Menu](http://codepen.io/jakealbaugh/pen/KBsIo)
+- [CSS3 breadcrumbs](http://red-team-design.com/css3-breadcrumbs/)
+- [Create a masked background effect with `background-attachment: fixed`](http://tutsplus.github.io/create-a-masked-background-effect-with--background-attachment--fixed--/)
+- [Simple Parallax Scrolling](http://callmenick.com/tutorial-demos/simple-parallax-effect/)
+- [![habr] Выравниваем блок по центру страницы](http://habrahabr.ru/post/238449/)
+- [4 balls 10 spinners: CSS3 Animations](http://arqex.com/934/4-balls-10-spinners-css3-animations)
+- [![tp] Tooltip Styles](http://tympanus.net/Development/TooltipStylesInspiration/)
+- [12 Fun Sharing Button Effects](http://demo.tutorialzine.com/2014/11/12-fun-sharing-button-effects/simple.html)
+- [Single input 3D form](http://thecodeplayer.com/walkthrough/single-input-3d-form)
+- [Tutorials for Creating 3D Effects in CSS3 and JavaScript](http://www.webresourcesdepot.com/3d-effects-in-css3-javascript/)
+- [How I Built The One Page Scroll Plugin](http://www.smashingmagazine.com/2014/08/25/how-i-built-the-one-page-scroll-plugin/) ([![habr] Хабр](http://habrahabr.ru/post/235943/))
+- [CSS Only Loaders](http://blog.pexels.com/css-only-loaders/)
+- [![tp] Dialog Effect](http://tympanus.net/Development/DialogEffects/)
+- [CSS filters in action](http://blog.gospodarets.com/CSS_filters_in_action/)
+- [A curated gallery of Dribbble shots reworked as interactive CodePen pens.](http://give-n-go.co/)
+- [Pure css icons, with only one element](http://saeedalipoor.github.io/icono/)
+- Tooltips: [1 elemehttp://callmenick.com/tutorial-demos/css-toggle-switch/nts with text](http://jsfiddle.net/37cu4/) & [with HTML](http://jsfiddle.net/pKsY4/)
+- [![tp] Checkout Concepts](http://tympanus.net/Development/CheckoutConcepts/index.html)
+- [![tp] Wobbly Slideshow Effect](http://tympanus.net/Development/WobblySlideshowEffect/)
+- [![tp] Sidebar Transitions](http://tympanus.net/Development/SidebarTransitions/)
+- [How to make 3-corner-rounded triangle in CSS](http://dabblet.com/gist/4592062)
+- [Gooey Menu](http://codepen.io/lbebber/pen/LELBEo) ([Перевод](http://habrahabr.ru/post/250005/) и [оригинал](http://css-tricks.com/gooey-effect/))
+
+[fe]: https://cloud.githubusercontent.com/assets/2854701/4692702/1c90b140-5774-11e4-92cb-e08a7afd3d87.png
+[habr]: https://cloud.githubusercontent.com/assets/2854701/4692636/d3785254-5770-11e4-9276-9d2dbe050494.png
+[tp]: http://tympanus.net/Development/favicon.ico
+[yt]: https://cloud.githubusercontent.com/assets/2854701/4692709/58d7ce04-5774-11e4-909e-368aa3032ee3.png

JavaScript Plugins.md

+**Статус: черновик**
+
+**Задачи:**
+- Актуализировать список
+- Добавить новые
+
+
+**Хотите добавить плагин - узнайте о его поддержке браузерами, протестируйте, только потом применяйте.**
+
+
+## jQuery
+* [50 Amazing jQuery Plugins That You Should Start Using Right Now | Tutorialzine](http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/)
+
+### Для изображений
+* :star: [Fotorama](http://fotorama.io/)
+* :star: [fancyBox - Fancy jQuery Lightbox Alternative](http://fancyapps.com/fancybox/)
+* :star: [Colorbox - a jQuery lightbox](http://www.jacklmoore.com/colorbox/)
+* :star: [FiNGAHOLiC/jquery.imgpreloader](https://github.com/FiNGAHOLiC/jquery.imgpreloader) - подходит для предзагрузки
+* [jQuery Slideshow](http://i-like-robots.github.io/jQuery-Slideshow/)
+* [Swipebox | A touchable jQuery lightbox](http://brutaldesign.github.com/swipebox/)
+* [iLightBox · Revolutionary Lightbox Plugin](http://iprodev.com/ilightbox/#singleimage)
+* [EasyZoom, jQuery image zoom plugin](http://i-like-robots.github.io/EasyZoom/)
+* [Owl Carousel](http://www.owlgraphic.com/owlcarousel/)
+* [Image Gallery jQuery Thumbnail Plugin | Flow Slider](http://www.flowslider.com/)
+* [jQuery Cropbox plugin](https://github.com/acornejo/jquery-cropbox)
+
+### Слайдеры
+* :star: [Swiper](http://www.idangero.us/sliders/swiper/) - крутой адаптивный слайдер со свайпом, подходит для всего, не только для картинок, хорошее API
+* [Простой слайдер с множеством содержимым](http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/)
+* [rcarousel – continuous jQuery UI carousel](http://ryrych.github.com/rcarousel/)
+* [12 Professional Responsive jQuery Slider Plugins](http://designmodo.com/responsive-jquery-slider-plugins/)
+* [Responsive Carousel](http://basilio.github.io/responsiveCarousel/)
+* [FredHQ - Roundabout for jQuery by Fred LeBlanc](http://fredhq.com/projects/roundabout#/demos)
+* [ResponsiveSlides.js · Responsive jQuery Slider & Slideshow](http://responsiveslides.com/)
+* [jQuery UI Slider | Papermashup.com](http://papermashup.com/jquery-ui-slider/)
+
+### Каскад
+* :star: [isotope](https://github.com/metafizzy/isotope)
+* [kombai/freewall](https://github.com/kombai/freewall)
+
+### Полноэкранные страницы
+* [fullPage.js One Page Scroll Sites](http://alvarotrigo.com/fullPage/)
+* [· Scrolld.js ·](http://scrolldjs.com/)
+
+### Вспомогательные
+* :star: [device.js](https://github.com/matthewhudson/device.js)
+* :star: [jquery.browser](https://github.com/gabceb/jquery-browser-plugin)
+* [momentjs](http://momentjs.com/)
+* [countdownjs](http://countdownjs.org/)
+* [Canta/unserialize](https://github.com/Canta/unserialize/)
+* [nielse63/jQuery-ResizeEnd](https://github.com/nielse63/jQuery-ResizeEnd)
+* [dreamerslab/jquery.actual](https://github.com/dreamerslab/jquery.actual)
+* [hammer.js](http://eightmedia.github.io/hammer.js/)
+
+### Кроссбраузерные костыли на все случаи жизни
+* [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) (Довольно неплохой обширный список плагинов)
+* [rdebeasi/checked-polyfill](https://github.com/rdebeasi/checked-polyfill)
+* [Selectivizr](http://selectivizr.com/) - CSS3 псевдо-классы и атрибуты селекторов для IE6-8
+* [Placeholder Enhanced](https://github.com/dciccale/placeholder-enhanced) - подойдёт для IE9-
+* [Columnizer](https://github.com/adamwulf/Columnizer-jQuery-Plugin) - подойдёт для IE9-
+
+### Навигация
+* :star: [jQuery custom scrollbar demo](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html)
+* [darkwebdev/baron · GitHub](https://github.com/darkwebdev/baron)
+* [nanoScroller.js](http://jamesflorentino.github.com/nanoScrollerJS/)
+* [scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer](http://markgoodyear.com/2013/01/scrollup-jquery-plugin/)
+* [kswedberg/jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll)
+
+### Типография
+* [jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.](http://dotdotdot.frebsite.nl/)
+
+### Аудио/видео
+* [HTML5 Video Player Comparison](http://praegnanz.de/html5video/)
+* [MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims](http://mediaelementjs.com/)
+* [Ion.Sound - jQuery плагин для воспроизведения звуков событий](http://ionden.com/a/plugins/ion.sound/)
+* [Acorn Media Player, Accessible and customizable HTML5 media player](http://ghinda.net/acornmediaplayer/)
+* [HTML5 Video Player | Video.js](http://www.videojs.com/)
+* [http://mediafront.org/](http://mediafront.org/)
+* [jPlayer : HTML5 Audio & Video for jQuery](http://www.jplayer.org/)
+
+### Формы и стилизация элементов
+* [XDSoft plugins, scripts, program, parsers](http://xdsoft.net/jqplugins/datetimepicker/)
+* [Selecter  /  Formstone  /  Ben Plum](http://www.benplum.com/formstone/selecter/)
+* [joelpurra/skipontab](https://github.com/joelpurra/skipontab)
+* [Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better](http://harvesthq.github.com/chosen/)
+* [ddSlick - a jQuery plugin for custom drop down with images](http://designwithpc.com/Plugins/ddSlick#demo)
+* [Примеры для плагина jQuery Form Styler](http://dimox.name/jquery-form-styler/)
+* [jQRangeSlider - Technical demo](http://ghusse.github.com/jQRangeSlider/technicalDemo.html)
+* [nazar-pc/PickMeUp](https://github.com/nazar-pc/PickMeUp)
+
+### Bootstrap
+* [Плагин прогресса загрузки как на YouTube](http://skylo.s3-website-ap-southeast-1.amazonaws.com/)
+* [Date Picker Input - Bootstrap Form Helpers](http://bootstrapformhelpers.com/datepicker/)
+
+### Редактор/подсветка кода
+* [Ace](http://ace.c9.io/)
+* [Editr.js by @Idered](http://lab.idered.pl/editr/)
+
+### Работа с буфером обмена
+* [zClip :: jQuery ZeroClipboard](http://www.steamdev.com/zclip/)
+
+### Для создания плагинов
+* [Еще раз о создании jQuery плагина или применяем на практике](http://habrahabr.ru/post/176743/)
+* [Пишем свой jQuery plugin для Hash-навигации в AJAX-сайтах](http://habrahabr.ru/sandbox/57659/#2)
+* [jQuery Boilerplate](http://jqueryboilerplate.com/)
+
+### Анимация
+* [Velocity](http://julian.com/research/velocity/)
+* [Animate.css | Just-add-water CSS Animations](http://daneden.me/animate/)
+* [jquery.animateNumber – simple number animation jQuery plugin](http://aishek.github.io/jquery-animateNumber/)
+
+### Загрузка файлов
+* [jQuery File Upload Demo](http://blueimp.github.io/jQuery-File-Upload/)
+
+
+***
+## JavaScript
+### Аудио/видео
+* [Audio5js - The HTML Audio Compatibility Layer](http://zohararad.github.io/audio5js/)
+
+### Подсветка кода
+* [CodeMirror](http://codemirror.net/)
+* [highlight.js](http://highlightjs.org/)
+* [Prism](http://prismjs.com/)
+
+### Для изображений
+* [Color Thief - Lokesh Dhakar](http://lokeshdhakar.com/color-thief/)
+
+### Валидация
+* [Validate.js](http://validatejs.org/)

Mobile.md

+# Особенности разработки сайта по мобильные устройства
+
+**Статус:** черновик.
+
+Здесь будут собираться особенности под мобильные устройства, баги, хаки и различные решения.
+
+## Список особенностей
+
+- Вьюпорт Android 2.3 - либо фикс, либо 1:1, с `minimal-ui` не дружит - ломается (не проверено точно).
+
+- iOS кинетически скроллится за пределы, можно видеть не тот фон.
+
+- `position fixed` - от вьюпорта.
+
+- Android 2.3 - `transform rotate` + `display block`.
+
+- Android 2.3 - `border-radius px`.
+
+- Android 4.0 - `font-size 0` - не работает, не проверена работоспособность с `font-size .000001px`,
+  также есть запасной вариант на случай,
+  если должно быть только в одну строку - `display inline-block` + `white-space nowrap` родителю,
+  второй вариант - использовать `float left`,
+  а для центрирования родителю `display table` + `margin-left auto` + `margin-right auto`.
+
+- Android 4.0 - `vertical-align top` для `display table`
+
+- При смене ориентации в iOS появляется серая полоса внизу,
+  фиксистся проскролливанием вверх `$('html, body').scrollTop(0)`.
+
+- `@media screen and (orientation: landscape)` срабатывает когда появляется клавиатура на Android.
+
+- `<link href="" media="">` не работает на ios 6 и меньше,
+  грузит все стили, но отрисовывает только один,
+  костыль в этом случае встраивание стилей в страницу с перечислением `@import` и медиа-запросов,
+  пример: `@import url(path/to/style.css) only screen and(max-width: 640px);`
+  и нужное количество таких строк с разными условиями под каждый экран.
+
+- При использовании Яндекс.Карт с находящимися рядом чекбоксами со свойствами ниже, почти сразу или при перетаскивани карты браузер Safari может вылетать.
+  ```stylus
+    width 0
+    height 0
+    overflow hidden
+    opacity 0
+  ```
+  **Решение:** нужно скрывать в `display none`.
+
+- Yandex Browser не поддерживает ссылку с номером телефона `href="tel:"`, рещение - костылить в JS.

Useful Services.md

+# Полезные сервисы
+
+## Шрифты
+- http://webfont.ru/ - Бесплатные шрифты
+- http://www.google.com/fonts/ - Шрифты на Google
+- http://www.fontsquirrel.com/tools/webfont-generator - Генератор веб-шрифтов
+- http://everythingfonts.com/font-face - Генератор веб-шрифтов
+
+
+## Оптимизация изображений
+- http://www.jpegmini.com/main/shrink_photo - JPEG
+- https://tinypng.com/ - PNG
+- https://kraken.io/web-interface - JPEG | PNG
+- http://compressor.io/ - JPEG | PNG | GIF | SVG
+- https://cloudconvert.com/ - Конвертация в любой формат
+
+
+## Заглушки
+- http://loremflickr.com/
+- http://lorempixel.com/
+- http://placebox.es/
+- http://uifaces.com/
+- http://randomuser.me/
+- https://placekitten.com/
+
+
+## Коллекции изображений
+- http://subtlepatterns.com/ - Паттерны
+- http://www.noisetexturegenerator.com/ - Генератор текстур с шумом
+- http://preloaders.net/ - Прелоадеры
+- http://p.yusukekamiyamane.com/ - Более 3.5к прикольных иконок от Юсукэ Камияманэ
+- https://www.iconfinder.com/ - Поиск интересных иконок
+- http://www.gratisography.com/ - Бесплатные изображения
+- http://www.freepik.com/ - Бесплатные изображения
+- http://www.pexels.com/ - Бесплатные изображения
+
+
+## Про порядок в PSD
+- http://designbeep.com/2013/01/23/25-highly-detailed-new-psd-files-for-free/
+- http://i-love-psd.ru/
+- http://photoshopetiquette.com/
+- https://medium.com/in-russian/8c4073155f7d
+- http://webdesignerschecklist.com/
+- http://siliconrus.com/2015/01/14-design-to-code/