В конце июня 2022 года Bubble официально анонсировал свой новый Responsive Engine — движок для быстрого и простого создания качественной адаптации веб-приложений на всех устройствах. Разберёмся, как его использовать.
Если вы интересуетесь Bubble, то советуем сначала прочитать обзор платформы.
Responsive Engine Bubble — что это
Responsive Engine Bubble — по сути это комплекс настроек, с которыми разработчик создаёт веб-приложения, адаптирующиеся к любым устройствам и размерам экранов.
Адаптивный движок бабла сделан на принципах CSS Flexbox — это технология гибких макетов веб-страниц за счёт упорядоченного расположения элементов на странице относительно друг друга.
Суть работы адаптива бабла — в гибких макетах-контейнерах.
![](https://static.tildacdn.com/tild6661-6565-4732-a162-353663326530/Button_2.png)
Разработчик создаёт элементы (кнопки, текстовые блоки, формы) и помещает их в контейнеры. Для контейнеров устанавливаются настройки, и все элементы внутри них ведут себя согласно этим настройкам.
Движок идеально применять в создании крупных компонентов веб-приложений — футеры и хедеры, списки и сетки, колонки. Ещё движок хорошо подходит для композиционных решений — например, если нужно поделить экран на две части и необходимо сохранить созданную иерархию на любых экранах.
![](https://static.tildacdn.com/tild3434-3435-4663-b935-613563636535/Button.png)
Четыре типа контейнеров
Настройка макета-контейнера в бабле называется Container layout. Её можно найти в отдельной вкладке по клику на элемент в настройках. Эта вкладка и появилась с нововведением.
Контейнер, в который собираются элементы, выполняет родительские функции относительно дочерних элементов — то есть все дочерние элементы ведут себя по настройкам родительского. Контейнер в данном случае — это знакомые бабл-разработчикам группы, в которые помещаются элементы. Страница-экран — это тоже контейнер. Так что настройка адаптивности — это, по сути, настройка системы макетов-контейнеров и согласования их всех между собой.
Есть четыре типа Container layout — Row, Column, Fixed, Allign to parent.
- Row — строка. Дочерние элементы в контейнере выстраиваются горизонтально при растягивании экрана.
![](https://static.tildacdn.com/tild6363-3935-4533-a137-353564323536/__2022-09-07__145829.gif)
- Column — колонка. Элементы будут растягиваться или сдвигать вниз другие элементы при изменении размеров экрана.
![](https://static.tildacdn.com/tild3063-6261-4332-a265-313036333939/__2022-09-07__135237.gif)
- Fixed — элемент внутри такого контейнера останется фиксированного размера при изменении размеров экрана.
- Allign to parent — элементы будут выравниваться внутри контейнера относительно выбранного края. Доступно позиционирование по 9 позициям внутри контейнера.
![](https://static.tildacdn.com/tild3463-3939-4031-a363-616239353635/__2022-09-07__164113.gif)
Выбор типа контейнера — лишь часть настроек. Второй важный этап — работа с отступами, полями и расстояниями между элементами. Чтобы добавить воздуха между элементами и дать возможность интерфейсу дышать, важно поработать с расстояниями между объектами.
![](https://static.tildacdn.com/tild3965-3339-4163-b031-643562613635/Button_1.png)
Где настраивать и как подключить адаптив в свой проект
Все новые проекты в бабле с релиза Responsive Engine автоматически создаются на новом движке. А вот если у вас есть старые проекты, то надо произвести некоторые манипуляции.
На верхней панели интерфейса рабочей области найдите список страниц-экранов. Рядом со страницами справа есть фиолетовый кругляшок со стрелками — его наличие говорит, что новый движок респонсива не подключен для этой страницы.
Подключить движок можно по кнопке «Upgrade responsive» во вкладке «Responsive». Программа создаст копию страницы-экрана — эдакий бекап, чтобы можно было откатиться к первой версии, если что-то поломается.
А сама настройка контейнеров происходит во вкладке «UI Builder», а смотреть, что получается надо во вкладке «Responsive».
![](https://static.tildacdn.com/tild3235-3733-4362-b735-666366663430/Button_3.png)
Где попробовать и изучить Responsive Engine Bubble
Чтобы лучше понять, как работает новый движок, полезно изучить теорию — и затем скорей переходить к практике, чтобы «набить руку» и уверенно чувствовать себя в работе с адаптивом.
- Для начала стоит прочитать документацию по теме респонсива. Соответсвующая глава появилась в мануале Bubble.
- Следом можно посмотреть краткие видеоинструкции на YouTube. Есть мини-ролик по настройке каждого типа контейнера Row, Column, Align to Parent.
- Попрактиковаться в настройках адаптивности в проекте можно на специальном темплейте Bubble Responsive Game. Тут нужно настроить каждый контейнер с элементами по прописанному заданию и посмотреть, как работает новый движок.
![](https://static.tildacdn.com/tild3965-3661-4661-a361-333436373461/__2022-09-07__155118.png)
![](https://static.tildacdn.com/tild6565-3339-4163-b537-323036316362/_bubble.png)