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

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

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

• больше 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 для не последних версий браузеров. 

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