Responsive design maket together with flexible gulp config + mobile first + preprocessorCSS + git + Crossbrowser + Flexbox + BEM-nameing + svg-sprites + retina
Проект состоящий из 2-ух страниц index.html and photo.html
- Раскладка страницы выполнена целиком на Flexbox
- Каждая страница имеет 3 вида дизайна
- mobile (base)
- tablet (min-width: 550px)
- desktop (min-width: 977px)
- Без сбоев работает кроссбраузерно в (all Chromium engine), FF, IE+11, Edge
- Валидация HTML и CSS соблюдена, испытания велись на w3c
- Ключевые особенности формирующие Barbershop-a
- Реализовано 3 слайдера на pure CSS один из которых зацикленный по кругу
- Выпадающее 'гамбургер' меню работает на pure CSS
- Используется 2 типа шрифтов в 2-ух форматах .woff .woff2
- Применяется семантическая разметка с соблюдением современных стандартов и правильным БЭМ именованием классов, папок, файлов.
- В конце некоторых блоков реализован трюк CSS-рисования фигур с помощью border + новых единиц вьюпорта vw завернутым в функцию
calc(), это позволило создать угловые адаптирующиеся под ширину стрелки - В шапке сайта в блоке .main-menu применяется адаптивный шрифт изменяющий свой размер в зависимости от ширины viewport пользователя
- Рядом с футером страницы photo.html используется интересный приём, блок .prices который на мобильнике является flex-контейнером, а на планшетной и декстопной версии уже css-таблицей, это позволяет на моб. показать 3 колонки, а на других 4-е.
- В эпоху мобильных телефонов и SPA не малое внимание было уделено адаптивной, быстрой и удобной для всех пользователей графике:
- В многих местах используется тег
<picture>совместно с ретинизацией изображений в 2x 3x раза, а в тех местах где графику необходимо использовать как фоновое изображение похожий механизм применяется по средствам css @media подробнее можно посмотреть на ретинизированные спрайты на странице photo.html у блока с иконками услуг класса.works__services - Отдельной строки стоит будущее и настоящее веб графики — SVG, блок социальных сетей в футере построен на symbols-SVG-спрайте который подключается на index.html and photo.html по разному, на главной используется #external с библиотекой svg4everybody(для поддержки IE), а на photo.html взят на вооружение другой способ #fragment identifiers связанный с встраиванием в тело html символьного спрайта с последующим обращением к нему через
<use>thx SaraSoueidan 👍
- В многих местах используется тег
- Normalize.css лучше Reset.css все файлы .css и js правильно минифицированны
