Styling the App Element
In this section:
Time: 2 minutes
💪Goals:
  • Get comfortable using the right panel of Uiflow
  • Understand Layout
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.
You can learn more about Modes here.
Alignment defaults to the center. This means that if we create a nav bar, the element will appear directly in the middle of the screen.
We want to select the top, center square to align it to the top of our application.
You can learn more about Alignment here.
Spacing is set to 10 as a default.
This means that there will be 10 pixels between each of the children in our application. In this case, we want the nav bar to hit exactly where the content begins so we can reset this to 0.
You can learn more about Spacing here.
We will not change the defaults for Wrap or Reverse Direction, but you can learn more about them in the Layout section.
That's it!
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.
Congrats! And see you in the next step.
Copy link
On this page
Setting the Background Color
Configuring the Layout