kbc-base-styles

Kano base Scss styles, including a CSS reset and initial element styles. Also includes useful scss functions and mixins for creating projects.

Usage

Sass

In Scss, import the base stylesheet at the top of your project:

@import '~@kano/kbc-base-styles/main.scss';

To import the Scss tools - variables, functions and mixins:

@import '~@kano/kbc-base-styles/src/tools.scss';

Overwriting default variables

Colour and typography variables made available from kbc-base (initially from kbc-tokens) are possible to be overwritten by the local application. To do this in your application, create local variables with the same variable name before importing tools or the base styles:

// App variables
@import 'variables';
// kbc-base
@import '~@kano/kbc-base-styles/main.scss';

or:

// App variables
@import 'variables';
// kbc-base tools
@import '~@kano/kbc-base-styles/lib/tools.scss';