When you envision the appearance of your app and how it presents itself to the user, the 'Grid Style' is one of the first things you should think about. What elements will be used: banners, showcases, collections...? And how should these be defined in a grid structure? It might be helpful to first make a mock-up of the Root Collection (and other collections) design and design this mock-up in a grid of squares. This will be the basis of your browse grid definition on the Twixl platform.
Twixl Publisher apps use a concept we call "Browse Pages" as a flexible way to present your content to readers and the design of these browse pages is defined by the browse grid. While browse pages can still mimic the behaviour of the traditional kiosk that contains different issues, the flexibility goes much further. Note that browse pages can be intended either for scrolling vertically or horizontally.
1. Defining the structure of your browser page(s)
The layout of your browse pages will be defined using a grid-based approach. First of all, define a number of columns for your pages. Then, based on that number of columns, your page will be filled with a number of equal squares.
You can insert the number of columns in the 'Grid Style' section on the Twixl Platform.
How?
In your app > Design > Grid Styles
Here are examples of both a 4-column and a 6-column grid with vertical scrolling.
All the items you want to display will have a size of one or more of these squares. Your pages can have different cells as you can see in the example below.
Each of the cells can display a thumbnail that links to an article, or to other content items like an image or a movie (more on 'content items' can be found here). But it can also be a link to a collection of articles (an 'issue' in traditional speak).
2. Design your Grid Style
In the "Grid Style" window, you can adjust a number of parameters for a collection, such as the number of columns in your grid and whether scrolling will be horizontal or vertical. You can set different parameters for tablet and phone content.
1. Different device types
In 1 Grid Style you can define a different layout for:
- Tablets
- Phones
- Browser: will be used in the Browser Client.
It's entirely up to you whether you want to use separate designs for each rendition or not. You can use the same design as well by using the buttons Copy to Phone, Copy to Tablet and/or Copy to Browser.
ABOUT THE BROWSER CLIENT
The tab Browser Client will only be visible when you activated the Browser Client in your app. See this article for more info about the Browser Client.
2. Different design options
In the right pane you can define different design options:
- Columns: determines the size of the squares that will be the basis for the size of the cells you place on your grid
- Scrolling: determines whether scrolling in your browse pages will be horizontal or vertical
- Padding: refers to the number of pixels reserved on the outer sides of the grid
- Spacing: refers to the space in between cells on the grid
- Colors: set colors for the background of the grid and the text.
- Background Image: lets you select a background image for the collection - more details here.
- Options: lets you control the swiping, and choose whether or not scrollbars should always be displayed.
3. How are grid styles rendered?
3.1. Auto-flow fills the gaps
Cells are rendered in an intelligent way:
- All cells are rendered using an 'auto-flow'.
- Cells that don't fit in one row, will be moved to the next and there it will be evaluated again.
NAMING YOUR GRID STYLES
As most apps use several grids for different pages, giving an clear and unique name for each and every grid style is key. This will make your work in a later stadium much easier!