# backend-systemintegration-sharedutilities-ui-theme

> Ui.Theme Npm Package

Latest version **1.0.0** (published 2019-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install backend-systemintegration-sharedutilities-ui-theme
pnpm add backend-systemintegration-sharedutilities-ui-theme
yarn add backend-systemintegration-sharedutilities-ui-theme
bun add backend-systemintegration-sharedutilities-ui-theme
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-02-14 |
| First published | 2019-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kostantinos Evangelou |
| Maintainers | constantinos |
| Keywords | ui.theme |

## Links

- npm: https://www.npmjs.com/package/backend-systemintegration-sharedutilities-ui-theme
- Repository: https://git.pbs.one/scm/bsu/backend-systemintegration-sharedutilities-ui-theme
- npm.io page: https://npm.io/package/backend-systemintegration-sharedutilities-ui-theme

## Dependencies (1)

- [package.json](https://npm.io/package/package.json.md) ^2.0.1

## Recent versions

- 1.0.0 (latest) — 2019-02-14

## README

# 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](#gulp-solution)
  - [npm](#npm)
  - [Gulp](#gulp)
- [Theme SCSS Solution](#theme-scss-solution)
  - [SCSS Structure](#scss-structure)
- [Individiual Theme Solutions](#individual-theme-solutions)
  - [Themes Structure](#themes-structure)
- [Documentation Solution](#documentation-solution)
  - [Documentation Structure](#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](https://www.npmjs.com/get-npm).

### Gulp

Gulp requires npm to be installed. See [npm](#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.
___

---
_Source: https://npm.io/package/backend-systemintegration-sharedutilities-ui-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._