How UI Bakery Allows Building Responsive Web Applications

Tatiana Yudina
4 min

There is hardly any developer who enjoys making apps responsive manually. If you are tired of this routine activity, want to spend your time on more fascinating programming tasks, and don’t want to deal with the elements overlapping each other ever again, UI Bakery can help you.

Here is how. 

Earlier, you needed to build “a one-size web app”, and further edit its code manually to make the app responsive. Now, with the help of UI Bakery, you can visually create a responsive design that fits different screen sizes at once. 

The platform provides for 5 screen sizes:

  1. Full HD - 1144 px.
  2. Desktop - 1024 px.
  3. Tablet - 768 px.
  4. Phone (landscape) - 480 px.
  5. Phone (portrait) - 320 px.

Let’s see what we have in UI Bakery now.

Layout adjustment

Once you configure a layout that fits a particular screen size, its configuration will be applied to the smaller screen sizes as well. This way, you can manage all the screen sizes, or some of them separately.

Component configuration

You can create different layouts for different screen sizes. Within each layout, you are able to customize its appearance, change the paddings and margins, operate with the elements and their sizes, etc. 

While configuring the elements, you can notice blue dots near some of the parameters in the Configuration panel. These dots mean that the value you set for this or that parameter will be applied to the selected screen size, as well as to the smaller one(s). 

There are the parameters without blue dots near them. Once you change such parameter, a change will be applied to all the screen sizes, not only to the smaller ones. 

UI Bakery responsive design provides for a regular 12-column grid used to set the element size. Working with columns in responsive design is much easier than setting the value in percentage or pixels. For instance, if you need your card to occupy 50% of the dashboard, just set 6 columns as its width.

Element visibility 

To hide or show an element, you can use a visibility parameter placed on the right of the Configuration panel. The element you select will be hidden or shown only on the screen you are currently working with.

Be careful when deleting elements. If you remove an element from one screen, it will be removed from all the other screens as well.

Media queries in the code

Besides making it easier to build your responsive apps visually, we’ve put media queries under the hood. Thus, when you download the code of your app, you’ll see that it looks as if it was really coded manually by a developer.

Any bonuses? Sure!

To master what we’ve just learned, let’s watch a step-by-step video guide on how to build a responsive application in UI Bakery.

Have we satisfied your hunger for information? We hope not, since that’s not all for today. :) 

Our UI/UX designer Victoria Romanovskaya has written an article with practical tips on building stunning designs easily and quickly. Check it out to know about the most useful UI design tricks.

March 11, 2020
Tatiana Yudina
Product manager at UI Bakery since it was founded. Eagers to explore new product frameworks to boost productivity and applies the best one. Having been working since 2012, Tanya has solid Business Analyst and UI/UX expertise in both B2B and B2C fields. She enjoys sharing product management and no-code development experience. Feel free to contact her as a guest blog writer or as a speaker on tech events.

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.