🧱
The container
For a design file to be Bravo-ready, you must add
[containers]. These are components placed as a 2nd-level layer: inside ("nested" in) the app page and containing the different UI elements.
Containers have two main functions:
- Wrap the individual UI elements (images, text, etc.) in the design.
- Allow to create lists in the app page. Each container can be bound to API data that will make the container populate to a list in the app. To create a list, a placeholder list element needs to be created in the design, and wrapped in a container. How to connect the API data is further explained in the Connecting to APIs section.
You can find below how to create a container, depending on the design tool you use.
Containers must:
- Start the first container from the top of the app page component.
- Include the padding of your design within the container.
- They should not overlap one another *.
*Except for the top bar container. You can have a top bar container and another container starting from the top edge of the page.
If a container is <50% of the screen width, it will stack horizontally and then vertically down (when connected to API data to populate it into a list).
- No. Go to the next question.
Blue overlay box denotes container.
- 1.No. Go to the next question.
- 2.
Blue overlay box denotes container.
- 1.No. Go to the next question.
- 2.Yes. Create one container around the list item design. In case you have other non-list UI elements, create containers around them too.
- 1.No. Go to the next question.
- 2.Yes. Create a container so that the text box is the bottom-most element in the container + add the flexo text tag. If there is anything else below, create another container below.
- No. Go to the next question.
- Yes. Create a container frame around the design that needs to maintain its ratio to designed screen size + add the aspect ratio to screen tag.
