В конце июня 2022 года Bubble официально анонсировал свой новый Responsive Engine — движок для быстрого и простого создания качественной адаптации веб-приложений на всех устройствах. Разберёмся, как его использовать.
Если вы интересуетесь Bubble, то советуем сначала прочитать обзор платформы.
Responsive Engine Bubble — по сути это комплекс настроек, с которыми разработчик создаёт веб-приложения, адаптирующиеся к любым устройствам и размерам экранов.
Движок идеально применять в создании крупных компонентов веб-приложений — футеры и хедеры, списки и сетки, колонки. Ещё движок хорошо подходит для композиционных решений — например, если нужно поделить экран на две части и необходимо сохранить созданную иерархию на любых экранах.
Контейнер, в который собираются элементы, выполняет родительские функции относительно дочерних элементов — то есть все дочерние элементы ведут себя по настройкам родительского. Контейнер в данном случае — это знакомые бабл-разработчикам группы, в которые помещаются элементы. Страница-экран — это тоже контейнер. Так что настройка адаптивности — это, по сути, настройка системы макетов-контейнеров и согласования их всех между собой.
Выбор типа контейнера — лишь часть настроек. Второй важный этап — работа с отступами, полями и расстояниями между элементами. Чтобы добавить воздуха между элементами и дать возможность интерфейсу дышать, важно поработать с расстояниями между объектами.