🚧 Requirements

• node.js v10.x (LTS) or newer
• yarn v1.19.1 or newer for dependency management
• IDE or editor with EditorConfig enabled

🚦 Getting started

• Make sure you have the correct Node version in place for this project: lts/dubnium
• Install: yarn install
• Run: yarn run development

Kesselblech

In this documentation you learn how to use the Kuchenblech theme with the Kesselblech boilerplate.

Structure

• Introduction
• Structural setup
• Start a new project
• Create a new component
• Create a new template
• Theming with tenants
• Theming the styleguide
• Using translations
• React Components
• Working with the repository
• Scripts
• Contribute
• License

Introduction

Kesselblech

Kesselblech ([ˈkɛsl̩blech] German for boilerplate) is a custom boilerplate for a living styleguide based on Fractal. If you want to know more about the Fractal configuration you should check out their documentation. The boilerplate doesn’t use the default template engine handlebars, but extends it with the fractal-pug-adapter, so we can use Pug templates inside Fractal.

Kuchenblech

Kuchenblech ([ˈkuːxn̩̩blech] German for cake tin) is a custom theme for the Kesselblech boilerplate, a tool to help you build & document the living styleguide. It sets the frame for a component library, lists all templates, and lets you add documentation. It also adds the possibility to add custom color themes - called “tenants“ - to your components.

Overall this setup allows us to create a living styleguide, that works as a component library with information for both front-end and back-end developers, as well as a prototype to send out to clients. Feel free to contribute.

Structural setup

Every project has a basic folder setup, that should be used and then be extended to the project’s needs.

src
    -api
    -components
    -docs
    -fonts
    -icons
    -images
    -javascripts
    -stylesheets
    -templates
    -translations

/api/

This folder can contain mock APIs to work with in the prototype.

/components/

components
    -_particles
    -_preview
    -atoms
    -molecules
    -organisms

This folder contains all components listed on the left in the components tab of your styleguide. Every subfolder groups the components also in the front-end. The basic collections are always /atoms/, /molecules/, and /organisms/, which is based on the methodology of atomic design. Inside these three collections a folder for each component is located. It is possible to nest these deeper into sub-collections.

Learn more about fractal collections.

There are two more subfolders: /_particles/ and /_preview/. They are hidden from navigation and listings (see “Hiding collections”). Particles houses micro components, that doesn’t exist as a standalone component, but need to be reused in several other components (e.g. icons). Inside the preview folder you can find the setups that can emulate different situations for a component to live in (e.g. inverted, dark background etc.). Read more about preview layouts.

Learn how to create a new component.

/docs/

This folder houses the project related documentation written in Markdown. The basic setup is six files:

You can also use a smaller setup by combining the colors and fonts (and more) in a single 1-tokens.md file.

If the project uses tenants, there can be a folder per tenant housing a config.yml file and an individual markdown file, that e.g. shows the tenant name and the tenant color (take a look at the Baden-Württemberg docs).

The project docs should be extended by the projects’ needs.

Learn more about fractal.

/fonts/

This folder holds all (optimized) font files needed in the project.

/icons/

This folder holds all SVG icons. An icon sprite is created during the process and can be used in the code by referencing it in the xlink by their file name (using delimiter-separated words).

svg(viewBox=viewBox, role='presentation')&attributes(attr)
  //- Reference to SVG storage
  use(xlink:href=`#icon-${icon}`)

Every icon must be optimized and contained in a square of 200 × 200 (width="200", height="200", viewBox="0 0 200 200"). There should be a 5 pixel margin on every side, so the maximum size for paths/outlines itself is 190 × 190.

All icons are being listed and showcased in the docs.

/images/

Here you can place all images needed throughout the prototype. Please use subfolders to group the images. The image folder is copied to the server in deployment, so they are accessible in the front-end assets for integration.

/javascripts/

-javascripts
    -constants
    -shims
    -utils
    -head.js
    -lazyloading.js
    -main.js

All scripts that do not specifically belong to one component are stored in the javascripts folder. These could be reusable classes or helper functions etc. The basic setup always houses a folder for /constants/, /shims/ and /utils/. These can be filled individually. If you need more folders, feel free to add them. Every JS file that is not located in a subfolder will be processed and deployed to the front-end assets. The minimum required files are head.js and main.js.

/stylesheets/

-stylesheets
    -abstracts
    -base
    -layout
    -themes
    -main.scss
    -styleguide.scss

