Адаптивная вёрстка сайта Дома (15 страниц)

Описание проекта

Десктоп версия сайта в psd, мобильная версии в ai. 

Ai могу преобразовать в другой формат, но желательно самостоятельная работа с иллюстратором.

Ширина контента 1320px. Всё что в этой области выравнивается по центру. 

Всё что выходит за эту область - выравнивается по краям, тянется.

Нужно сделать 3 отображения сайта:

- десктопный (больше 1450рх)

- для планшетов (900-1450pх,  чтобы сайт умещался в 900px)

- для мобильников (меньше 900px)

Для планшета отдельного макета нет - это ужатая десктопная версия, сделать по своему усмотрению, чтобы сайт умещался в 900 px включая небольшие поля.

Файлы для ознакомления прикреплены.

Комментарии в этом архиве.

Технические требования

Довольно точное соответствие макету (пиксель перфект)

В этом ничего сложного нет, достаточно корректно использовать:

font-family, font-weight, font-size, line-height, letter-spacing.

Ну и margin по высоте между p.

( Можно использовать для облегчения плагины для хрома

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

https://chrome.google.com/webstore/detail/pixelparallel-by-htmlburg/iffnoibnepbcloaaagchjonfplimpkob

или аналогичные )

Структура js и scss файлов проекта

Структура файлов должна быть следующая (конкретные файлы для примера)

scss\pages

scss\pages\_page_about.scss

scss\pages\_page_contacts.scss

scss\pages\_page_index.scss

...

scss\sections

scss\sections\_section_footer.scss

scss\sections\_section_header.scss

scss\sections\_section_social_networks.scss

...

Для js аналогично

js\pages

js\pages\page_news.js

...

js\sections

js\sections\section_callback.js

...

В sections лежат повторяющие блоки на разных страницах.

В pages код для конкретной страницы.

Файл существует, если нужен какой то особый код для страницы/секции, пустых файлов делать не надо.

Структура остальных файлов (vendor, color, fonts, mixins etc....) на своё усмотрение.

HTML файлы можете организовывать как вам угодно, использовать любой шаблонизатор или голый php с include.

Структура HTML

Первый момент - идентификатор страницы

В теге body задаём id конкретной страницы, например, 

Это сделано для того, что id страницы в движке сайта можно в одном месте задать, а не плодить по блокам и/или использовать if. Индивидуальность уже через этот селектор.

Например:

#page_index  .header { backgroud:none; }

#page_contacts  .footer { display:none; }

(а не .header.index {},  .footer.contacts{})

Ну и соответственно весь код страницы находиться в #page_index {}

Второй момент - области контента теги без классов

В html есть области контента. Они помечены отдельно на макетах. Внутри этой области использовать только простые теги без классов: p, br, strong/b, i/italic, table, image, bloquete.

Стилизация при этом осуществляется через div контейнер-родитель, например:

.about p {} 

.about strong {} 

Суть такая что, эти области в админке редактируются людьми не знающими html, но которые знают простые штуки вроде жирный шрифт, наклонный, перенос, цитата  и т.д.  В областях контента может быть больше одного параграфа p, поэтому кроме div в роли контейнера сюда ничего не подходит. Также если вы применяете reset.css, то все стили по умолчанию должны быть возращены в этих областях, иначе редактор будет сильно удивлён, когда в админке он видит список, а на сайте его нет.

Структура SCSS

Тут один момент и он касается media queries.

Во первых, использовать mixins вроде этих

@mixin desktop {

@media (min-width: (1450px)) {

@content;

}

}

@mixin tablet {

@media (max-width: (1449px)) {

@content;

}

}

@mixin only_tablet {

@media (min-width: (900px)) and (max-width: (1449px)) {

@content;

}

}

@mixin more_mobile {

@media (min-width: (899px)) {

@content;

}

}

@mixin mobile {

@media (max-width: (899px)) {

@content;

}

}

Чтобы работать с именами, а не цифрами.

Во вторых, группируем код по классам, а не по разрешениям:

Пример:

.header_phone {

@include desktop {

 font-size: 14;

}



@include mobile{

f ont-size: 11;

}

}

а не

@include desktop {

.header {

}

.footer{

}

}

@include tablet {

     .header {

       }

    .footer{

      }

}

Иконки

Иконки/логотипы делать в svg или иконочный шрифт.

Популярные иконки и соцсети - fontawesome.

Итак, коротко о технических требованиях: 

• три адаптива (больше не надо): десктоп, планшет, мобилка
• модульная структура файлов scss и js,
• id страницы и области контента в html,
• именованные media queries и использование их  внутри селекторов в scss,
• вектор в иконках и логотипах, соцсети - fontawesome

От вас нужны: 

• цена, сроки - беру свободных на текущий момент
• очень желательна ссылка на пример вашей верстки - код посмотреть (если есть в профиле - сам найду)
• не писать мне дополнительно в личку, это не влияет на моё решение. Все заявки и кандидатов  без исключения (и бывалых и новичков) внимательно изучаю.