@tradera/tradera-ui NPM

1. Tradera UI theme

This is the official UI theme for Tradera

You can find a styleguide showcasing the components of the theme at https://styleguide.tradera.com/

1.0.1. Table of contents

1. Tradera UI theme - 1.0.1. Table of contents

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-name>

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.
<version-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.