This folder contains all SASS files that are reused through the project and do not specifically belong to one component. Inside the /abstracts/ folder you’ll find at least a variables file, that defines colors, fonts, breakpoints etc. in one place. In the /base/ folder basic styles that do not belong to a component, e.g. the body, should be defined. Layout specific files (e.g. page.scss) can be found in the /layout/ folder. In the /themes/ folder belongs for example the print.scss. If you are using tenants v.0.8.1 your tenant theme files go here as well. You can add more folders if you need them.

Remember to import all component style files into the main.scss. A main.css is build, that should be embedded into your templates.

The styleguide.scss file contains all styles needed to add a custom theming to your styleguide.

Learn more about SASS.

/templates/

All Pug template files are located in this folder. If you use tenants, you can create subdirectories for each tenant.

Learn how to create a new template.

/translations/

The translations folder houses two files (.js and a .po) for each language and a translations.pot.

Learn more about translations.

Start a new project

You have to edit the following files to start a new project.

1. package.json

Insert the basic informations for the new project:

"name":  @"rsm/[ PROJECTNAME ]",
  "title": "[ PROJECTNAME ]",
  "version": "0.0.0",
  "description": "[ DESCRIPTION FOR PROJECT ]",
  "author": "ressourcenmangel an der Panke GmbH <adp@ressourcenmangel.de>",
  "license": "UNLICENSED",
  "repository": {
    "type": "git",
    "url": "git@gitlab.rsm-support.de:[ PATH TO PROJECT ]"
  },

2. .browserlistrc

Update the list to the browser versions you want to maintain in this project.

3. .gitlab-ci.yml

Update the GitLab CI settings for your project. Change the project variable to your projects’ short name:

variables:
  PROJECT: [ PROJECTSHORT ]

If you already have a staging and production setup, please fill in the right parameters for the pipelines:

deploy:staging:
  stage: deploy
  script:
    - DEPLOY_LOCAL=true yarn run deploy:staging
  only:
    - production
  environment:
    name: staging
    url: [ PATH TO ASSETS ON STAGING ]

deploy:production:
  stage: deploy
  script:
    - DEPLOY_LOCAL=true yarn run deploy:production
  only:
    - tags
  environment:
    name: production
    url: [ PATH TO ASSETS ON PRODUCTION ]

Learn more about GitLab CI configuration.

4. shipitfile.js

The project uses Shipit as an automation engine and a deployment tool. Please fill in the config as needed:

// Configuration
  shipit.initConfig({
    default: {
      deleteOnRollback: false,
      dirToCopy: path.join(workspace, 'dest'),
      keepReleases: 4,
      repositoryUrl: _.get(pkg, 'repository.url') || _.get(pkg, 'repository'),
      workspace,
    },
    development: {
      branch: branch || 'master',
      deployTo: `/data/www/stages/${project}/dev/`,
      servers: 'deploy@rsm-frontend.de',
    },
    review: {
      branch: branch || 'HEAD',
      deployTo: `/data/www/stages/${project}/${process.env.CI_COMMIT_REF_SLUG}/`,
      servers: 'deploy@rsm-frontend.de',
    },
    staging: {
      branch: branch || 'production',
      deployTo: [ PATH TO PROJECT ON STAGING SERVER ],
      servers: [ STAGING SERVER ADRESS ],
    },
    production: {
      branch: branch || 'production',
      deployTo: [ PATH TO PROJECT ON PRODUCTION SERVER ],
      servers: [ PRODUCTION SERVER ADRESS ],
    },
  });

5. Documentation

Learn more about the styleguide.

6. Changelog

Rename CHANGELOG.new.md to CHANGELOG.md after deleting the identically named file.

Create a new component

Please develop all components by the methodology of atomic design and use the BEM naming convention.

1. Level

You have to decide if the new component is an atom, a molecule or an organism. You will find a folder inside of /src/components/ for each of the three levels:

• /atoms/
• /molecules/
• /organisms/

2. Component folder

Create a folder named after the component (using delimiter-separated words), e.g. my-component.

3. Config file

Add a configuration file, e.g. my-component.config.yml.

4. Pug template file

Add a Pug template, e.g. my-component.pug. Your component should now show up in your front-end, as the minimum of information is given.

5. SASS stylesheet (optional)

Add a SASS stylesheet, e.g. my-component.scss, and import it in /src/stylesheets/main.scss.

6. JavaScript file (optional)

