backend-systemintegration-sharedutilities-ui-theme v1.0.0

Designer Guide

This document covers various topics for designers and maintainers of the System Integrations Theme.

Please keep all sections of this document up to date!

Table of Contents

• Gulp Solution
  • npm
  • Gulp
• Theme SCSS Solution
  • SCSS Structure
• Individiual Theme Solutions
  • Themes Structure
• Documentation Solution
  • Documentation Structure

Gulp Solution

In this section you will find information relevant to the Gulp Solution.

npm

We use npm to install various packages that are used by Gulp and other tools. If you don't have npm installed you can download it here.

Gulp

Gulp requires npm to be installed. See npm section for installation instructions.

To install required Gulp packages on your machine:

• Open the project folder
• Open command prompt
• Run npm i

All the dependencies should now be installed.

To confirm open Task Runner Explorer in Visual Studio and run task Default. See task runner output to make sure there are no errors.

CSS files compiled from the gulp tasks in this solution are located in the Documentation themes/custom folder.

Theme SCSS Solution

In this section you will find information relevant to the Theme SCSS Solution.

SCSS Structure

The solution contains all the SCSS files required for the theme.

It is broken down into the following three sections:

• Components Here you will find all the SCSS files for the theme and this is where changes should be made to components.
• Themes This folder contains the base imports partial, base-variables partial and the individual theme variables. To create a new theme add an SCSS file here, name it according to the theme (i.e. 'Dark' will compile to styles-dark) and import the base partials. Modifications to the default (base-variables) should be added to the newly created file and not modified in the base-variables as that will affect all the themes.
• Vendor Vendor contains all the 3rd party plugins styles which are compiled into the final css. It is generally not recommended to modify the vendor files directly, i.e. make changes to the bootstrap theme. Instead add the changes to the appropriate file in the components folder.

Individiual Theme Solutions

In this section you will find information regarding the theme nugets.

Themes Structure

Themes contains one base theme and the remaining sub themes. The base theme is a dependency of all the sub themes and includes all the shared fonts, images, script files and the Playtech BGT theme. Each individual sub theme should only contain the 'Content' folder with the following structure:

• 'themes' folder - 'theme-name' folder - 'css' folder - 'images' folder

Structure of the above is very important in order to ensure that all the theme files are located in the same place when a nuget is installed.

Each solution should also includes a gulpfile.js, package.json and a nuspec file in order to compile, build and pack the nugets successfully.

Documentation Solution

In this section you will find information regarding the documentation.

Documentation Structure

This is the documentation solution which shows all the components of the theme. When making changes to the styles this may be used as a quick test environment to ensure that all components behave correctly.

The solution contains all the debug css files as mentioned above. When adding a new theme, please add it to the toggle in the shared layout so it is easy to switch between themes.

Copyright (c) 2018 Playtech BGT Sports Ltd.