Once you have created a new application, you will be placed in the Studio with an empty App element in the Flow panel.
From here, we are going to do some basic styling on the app, add a container to hold the nav bar, and flesh out the nav bar with our logo, a container that will hold links to each category of product we have in our store, and a login button.
Let's get started!
Setting the Background Color
Our App element will be the base of our application, so there's not a lot we have to do for styling but we can set up a couple of attributes to give the rest of the application the look we want.
First, click on the App element and expand the Background section under the Styles tab in the right hand panel.
This will allow you to set the background color of your application. You can click on the square to open a Color Picker or directly input hex or rgba colors.
Set this to rgba(246,242,231,1)
Configuring the Layout
The next thing we want to look at is the Layout section in the same tab of the righthand panel.
This section is organized into five parts. Each part deals with how the direct children of the selected element (the elements that you can see in this container in the Flow panel) are aligned.
Mode decides which direction the children will appear.
As a default, elements are aligned vertically, which is what we want for this stage of our application. We want a container to hold a nav bar, and then another container that holds the content of our application below it.
If we wanted to have a nav bar on the side of our app, we could select the option with three dots aligned horizontally.
We will not change the defaults for Wrap or Reverse Direction, but you can learn more about them in the Layout section.
There's not much to see now, but you've just laid the groundwork for your application to show elements in the order you want them to appear and the background of everything else we will add to the app.