Kinderopvang Branding

Collection of all the available shared branding for Kinderopvang in different formats to allow it to work for multiple technologies (css, scss, pcss, js, react-native)

Installation

Via Yarn package manager :

yarn add @tactics/kinderopvang-branding

Usage

1. In a CSS context

When using this package in a css contexts it's best to add some kind of build step that copies the files in the dist folder of this package to your project.

Since the node_modules folder is normally excluded from the git repository it is best not to import from the actual path but copy the files to a path that is included and committed in your Github repository.

An example using webpack below but you can use a different setup if you want, just make sure the files are copied via a script and not manually.

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: '@tactics/kinderopvang-branding/src', to: '/my-css', context: 'node_modules'}
      ],
    }),
  ],
};

2 . In a SCSS context

In a scss context you can include the files via the @import method since this already requires a build process to convert scss to normal css files. In the build process the path will be resolved and the content of those files will be copied into your own project css.

@import "@tactics/kinderopvang-branding/src/colors.css";

3 . In a PCSS context

In a pcss context you can include the files via the @import method since this already requires a build process to convert pcss to normal css files. In the build process the path will be resolved and the content of those files will be copied into your own project css.

@import "@tactics/kinderopvang-branding/src/colors.css";

4 . In a JS context using css files.

If you want to use this package in a JS context that uses css for it's styling and not something like inline styles, styled components (https://styled-components.com/) or some other way of bypassing regular css files.

Then you can just include the distributed css files in your javascript app.

import "@tactics/kinderopvang-branding/src/colors.css";

5 . In a JS context using styled components or inline styles.

If you want to use this package in a JS context that uses styles directly you can import the js files.

import {Colors} from "@tactics/kinderopvang-branding";

const Button = styled.button`
  color: ${props => Colors.ui.black};
  background: ${props => Colors.primary["9"]};
`

6. In a React Native context.

If you want to use this package in React native you can import the js files.

import {Colors} from "@tactics/kinderopvang-branding";

export default StyleSheet.create({
    button: {
        color: Colors.ui.black,
        backgroundColor : Colors.primary["9"],
    },
});