Техническое задание для резиновой верстки дизайна с использованием методологии БЭМ
1. Общие требования
• Верстка будет натягиваться на CMS WordPress (пример сайта
• Верстка должна быть резиновой с использованием сочетания медиа-запросов, относительных единиц измерения (%, vw, vh, em, rem) и (flexbox) или сеточных (grid) CSS-макетов.
• Верстка должна быть выполнена с использованием методологии БЭМ для облегчения дальнейшей поддержки и разработки.
• Код должен быть адаптивным и корректно отображаться на различных устройствах (мобильные телефоны, планшеты, десктопы).
• Верстка должна быть семантической и доступной, с соблюдением стандартов W3C и WCAG.
• Кроссбраузерность: сайт должен корректно отображаться в последних версиях браузеров (Google Chrome, Firefox, Safari, Edge) и в IE11.
• Верстка должна быть оптимизирована для быстрой загрузки (минимизация CSS и JavaScript, оптимизация изображений).
• Использование препроцессоров (SASS/SCSS). По желанию автоматизационных инструментов (Gulp/Webpack).
2. Требования к адаптивности
• Сайт должен корректно отображаться на устройствах с минимальной шириной экрана 320 пикселей.
• Должны быть реализованы следующие контрольные точки (breakpoints) для медиа-запросов: 320px, 480px, 768px, 1024px, 1280px и 1440px.
• Все интерактивные элементы (кнопки, ссылки, формы ввода) должны быть удобны для использования с тачскрином.
3. Требования к использованию БЭМ
• Все классы должны быть названы согласно методологии БЭМ.
• Каскадирование и использование глобальных стилей должны быть минимизированы.
• Должно быть обеспечено максимальное переиспользование БЭМ-блоков.
• Модификаторы должны использоваться для определения вариаций блока или элемента (например, размера, цвета).
4. Требования к CSS
• Должна быть настроена автоматическая сборка CSS из препроцессорного кода (например, SASS/SCSS).
• Должен быть реализован чистый и модульный CSS код.
• Использование !important должно быть ограничено и допустимо только в исключительных случаях.
• Должна быть реализована система переменных для цветов, шрифтов и других повторяющихся значений.
5. Требования к JavaScript
• Интерактивные элементы (например, слайдеры, модальные окна) должны быть реализованы желательно без использования jQuery, только нативный JavaScript (ES6+).
• JS-код должен быть модульным и соответствовать принципам БЭМ.
6. Прочие требования
• Код должен быть чистым, аккуратным и хорошо комментированным.
• Для всех изображений должны быть использованы подходящие форматы (например, SVG для иконок, JPEG или WebP для фотографий).
• Все шрифты должны быть оптимизированы для веба.
• Должна быть реализована SEO-оптимизац