Updates

Flexible Layouts – better design. New opportunities in UI Bakery

Tatiana Yudina
3 min

We promised to provide a responsive design a long time ago. Finally, it’s right around the corner. Why did our team need so much time? Because we wanted to rebuild layouts totally to further provide you with more opportunities in UI Bakery. These new features will help you create a better design in our low-code platform.

See below how to do it. 


Spaces in general

Old spaces were good for developing simple layouts, however not flexible enough for all types of applications you may decide to create. Spaces have been added to the other elements. Now, this option is available in the list of elements.

Previously, you were not able to add a space into space, which limited your possibilities in building a unique design. Thanks to the latest improvements, you can easily implement micro-layouts. For example, you want to create a list of contacts: you have the main space with vertical direction – a list, and each contact has its own horizontal layout with avatar, name, and button.

Note: you can manage, copy, resize, delete, and customize all the spaces. They must lay in one main space: the main space of the page, the main space of the card body, etc.

Directions

It was quite challenging to create a form earlier. You needed to add a space for each element to place elements one under another.

Now, you just need to set the direction as vertical, and add a spacing to particular elements. Feel the difference. :)

Columns

Before you could define a space width only in pixels and percentage. To increase the responsiveness level, our engineers added columns. We use a standard 12-grid layout, so each space can take from 1 to 12 columns on the screen.

Drag-and-drop space resizing

Obviously, people who build interfaces enjoy using drag-and-drop technology. Now, you can drag-and-drop spaces to change the size. In the near future, we will provide our users with an ability to move spaces within the screen. Our team has added a resize handle (a white square in the bottom of the space) to allow you to change the size directly on the page.

Please note: if you set the space size in percentage and drag-and-dropped the size, the space would change the units to pixels


We believe that the new UI Bakery features will make an app development process much easier. Right now we are polishing and getting ready to launch our Responsive design in UI Bakery.

Want to become an early adopter to try all the new features first? Let us know via [email protected]

February 6, 2020

More articles

Don't want to miss anything?

Get updates on the newest stories, case studies and tips right in your mailbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.