Add a JavaScript file, e.g. my-component.js, and import it in /src/javascripts/main.js.

Learn more about fractal components.

Create a new template

1. Create a new template file

In /src/templates/, create a pug file named after the template (using delimiter-separated words), e.g. my-template.pug.

Templates dedicated to tenants belong in subfolders named after the tenant they are grouped in.

2. Add pugdoc

Add a pugdoc section at the top. Add the template name and optional additional information:

//- @pugdoc
  name: Startseite
  order: -1
  group: lp

In this example, “Startseite” is used as the display name for the template. It will be on the first position in the template list and belongs to the group lp.

To provide templates only for a specific tenant, use the group attribute. order only needs to be set, if you want the template not to follow the alphabetical order (ordered by display name).

3. Extend the main template

In most cases you want to extend the main template found in /src/templates/layouts/:

extends layouts/_main.pug

4. Append config

Append the config of your main layout if needed.

main.pug:

//- Config
block config
  -
    var tenant = _.get(_env, 'request.params.tenant', 'lp');
    var metaTitle = metaTitle || 'Baden-Württemberg';
    var metaSiteName = metaSiteName || 'Baden-Württemberg.de';
    var metaDescription = metaDescription || 'Baden-Württemberg Webseite';
    var bodyClasses = bodyClasses || [''];
    var pageClasses = pageClasses || [''];
    var headerSettings = headerSettings || [''];
    var footerSettings = footerSettings || [''];
    var breadcrumb = breadcrumb || false;

my-template.pug:

block append config
  -
      tenant = 'lp'
    metaTitle = `Startseite - ${metaTitle}`;
    breadcrumb = false

Learn more about Pug template inheritance.

5. Assemble components

Include components into your template:

block content
  //- Header-Slider
  .page__section
    +include( @'slider--frontpage')

  //- Statistics-Breaker
  .page__section
    +include( @'statistics-breaker', {
      teaser: {
        image: { src: '/images/dummy-statistics-breaker.jpg', width: 680, height: 260 }
      }
    })

The templates should automatically be listed in the styleguide.

Pug helpers

data()

If you need more complex configuration for a component inside a template, you can add a named .yml file to /src/templates/data/ and include the file by using the fractal helper data:

block content
 - const boardProjectData = data('board-project.yml')
 //- Article
 .page__section
     +include( @'article', boardProjectData, false)

placeholderImage()

The placeholder helper defines a global source for placeholder images, so you don’t have to define it for every image you want to use. In this project we use bildermangel.de as the source.

Source:

`https://bildermangel.de/${width}x${height}/${bgcolor}/${color}.png?text=${width}x${height}`

How to use it:

imageSrc = placeholderImage(width, height, '28281a', 'F5F5F5');

@>TODO Use a self hosted placeholder API.

Theming with tenants

For some clients we need to apply different color themes or custom components to the styleguide. Kuchenblech implements a dropdown where you can choose between the “tenants”.

If you don’t see a dropdown in your project frontend, it’s because you didn’t add a theme to your project. The moment you add a named folder in the /src/docs folder and add a 0-index.md and a [tenant-name].config.yml, the dropdown will appear.

/src/docs/tenant-1/0-index.md:

---
title: Tenant 1
label: Übersicht
---

# Tenant 1

## Templates

Name | Pfad
--- | ---
{% for template in templates('tenant-1') %}[{{ template.meta.name | default(template.basename) }}](../templates/{{ template.basename }}.html) | `{{ template.path }}`
{% endfor %}

/src/docs/tenant-1/tenant-1.config.yml:

label: Tenant 1
order: -1

There are different methods throughout the version history of Kuchenblech to implement them.

v. 0.3.3: combined stylesheet

If you need one stylesheet for all tenants use the Kuchenblech version 0.3.3. In the components’ SASS files you can loop through all $tenant-colors to add the color depending on the tenant:

/src/stylesheets/abstracts/variables.scss:

$tenant-colors: (
  'lp': $color-gold,
  'bp': $color-pale-red,
  'm-stm': $color-dark-gray,
  'm-im': $color-orange,
  'm-fm': $color-deep-blue,
  'm-mwk': $color-steel-blue,
  'm-um': $color-gray-green,
  'm-wm': $color-deep-red,
  'm-sm': $color-light-blue,
  'm-mlr': $color-green,
  'm-vm': $color-dark-green
);

/src/components/atoms/my-component/my-component.scss:

@>each $tenant, $color in $tenant-colors {  
  .v-#{$tenant} .foo {
    color: $color;
  }
}

