# 1. Tradera UI theme This is the official UI theme for [Tradera](https://www.tradera.com) You can find a styleguide showcasing the components of the theme at [https://styleguide.tradera.com/](https://styleguide.tradera.com/) ### 1.0.1. Table of contents - [1. Tradera UI theme](#1-tradera-ui-theme) - [1.0.1. Table of contents](#101-table-of-contents) - [1.1. How to use the theme](#11-how-to-use-the-theme) - [1.2. Using the theme in scss](#12-using-the-theme-in-scss) - [1.3. Theme contents](#13-theme-contents) - [1.4. CDN (unpkg)](#14-cdn-unpkg) - [1.5. Icons](#15-icons) - [1.6. Colors](#16-colors) - [1.7. Fonts](#17-fonts) - [1.8. SCSS Helpers](#18-scss-helpers) - [1.9. Dynamic includes (Mixins & Variables)](#19-dynamic-includes-mixins--variables) - [1.10. GIT](#110-git) - [1.11. How to develop and test locally](#111-how-to-develop-and-test-locally) - [1.12. How to release new versions](#112-how-to-release-new-versions) - [1.13. Versioning](#113-versioning) ## 1.1. How to use the theme How to Install: - `npm install @tradera/tradera-ui` or `yarn install @tradera/tradera-ui` ## 1.2. Using the theme in scss - Reference the theme from node_modules `@import "node_modules/@tradera/tradera-ui"` - Using webpack/module bundler: `@import '~@tradera/tradera-ui'` Alternatively, the built css assets are available in `./dist` (//@TODO Host on CDN) --- ## 1.3. Theme contents Exposed files: - `@tradera/tradera-ui` - `@tradera/tradera-ui/icons/` - `@tradera/tradera-ui/colors.json` - `@tradera/tradera-ui/scss/dynamic.scss` - `@tradera/tradera-ui/fonts/` ## 1.4. CDN (unpkg) The Tradera UI theme can now be found built and ready to use from the CDN 'unpkg.com'. You can load the `latest` version from this url (built, minified css): `https://unpkg.com/@tradera/tradera-ui@latest` or specify the version you wish to use: `https://unpkg.com/@tradera/tradera-ui@1.6.1` All directories mentioned above are also available from unpkg. - `https://unpkg.com/@tradera/tradera-ui@latest` - `https://unpkg.com/@tradera/tradera-ui/@latest/icons/` - `https://unpkg.com/@tradera/tradera-ui/@latest/colors.json` - `https://unpkg.com/@tradera/tradera-ui/@latest/scss/dynamic.scss` - `https://unpkg.com/@tradera/tradera-ui/@latest/fonts/` ## 1.5. Icons Our icons are provided from the directory `icons` and can be found within the styleguide. These are exposed to you the consumer by `@tradera/tradera-ui/icons/` Icon SVG can be optimized and cleaned up with `yarn optmize:icons`. This removed all colors, since those are provided through CSS. For best SVG results: - Convert geometry and text to path elements - Clean up unnecesary elements and attributes - Convert to a uniform 32x32 size and viewBox ## 1.6. Colors Colors are added to the object `colors.json`, this is also used in the scss file generation and can be used by consumers of the UI-Theme ## 1.7. Fonts Fonts are exposed via `@tradera/tradera-ui/fonts/` and contain web font versions of the tradera fonts (woff, woff2, ttf) ## 1.8. SCSS Helpers ## 1.9. Dynamic includes (Mixins & Variables) Sometimes it may be beneficial to use the built in mixins that bootstrap has, for example the media-queries. Or you wish to include the variables found in the Tradera Theme, this can be done like so: `import '@tradera/tradera-ui/scss/dynamic.scss` ## 1.10. GIT We have 3 types of branches to maintain a flow between stable and the next version (see versioning for semver instructions): - `master` this is protected and contains merged commits, with tag releases to `npmjs.com`. All commits in this branch are deployed to production automatically, create a new commit by merging in a `version-branch` - deploying and closing the old branch. - `` When developing the next version of the UI-Theme, create a branch named (using semver) inline with the next version of the theme. E.G You want to start development on version 1.5.0, `git checkout -b 1.5.0`. This branch then becomes 'staging' and all commits to it are built/deployed to staging. - `feature-branch` a feature branch is branch of a `version-branch` and contains a new feature/change. Feature branches are merged into their respective `version-branch` and release when that is pushed to master. - `documentation` Documentation is a special branch, this is for adding documentation only. Outside of the semver flow, it represents how our Style guidelines are interpreted at Tradera. This branch tracks master and can be merged in at any time See graph below for visual representation! ``` master ----------------*------------------*1.5.0-----* version-branch (1.5.0) \-----------------/ 1.5.1\----> feature-branch (new logo) \--------/ ``` ## 1.11. How to develop and test locally - In your feature UI Kit branch, do `yarn link`. - Make sure you're changes trigger a build of the dist/main.css, do: `yarn watch` - In the project you want to test your new UI Kit changes in, do `yarn link @tradera/tradera-ui`. - After testing, run `yarn unlink @tradera/tradera-ui` and `yarn install` to restore the project's UI Kit dependency. ## 1.12. How to release new versions Once the version branch is merged into master do the following. Then: - `npm version ` - `yarn build` - `git add .` - `git commit -m "version release notes"` - `npm publish` - `git tag ` - `git push` && `git push --tags` ## 1.13. Versioning We use [SemVer](http://semver.org/) for versioning.