Вёрстка макетов из Figma для React.js на Ant Design

Дмитрий10 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
10.02.2020

Доступ в фигму дам в ответ на ваш запрос.

Размеры экранов:

  • больше 1200 - десктопная версия
  • больше 992 - адаптированная десктопная версия
  • от 768 до 992 - планшетная версия (более адаптированная десктопная)
  • от 576 до 768 - телефонная версия
Есть две основные версии дизайна: на 576-768 и на 1200+ (основной контент почти всегда помещается в 1200, по краям декорация, которую можно частично обрезать).

Если не помещается в 1200, то есть элементы, которые по ширине можно сделать немного меньше без потери качества (например инпуты, ползунки настроек, отступы между/внутри блоков или текстовые блоки).

Если предусмотрен горизонтальный скролл, то тут по ширине контент не меняется, меняется только длина скролла.

Это происходит с контентом, который расположен по центру.

Кроме того, есть элементы прибитые к правому и левому краям, они на любой ширине должны оставаться на своих местах, кроме тех случаев, когда они уже не вмещаются в экран. В таком случае начинают отображаться элементы из мобильной версии.

Требования:

  • Используйте следующее именование классов:
className="avatar-сontainer_show": 

    • основной код kebab-case
    • модификтор разделять '_' snake_case
  • Используйте flex.
  • Используйте спрайты разумно.
  • Используйте svg через background: url('data:image…) без Base64. Предварительно обрабатывайте svg в svgo.
  • Используйте оптимизированные изображения через tinypng.com
  • Не используйте inline стили.
  • Используйте 2x изображения для устройств с двойной плотностью пикселей.
  • Используйте микроразметку.
  • Без jQuery, само собой.
  • В том, что зависит от вёрстки должны набираться высокие баллы в PageSpeed.(общий балл должен быть выше 95)
  • Ваша вёрстка должна быть валидной.
  • Вёрстка должна корректно отображаться (соответствовать первоначальному макету дизайна) и функционировать в следующих браузерах:
    • Google Chrome 78.0
    • Google Chrome 77.0
    • Google Chrome 71.0
    • Firefox 70.0
    • Firefox 68.0
    • Mozilla 5.0
    • Internet Explorer 11
    • Edge 18
    • Safari 13.0.3
    • Safari 13.0.1
  • Мобильные браузеры:

    • UC
    • Opera
    • Safari Mobile 13
    • Safari Mobile 12
    • Safari Mobile
    • Samsung mobile browser
Допускается graceful degradation для не последних версий браузеров. 

В каждом случае сначала согласуйте с заказчиком возможность отойти от макета.

CSSFigmajQuery