Installation

This guide will take you through the simple steps of consuming the Triton Design System in your project.

Getting started

First, make sure you have Node.js installed, and that node is available via terminal/cmd (command prompt).

Install latest version of Triton Design System via NPM: npm install @kognifai/triton-design-system --save

NPM tips

Here are some tips for working with npm. For more in depth information please go to NPM documentation.

Install and add as dependency

npm install @kognifai/triton-design-system --save

Install and add as devdependency

npm install @kognifai/triton-design-system --save-dev

What version am I currently using?

npm list @kognifai/triton-design-system prints the version number of Kognifai Design System, currently installed in your project:

npm list @kognifai/triton-design-system
test@0.0.1 C:\path\to\my\app
`-- @kognifai/triton-design-system@0.2.5

How do I install a specifc version?

npm install @kognifai/triton-design-system@0.2.5 --save installs the exact version 0.2.5 of Kognifai Design System in your project:

How do I update to a newer version?

npm outdated @kognifai/triton-design-system prints a list of current, wanted and latest version available

If your package json refers to the "@kognifai/triton-design-system": "^0.2.5", this would look something like this:

npm outdated @kognifai/triton-design-system
Package                 Current  Wanted  Latest  Location
@kognifai/triton-design-system    0.2.5   0.2.6   0.3.0  test
  • Current shows you the installed version. The same as the npm list command above.
  • Wanted shows that there is a newer version available in the registry that fit your version definition. The ^ says that you should be able to install version from 0.2.5 to 0.2.x (patch). But will never install 0.3.0 (minor) or 1.0.0 (major).
  • Latest shows that there is a minor version 0.3.0 available

To get the latest version matching your range, use npm update @kognifai/triton-design-system. In this case, it will install version 0.2.6.

If you like to update to a newer version, e.g. 0.3.0, change your applications package.json to:

    "kognifai-design-system": "^0.3.0"

Save the file and run npm update @kognifai/triton-design-system from your terminal. After install, check the version installed using npm list @kognifai/triton-design-system.

npm list @kognifai/triton-design-system
test@0.0.1 C:\path\to\my\app
`-- @kognifai/triton-design-system@0.3.0

Using CSS

The easiest way of consuming Kognifai Design System is to link directly to its precompiled CSS. Link to the stylesheets in this order in the <head> of the page:

<link media="all" rel="stylesheet" href="/path/to/styles/css/day-theme.css">
<link media="all" rel="stylesheet" href="/path/to/styles/css/dusk-theme.css">
<!-- Custom app stylesheets ->

If your build process automatically consumes the Kognifai Design System relative path to day-theme.css, the path would normally be:

  • node_modules/@kognifai/triton-design-system/styles/css/day-theme.css
  • node_modules/@kognifai/triton-design-system/styles/css/dusk-theme.css

For faster loading of webfonts, please take a look at typography for a description on how to preload font-files.

Using Scss

Another way of consuming styles, is to consume the source files for styling directly into you own css bundle. This way you will be able to use available tools like scss variables, functions and mixins.

When including the scss-files from the design system into you own bundle, the order of you @import statements are important.

// Import Vendor libraries
// ==========================================================================
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/vendor/scss-mq/mq';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/vendor/susy/scss/susy';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/vendor/susy/scss/plugins/svg-grid';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/vendor/sass-deprecate/sass-deprecate';


@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_absolute-center';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_base-margin';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_base-padding';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_box';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_center';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_cf';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_cover';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_family';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_fixed';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_font-face';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_font-smoothing';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_grid';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_hidden';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_highlighter';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_hyphenate';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_icon-scale';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_invisible';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_objectfit';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_overflow-margin-fix';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_placeholder';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_range';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_ratio';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_reset-list';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_shadow';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_spacing';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_tables';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_text-align';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_text-underline';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_text-underline-border';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_text-underline-crop';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_triangle';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_truncate';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_type-family';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_type-scale';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_type-weight';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/mixins/mix_vishidden';

@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/functions';
@import 'node_modules/@kognifai/triton-design-system/src/scss/abstract/variables-static';

// Import Base (Reset, normalizing, global defaults)
// ==========================================================================
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/colors-day-theme';
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/colors-dusk-theme';
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/normalize';
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/typography';
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/animations';
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/utilities';
@import 'node_modules/@kognifai/triton-design-system/src/scss/base/webfonts';

// Import Layout
// ==========================================================================
@import 'node_modules/@kognifai/triton-design-system/src/scss/layout/layout-grid';
@import 'node_modules/@kognifai/triton-design-system/src/scss/layout/layout-container';
@import 'node_modules/@kognifai/triton-design-system/src/scss/layout/layout-regions';

// Import Components
// ==========================================================================
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/app-selector';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/badge';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/breadcrumb';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/button';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/button-group';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/button-toolbar';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/card';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/dropdown';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/form';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/form/selectors';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/form/input';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/form/input-group';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/form/label';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/hamburger';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/hero';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/icon';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/listgroup';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/modal';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/notification';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/pagination';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/push-bar';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/sidebar';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/table';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/tabs';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/topbar';
@import 'node_modules/@kognifai/triton-design-system/src/scss/components/tree';

// Import Themes
// ==========================================================================
@import 'node_modules/@kognifai/triton-design-system/src/scss/themes/day-theme';
@import 'node_modules/@kognifai/triton-design-system/src/scss/themes/dusk-theme';

Overriding styles with SCSS

By controlling which SCSS files you @import into your product, you can control when and how you override the styles Kognifai Design System provides.