Genero Browser Client User Guide

Overview

Theme conditions allow you to filter applicable themes for the user. Fir example, you can make mobile themes only applicable on mobile devices and desktop themes only applicable on desktop browsers.

Available conditions

Possible conditions are:


`isDesktop`	The running platform is a desktop (e.g. Windows, Linux).
`isTouchDevice`	The running platform has touch abilities (e.g. mobile device, Microsoft Surface).
`isMobile`	The running platform is a mobile (e.g. Android, IOS).
`isPhone`	The running platform is a mobile with a significant size lower than 768px.
`isTablet`	The running platform is a mobile with a significant size higher or equal than 768px.
`isBrowser`	The running platform is a browser.
`isUR`	The running platform is a Genero front-end running in Universal Rendering mode (the GDC desktop client or the GMA/GMI mobile client).
`isAndroid`	The running platform is Android.
`isIOS`	The running platform is IOS.
`isChrome`	The running browser is Google Chrome.
`isEdge`	The running browser is Microsoft Edge.
`isFirefox`	The running browser is Mozilla Firefox.
`isIE`	The running browser is Microsoft Internet Explorer.
`isOpera`	The running browser is Opera.
`isSafari`	The running browser is Safari.

Usage

Conditions are declared as a JSON property conditions as an array, like "conditions":["isDesktop", "isChrome"].

These conditions can be set at multiple levels:

at theme parts, in parts theme.config.json as a property of the root object
at theme definitions (in gbc-project-dir/custom.json or in customization-project-dir/config.json`) as a property the theme definition object

When multiple conditions are set in theme parts and/or in theme definitions, an AND logic operator will be applied as the compound condition of the resulting theme.

Beware of conflicting conditions! If a theme gets, for example "isDesktop" and "isMobile" conditions, this theme won't be usable in any case. Same conflict between "isBrowser" and "isUR".
// <gbc-project-dir>/custom.json
{ 
  "themes": [
    // this theme will never be available 
    {
      "name":"impossible-theme",
      "conditions":["isDesktop", "isMobile"]
    }
  ]
} 