New Responsive Containers in Create

One of the most exciting features in Create can be found in its Responsive Layout capabilities. Whilst building the LiveCode Create product we have some key questions that guide our decision making. Is there an opportunity to make something easier? Is there an opportunity to make something better? Can we do it in a way that removes friction points from the user experience? Can we do all of those things without building a tool that feels limited? We took those questions into our approach to building Responsive Layout features and as much as it’s still work in progress, it’s already becoming one of my favourite features.

There are a few key things to know about Responsive Layout. I’ve filmed a couple of demo videos which can be found below, so feel free to skip all this and go straight there. Even though I am the one writing this blog post, it’s probably what I would do.

Container Widgets

In the tools palette you will find some container widget options. You can drag on a column, a row, a group, wrap, and fitted box container. These are essentially LiveCode Groups which have Responsive Layout library properties associated with them to make them behave in the way you would expect a column or row to behave. You can go ahead and drop objects inside these containers and after setting a few properties you are on your way to having an app that adapts to different screen sizes.

Layout Breakpoints

Another key concept is the idea of Layout Breakpoints. In LiveCode Create we can set at which dimensions the layout switches between desktop, tablet and mobile. We have handy icons in the LiveCode Create IDE to switch between these layout breakpoints. The really interesting thing here is once you build your layout in lets say the desktop layout breakpoint for example, if you switch to mobile and make a property change, that change is now specific to mobile only. This is a point that is better demonstrated than explained so feel free to skip to the video to watch this in action. An example of where this might be used is if you had a row which has objects in it which are stacked left to right, you may want them to be stacked top to bottom when in mobile mode, so you would simply switch to the mobile breakpoint and change the container type from row to column. Thats it. This feature also allows you to show different objects at different layout breakpoints by using the visible property.

Responsive Layout Properties

The properties available from the Responsive Layout section of the property inspector are what allow you to fine tune your layout. You can find Responsive Layout options on not just the containers but on all of the objects you drag onto your layout. I won’t go through every property in this blog post but I cover quite a few in the two videos included below.

Building your first responsive layout

Building a responsive layout for a to-do list app

I’m really excited about these features, even in preview it’s already very impressive and it’s just going to get better.

Let us know what you think about what you’ve seen so far with Responsive Layout in the comments below.