Вёрстка страницы по макету для сайта на MODX

Необходимо сверстать страницу по макету для сайта на MODX.

Вёрстка должна быть адаптивной.

Между точкамм адаптации должна быть адекватная резина.

Условия вёрстки:
1) Названия классов и id должны по смыслу соответствовать применению 
2) Верстка только блоками (div) 
3) Для меню использовать списки (ul) 
4) Для заголовков использовать H1-H6. При этом H1 должен быть только один на странице.
5) Там, где есть возможность сделать без js – делать без него. 
6) Структура файлов в итоге должны выглядеть так: 
-/css/ 
-/images/ 
-/js/ 
-index.html 
7) В CSS пути к картинкам задавать относительные (../images) 
8) Желательно использовать SCSS, но на выходе давать и CSS и SCSS папки, структура: 
-/css/ 
-/scss/ 
9) Не использовать никакие шаблонизаторы (Twig, Smarty), никакие js фреймворки (angular, backbone) 
10) Соблюдать правильную табуляцию и вложенность элементов.
11) Вёрстка пиксель пёрфект

Конкретное ТЗ сброшу откликнувшимся.

При отклике на задачу прошу писать с помощью чего, какого стека планируете производить вёрстку.

Работаем только по безопасной сделке.