Проект 3: Путешествие по России

Обзор

• Интро
• Использованные технологии
• Figma
• Ссылка на gh-pages
• Примечание

Интро

Здесь будет проект о путешествии по России. Проект написан с нуля. С чистого листа. Активно использовались относительные величины для достижения максимально бесшовного перехода через контрольные разрешения.

Использованные технологии

• БЭМ
• Flex
• Grid
• Калькулятор.... Очень много калькулятора....

Figma

• Ссылка на макет в Figma Тут надо сказать, что это палка о двух концах. Дело в том, что при всей удобности и интерактивности макет постоянно обновляется. Поэтому скачивать и импортировать себе в локальную версию Figma - идея, к сожалению, не из лучших. Тем не менне Figma - это потрясающе удобный инструмент! Всем советую, особенно если работаете в команде.

Ссылка на gh-pages

Проект уже развернут на gh-pages. Посмотреть его можно по ссылке ниже:

• Ссылка на russian-travel

Примечание

В работе ипользуются следующие формулы для обспечения бесшовных переходов:

• Для расчета промежуточного размера блока в еденицах:

D = calc(исходный размер элемента - K*(100vw-минимальный размер видимого окна)) Коэффициент K = диапазон приращения элемента / (максимальный размер видиого окна - минимальный размер видимого окна)

То есть если нам необходимо, чтобы в рамках от 320px до 720px некий элемент изменился с 20px до 40px то:

1. K = (40-20) / (720-320) = 0.05 То есть на каждый пиксель увеличения видимой области будет приходится 0.05 приращения элемента
2. D = calc(20px + .05*(100vw-320px))

• Для расчета отступов в процентах:

P = calc(исходный размер элемента * (100vw/минимальный размер видимого окна)) То есть если нам необходимо, чтобы в рамках от 320px до 720px некий отступ 10% увеличивался пропорционально увеличению видимого окна:

1. P=calc(.1*(100vw-320px))