The way your app will look will be determined in this section.
If you have used one of our 2 sample apps then all the work has been done for you already. Let’s walk through each of these items below…
The dropdown menu lists a lot of options. Here are some examples that have an impact on the look and feel of your app.
1. Grid Styles
- Select ‘Grid Styles’ from the dropdown menu.
- Select ‘Default’
-
Now adjust the displayed items. You can use this Grid Style ‘Default’ later on in your app. Learn more about Grid Styles here.
- Metadata: can be used for referencing afterwards.
- Structure: adds the number of columns in your grid style. E.g. a grid of 4 columns will position your collections 4 in a row.
- Padding: will insert more space between your collections and the bezel of the device.
- Spacing: defines the space between each of your collections.
- Colors: be creative and give your background and text a distinct unique color.
-
Background Image: by default the background will be a single coloured frame. You can, however, also select a background image that you've uploaded.
- Allowing horizontal swiping and displaying scrollbars are the last options.
About Grid Styles:
Grid styles determine how your Browse Grids will display the collections in your app on different devices. You can define different Grid Styles for tablets, phones or the browser. Learn more about Grid Styles here.
2. Item Styles
The appearance of the cells in your browse grids can be determined in 'Item Styles'. While a 'Grid Style' applies to a collection, an 'Item Style' applies to a content item.
- Open the dropdown menu
- Select ‘Item Styles’
- Click on ‘Default’
The sidebar on the left determines the options in the right side bar. The image in the middle provides a preview of how the content item will be displayed. The image is built up by layers of image and text and you can design these layers to give it a unique appearance.
Again, these Item Styles can be different for tablets, phones or the browser.
To learn more about 'Item Styles', check this article.
Integrating the styles in your app
Now these default Grid and Item Styles have been defined, you can apply them the collections in your app.
- Go back to Home of your app
- At the right of Root Collection, select ‘edit’
- In ‘Styling’ select ‘Default’ in the dropdownmenu next to 'Grid Style’ and ‘Item Style’
This means you can have all kind of unique Grid and Item Styles and give them distinctive names so you can select them in this section too.
About Root Collection and Hamburger Menu…
Consider the Root Collection as the home screen of your app. The Hamburger Menu collects the menu options in your app. You can activate or deactivate this menu.