Адаптивная вёрстка сайта Дома (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
От вас нужны:
- цена, сроки - беру свободных на текущий момент
- очень желательна ссылка на пример вашей верстки - код посмотреть (если есть в профиле - сам найду)
- не писать мне дополнительно в личку, это не влияет на моё решение. Все заявки и кандидатов без исключения (и бывалых и новичков) внимательно изучаю.
Заявки фрилансеров
