Login

Learning & Support

Documentation

Styling: Grid Styles

Twixl Support Team Updated: - Created :

    Twixl Publisher apps use a concept that we call "Browse Pages" as a flexible way to present your content to readers. While browse pages can still mimic the behaviour of the traditional kiosk that contains different issues, the flexibility goes much further.

    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 your page will be divided into a number of equal squares.

    Browse pages can be defined as either scrolling vertically or horizontally.

    Below are examples of both a 4-column and a 6-column grid with vertical scrolling.

    Browse Grids

    All the items that you want to display will then have a size of one or more squares, and your pages will have different cells, as you can see in the example below.

    Brows Grid, how it works

    Each of the cells can display a thumbnail that links to an article, or to other content items like a movie or an image (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. Grid Styles

    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.

    • 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.

    Tablet - Phone - Browser

    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 article-based app. See this article for more info about the Browser Client.

    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.

    Was this article helpful?

    1 out of 2 found this helpful