v. 0.8.1 and higher: separated stylesheets

Later versions of Kuchenblech allow building stylesheets for each tenant individually. There should exist a stylesheet in /src/stylesheets/tenants/tenant-name.scss for each tenant which overwrites variables marked as !default and import the main stylesheet afterwords. You can add theme specific overwrites and helpers below:

/src/stylesheets/abstracts/variables.scss:

$public-path: '../' !default;
$color-primary: $color-blue !default;
$color-secondary: $color-red !default;
$button-colors: (
 primary: $color-primary,
 secondary: $color-secondary,
) !default;

/src/stylesheets/tenants/tenant-name.scss:

// Tenant Name
/**
 * Varibles
 */ @import '../abstracts/colors';
/**
 * Overwrites for variables
 */
$public-path: '../../';
$color-primary: $color-uwe-blue;
$color-secondary: $color-uwe-green;
$button-colors: (
 primary: $color-primary,
 secondary: $color-uwe-green-dark,
);
/**
 * Import main stylesheets
 */ @import 'main';
/**
 * Helpers
 */ @function more-link($color: $color-uwe-green) {
 @return zb-svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15"><path fill="' + $color + '" fill-rule="nonzero" d="M0 8.32V6.68h10.16L5.51 1.99 6.68.82l6.68 6.68-6.68 6.68-1.21-1.17 4.69-4.69z"/></svg>');
}
/**
 * Overwrites for stylesheet
 */
.dialog__head {
 background-color: $color-gray-xlight;
}

You can define default tenants in fractal.config.js:

fractal.components.set('default.tenant', ['tone', 'ttwo']);

Component visibility in tenants

In the config files of your components you have the possibility to determine wether the component is visible inside different tenants.

Component is visible in all tenants:

tenant: '*'

Component is visible the five listed tenants:

tenant:
 - bst
 - uwe
 - digital-pathguide
 - 2getherland
 - plattformarbeit

Component is only visible in one tenant:

tenant: 'plattformarbeit'

An implementation of the v.0.8.1 can be found in the Bertelsmann front-end (v.3.1.2)

Tenant groups in templates

To add tenant specific templates, add a folder (named by tenant) to /src/templates. To display them use the docs files. An example is given at the top of this chapter. To add it to the tenant also add a group in the @pugdoc section of the template-file.

//- @pugdoc
  name: Startseite
  order: -1
  group: tenant-1

Theming the styleguide

The Kuchenblech theme is customizable by adding styles to the /src/stylesheets/styleguide.scss file. The styleguide can be themed differently for each client. The custom styleguide styles are loaded after the main theme of Kuchenblech, so styles can easily be overwritten.

Using translations

If your project has to be translated into another language, you have to take care of the translation of all strings inside JavaScript files (e.g. React components).

Maybe this should be bundled into a package in the @>rsm namespace, because it is used in all new projects. See GitHub issue #10.

1. Import the withTranslation utils function

import { t } from 'javascripts/utils/withTranslation';

(see /src/javascripts/utils/withTranslation/)

2. Wrap the string you want to translate

t('Übersetze mich!');

3. Parse the translation

Run translations:parse.

4. Open .po file in poedit

You can find the parsed files in /src/translations/.

5. Load from translations.pot

In poedit, select Katalog → Aus POT-Datei aktualisieren and translate all strings into the desired language and save the file.

6. Convert to JS

Run translations:convert.

7. Add JS to template

Load the generated JS file into your template:

script(src=path(`/translations/${htmlLang}.js`))

8. Add new language

If you have to add a new translation language, open poedit and select Datei → Neu aus POT-/PO-Datei and choose the wanted language, then follow the steps above.

React translation HOC

For translations inside react components, you can also use a HOC to pass the translation functions into the components. Importing the { t } function will also work with React components, so this is optional.

export function withTranslation(WrappedComponent: React.ComponentType<any>) {
 class WithTranslation extends React.Component<{}> {
 render() {
     const translateFunctions = {
         t,
         tp,
         tc,
         tcp,
     };
     return <WrappedComponent {...translateFunctions} {...this.props} />;
     }
 }
 WithTranslation.displayName = `withTranslation(${getDisplayName(WrappedComponent)})`;
 return WithTranslation;
}

React Components

In some projects we use React to render dynamic components, e.g. for rendering search-results.

Setup

Babel & ES-Lint Config

