TypeEngine themes are comprised of one or more article templates, in conjunction with a JSON file that sets the design options for your app’s menus.

An article template contains an HTML file, and relatively linked stylesheets, JavaScript, images, and any other assets used in the index.html file.

If you are familiar with HTML and CSS, you’ll find TypeEngine themes simple to create and edit. It’s helpful to think about a TypeEngine article template as a single responsive web page displayed inside of a menu container. The content within the frame of the article is fully HTML/CSS-based.

Structure of a TypeEngine App

While TypeEngine apps are inherently themable, there are some underlying structural pieces that are common.

Diagram of the high-level structure of a TypeEngine app.

1. Issue Selector Menu
This menu contains your magazine’s logo, as well as a vertical list of issues. In the App Styling JSON, you can control what content to show, as well as the spatial, alignment, typographic, and color properties of that content. Swipe right-to-left at any time to close the menu and view the article open in the background.

2. Article Selector Menu
This menu slides into view when the reader taps to view an issue. It displays the list of articles in the issue. This panel is also completely customizable via the App Styling JSON file. Swipe left-to-right to go back to the Issue Selector menu. Swipe right-to-left to close the menu at any time and view the article open in the background.

3. Article View
This is the main part of the app, and is the part that is completely customizable using Article Templates. Tap anywhere on the screen to invoke contextual actions such as the Settings button, the Share/Action button, and the Back button. Swipe left-to-right to open the menu at any time.