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
  • 1.2. Using the theme in scss
  • 1.3. Theme contents
  • 1.4. CDN (unpkg)
  • 1.5. Icons
  • 1.6. Colors
  • 1.7. Fonts
  • 1.8. SCSS Helpers
  • 1.9. Dynamic includes (Mixins & Variables)
  • 1.10. GIT
  • 1.11. How to develop and test locally
  • 1.12. How to release new versions
  • 1.13. Versioning

1.1. How to use the theme

How to Install:

• npm install @tradera/blueprint or yarn install @tradera/blueprint

1.2. Using the theme

• Reference the theme from node_modules @import "node_modules/@tradera/blueprint/theme/main.css"

• Using webpack/module bundler: @import '~@tradera/blueprint/theme/main.css'

Alternatively, the built css assets are available in ./main.css

Colors and SASS variables can be imported as an object with import * as themeVariables from '@tradera/theme/scss/export.scss'

1.3. Theme contents

Exposed files:

• @tradera/blueprint
• @tradera/blueprint/theme/fonts/
• @tradera/blueprint/theme/icons/
• @tradera/blueprint/theme/scss/dynamic.scss

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/blueprint@latest

or specify the version you wish to use:

https://unpkg.com/@tradera/[email protected]

All directories mentioned above are also available from unpkg.

• https://unpkg.com/@tradera/blueprint@latest
• https://unpkg.com/@tradera/blueprint/@latest/icons/
• https://unpkg.com/@tradera/blueprint/@latest/colors.json
• https://unpkg.com/@tradera/blueprint/@latest/scss/dynamic.scss
• https://unpkg.com/@tradera/blueprint/@latest/fonts/

1.5. Icons

Icons are provided from the directory icons and are exposed to you the consumer by @tradera/blueprint/icons/<icon-name>

Icon SVG files 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

Color definitions can be imported with import { primary, secondary } from '@tradera/theme/scss/export/colors.scss'

1.7. Fonts

Fonts are exposed via @tradera/blueprint/fonts/ and contain web font versions of the tradera fonts (woff, woff2, ttf).

The theme doesn't automatically include @font-face declarations. Some implementations load font files from other places, like a CDN. To use the included fonts, import ~@tradera/blueprint/theme/scss/typography/fonts.scss in your scss.

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/blueprint/scss/dynamic.scss