Please make sure babel and ES-Lint are using the right plugins and extensions to work with react and flow.

Please add the following packages to your dev dependencies:

Babel:

• @>babel/preset-flow,
• @>babel/preset-react

ES-Lint

• eslint-plugin-flowtype
• eslint-plugin-react

Add this to your .babelrc and .eslintrc:

"presets": [
     @"babel/preset-react",
     @"babel/preset-flow"
]

/.babelrc

"extends": [
    "plugin:react/recommended",
    "plugin:flowtype/recommended"
],
"plugins": [
    "flowtype",
    "react"
],
"settings": {
    "react": {
        "version":  "detect"
    }
},

/.eslintrc

Sometimes prettier rules interfere with es-lint rules. If you want to disable those rusles for jsx-files, add the following to your /.eslintrc/:

"overrides": [
    {
        "files": ["**/*.jsx"],
        "rules": {
            "arrow-parens":  "off",
            "operator-linebreak"  :  "off",
        }
    }
]

/.eslintrc

Prettier Pre-Commit Hook

A prettier pre-commit hook re-formats your files that are marked as “staged” via git add before you commit, in case you are not using a prettier plugin in your visual editor. Please add lint-staged to your dev dependencies, as documented. Make sure prettier is also installed as a dev dependency with the --exact flag.

Add a .prettierrc to your root.

{
    "arrowParens":  "avoid",
    "bracketSpacing":  true,
    "jsxBracketSameLine":  false,
    "printWidth":  80,
    "proseWrap":  "always",
    "semi":  true,
    "singleQuote":  true,
    "tabWidth":  2,
    "trailingComma":  "all",
    "useTabs":  false
}

/.prettierrc

Using VS Code

If you use VS Code to edit your react files (*.jsx), you can find a settings.json in the /.vscode/ folder, that sets your prettier workspace settings to automatically formatting on save. If you haven’t already, please install prettier for VS Code.

Working with React

Folder structure and naming conventions

React-components should follow the Kesselblech components’ structure using atoms, molecules and organisms.

/component/
    component.pug
    component.scss
    component.config.yml
    component.js
    /react/
        Component.jsx
        index.js

If a static component also exists as a react component, they share a folder. All react-related files should be located inside a react subfolder. If they all were in the same folder, clear imports from other files are not possible, because capitalized filenames can not be distinguished from lowercase filenames. Every react-components’ name should start with a capital letter, e.g. Component.jsx. An index.js file should export the component, so import pathes get shorter.

import Component from './Component';
export default Component;

/index.js/

import Component from '/organisms/component/react'

component import

Fetching Data

If a react-component is fetching data from an API you should devide concerns into a view-component and a container-component. Handling the data-fetching and formatting, the container should pass this data as props to the view-component.

const Component = ({ results }) => (
    {results &&
        results.map((item, index) => (
            <div key={index} className="component__item">
                {item.name}, {item.age}
            </div>
    ))}
);

view-component

const ComponentContainer = (url) => {
    const [result, setResult] = React.useState();

    React.useEffect(() => {
        const fetchData = async () => {
            try {
                const fetchResult = await fetch(url);
                const resultJSON = await fetchResult.json();
                setResult({ data: resultJSON });
            } catch (error) {
                setResult({ data: undefined });
            }
        };
        fetchData();
    }, [url]);

    return (<Componet results={result.data}/>);
}

Fetching data in a container-component and passing the props to the view-component.

Working in a template

Mostly react-components are only used in special cases or maybe just inside a single template (e.g search-interfaces). For that reason you shouldn’t load the javascript rendering those components on every page, where it’s not needed. Please create a dedicated js file, that is only loaded on templates, that need to use react components, e.g. react-prod.js.

Previews

Since react-components are often just rendered inside a single div and get their context from Javascript, they can not use all features of the normal Kesselblech preview out of the box. To generate more usefull previews, add a preview variant, that injects react-dev-view.js to the preview frames showing react-components.

name: react
    label: React
    context:
      react: true

/preview.config.yml/

extends ../../templates/layouts/_main.pug

block append config
  - var htmlClass = 'no-cookie-warning';
  - var bodyClasses = [`body--${theme || 'white'}`];

block page
  if scrolling
    .preview-buffer

  #page.preview(class=classNames(theme && `t-${theme}`, paddingless && 'preview--paddingless'))
    != yield

  if scrolling
    .preview-buffer

block append scripts
  if react
    script(src=path('/javascripts/react-dev-view.js'))

