front_spec.md

#CSS & HTML Development Spec#

##Браузеры## Если не оговорено отдельно, то считать эти версии минимально поддерживаемыми. Никакой поддержки IE6, даже бесплатно делать не нужно и запрещается! Под Graceful Degardation подразумевается частичный отказ функционала, скругленные углы, тени, анимация. Главное что бы верстка не разваливалась. Если вы знаете бразуер, которого нет в этом списке его поддержка не нужна и запрещена.

Вся верстка должна быть mobile ready. Это значит, что сайт должен правильно отображаться на мобильных устройствах (список чуть ниже). Элементы не должны ехать, зум должен работать, при перевороте устройств, все должно правильно репозиционироваться. В случае если не используется responsive design.

####Graceful Degardation####

• IE7-8

####Full Support####

• IE9+
• Chrome 20+
• Firefox 10+
• Opera 11+
• Safari 5+

####Mobile Browsers####

• iOS5+
• Android 3+
• WP 7+
• Blackberry 10+

##CSS3## Используем CSS3, в случае graceful degradation просто стараемся сохранить каркас, если не оговорено иначе. Весь код должен быть написан в LESS более подробная документация. Стараемся не просто писать в LESS а использовать его функционал, наследование, миксины.

Иконки и маленькие картинки должны быть вынесены в спрайты, если у сайта в папке с изображением насчитывается больше 20 файлов - это показатель к оптимизации. Хороший сервис по генерации спрайтов. Все изображения должны быть оптимизированы, мы используем TinyPNG и Kraken, каждая картинка прогоняется по обоим сервисам и сравнивается где лучше сжалось. Разница огромная.

Стараемся писать правильные и быстрые селекторы. Если кто не знает они работают справа на лево. Соответсвенно:

<!-- Bad -->
#container header nav {...}

<!-- Good -->
.primary-nav {...}

<!-- Bad -->
article.feat-post {...}

<!-- Good -->
.feat-post {...}

Если необходимо использовать хаки, то можно воспользоваться этим сайтом

##HTML5## Пишем только используя HTML5. Доктайп только .

Стандартный каркас шаблона либо HTML5BP, либо Twitter Bootstrap.

Обязательно использование header, footer, aside, section тегов, верстка должна быть семантической.

Запрещается использовать ID для элементов. Это связано с тем, что код может дублироваться, на одной странице может быть несколько попапов с полем к примеру email, и фронт разработчик не знает сколько их, сколько будет добавлено и могут ли возникнуть проблемы. Естесвенно если речь идет о корпоративном портале, этот запрет можно обойти особенно когда дело касается label элемента.

Обязательно нужно проверять проект на увеличение\уменьшение (+-), до 3 раз, то есть изменение на 30% размера в обе стороны. Верстка не должна ехать.

Обязательна проверка элементов на выход за границу блока, в случае если текст будет слишком большим.

##JavaScript## JavaScript можно писать как на чистом JS, так и на CoffeeScript.

Оптимизируем JS селекторы

// Beginning your selector with an ID is always best.
// fast
$("#container div.robotarm");
// super-fast
$("#container").find("div.robotarm");

// Be specific on the right-hand side of your selector, and less specific on the left.
// unoptimized
$("div.data .gonzalez");
// optimized
$(".data td.gonzalez");

// Avoid excessive specificity.
$(".data table.attendees td.gonzalez");
// better: drop the middle if possible
$(".data td.gonzalez");

// Avoid the Universal Selector
$(".buttons > *");  // extremely expensive
$(".buttons").children();  // much better
 
$(".gender :radio");  // implied universal selection
$(".gender *:radio"); // same thing, explicit now
$(".gender input:radio"); // much better

Используем базовые библиотеки:

• jQuery 1.9
• Underscore.js
• Backbone.js или Angular

В очень редких слючаях не требуется backbone, но лучше использовать underscore.js что бы не плодить спагетти кода.

Дополнительные библиотеки рекомендованные к использованию, если указана библиотека которая решает конкретную задачу, к примеру WYSIWYG, то используем только ее, никаких TinyMCE и прочих библиотек решающих ту же задачу.

• Chosen - для любых кастомных селектов.
• accounting.js - для форматирования цен в интернациональных проектах.
• money.js - для конвертации валют на клиенте
• GMaps.js - при работе с Google Maps
• Redactor - WYSIWYG
• Damirfoy - кастомные checkbox, radio

##Файловая структура##

/media
|- vendor
|- - jquery.min.js
|- - backbone.min.js
|- css
|- js
|- img
|- fonts