Appending a script for the react-preview in /preview.pug/.

You can import .js files for preview-purposes in there. These files should be named component-preview.js and be located in the components’ react folder.

Use context of config.yml

If you just want use the React component as a visual component inside the Kesselblech preview frame, without having any dynamic data, you can use the same context as a pug component does.

const  data  =  require('./my-component.config.yml');

document.querySelectorAll('#react-my-component').forEach(($comp) => {
    ReactDom.render(<MyComponent  {...data.context}/>,  $comp);
});

To require yaml files make sure that webpack has the correct loaders enabled:

• json-loader
• yaml-loader

Install those and add the following to your /webpack.config:

module: {
    rules: [
        {
            test: /\.ya?ml$/,
            use: [
                { loader:  'json-loader'},
                { loader:  'yaml-loader'},
            ],
        },
    ],
}

Working with the repository

To contribute to this repository please follow the rules below:

Features

1. All changes and additions should be developed in feature branches.
2. Feature branches should be dedicated to one problem/addition.
3. Every feature branch should be named after the component/template (if possible) e.g feature-atom-button.

Merge commits

1. The master should be rebased into the feature branch before merge.
2. Features should only be merged by merge request.

Commits

1. Commits should be atomic.
2. All changes in the commit should be describable in one sentence.
3. WIP commits should be squashed if possible. 🚧
4. Commit everything at the end of the day (staying atomic or squashing WIP later).

Commit messages

1. Commit messages are always in English.
2. Please use the present tense.
3. Messages start with an emoji using gitmoji as a guide.
4. The first word should describe the action (e.g. “Add”, “Remove”, “Fix”) and start with a capital letter.
5. They should mention what kind of component is changed (atom, molecule, organism, template).

Documentation

Please add all project related documentation to /src/docs/ (e.g. tenant names, hint to legacy code, back-end integration related code …).

Changelog

When the front-end gets deployed and integrated with a back-end, you should maintain a changelog with semantic versioning.

Learn how to keep a changelog.

Example of a new entry into CHANGELOG.md:

## [Unreleased] - 2019-01-31
### Added
* Add @event-header

### Changed
* Fix @breadcrumb overflowing header

Insert the correct version into the heading when creating a new release:

## [1.3.0] - 2019-01-31

You can compare two versions on GitLab by adding the correct links at the end of the changelog manually:

[1.3.0]: https://gitlab.rsm-support.de/abc/frontend/compare/1.2.3...1.3.0
[1.2.3]: https://gitlab.rsm-support.de/abc/frontend/compare/1.2.2...1.2.3
…

Scripts

Run the styleguide in development mode on localhost:3000:

yarn development

Run linter tests:

yarn test

(This happens also at deployment.)

Other scripts (e.g. for translations, deployment etc.) can be found in the package.json file.

Contribute

Kesselblech

This repository is latest version of the boilerplate which should be the basis for your next new front-end project. To keep it up-to-date, please upgrade dependencies if needed or add new features which may be helpful for future projects. Please keep your colleagues informed about what you want to enhance and discuss it if needed. Communication is key! If you don’t want to contribute yourself or simply don’t have enough spare time, feel free to file an issue.

For smaller changes, bugfixes or documentation edits, you may commit directly into the master branch.

If you have bigger changes in mind, please use a seperate branch and let the changes be reviewed by a second developer before merging. This boilerplate is the basis of all new projects and therefore should not be broken at any time.

Kuchenblech

A big part of this setup is about how we work with the Kuchenblech theme. Its open-source repository is maintained by our ressourcenmangel organization on GitHub.

You can use the Kesselblech theme in the Kuchenblech boilerplate with the related @/rsm/kuchenblech">npm package. If you want to contribute and use the new version in this repository, you have to commit your changes to the GitHub repository and publish it with a new version tag on npm.

1. Commit your changes with a proper commit message to the GitHub repository
2. Create a version commit:
   • Add your changes to the changelog
   • Update the version number in package.json and the changelog.
   • Commit message: “🔖 Version X.X.X”
3. Add a tag with version to this commit (“X.X.X”)
4. Push to master branch (make sure to push all tags!)
5. Publish on npm
   • Run npm login and fill in your login data from your npm account (make sure you have the rights to publish in the @>rsm namespace)
   • Run npm publish
6. Use the new version in this repository
   • Run yarn upgrade @rsm/kuchenblech

License

Licensed under MIT © 2019 ressourcenmangel.