It’s suited for any kind of web application, no matter which framework/technology you might use, since it’s written in Sass and doesn’t produce any output at all.

Installation

Just run npm -S @berghilfe/styleguide, that’s it.

How to use?

To view the storybook run npm run storybook.

The concept of the styleguide is that it provides all branding related assets/artifacts as pickable chunks. See some example use cases below.

I need all colors

Let’s say all you need are the colors that the branding manual defines.

// Import the color variables…
@import "~@berghilfe/styleguide/colors";

// Apply it to your custom component
.my-component {
    background-color: $sbh-palette-pheasant;
    color: $sbh-palette-white
}

// Or define some semantic color variables.
$color-text: $sbh-palette-nickel;
$color-text-muted: $sbh-palette-concrete;

I need the web fonts

Let’s say you need the official web fonts.

// Import the mixin for getting the fonts…
@import "~@berghilfe/styleguide/fonts";

// Always inspect the source code of the mixin if you might want to adjust/tweak it.
@at-root {
  @include sbh-fonts;
}

I need the primary button

The styleguide also provides mixins for user interface elements defined by the branding manual.

// Import the mixin for the primary button
@import "~@berghilfe/styleguide/components/button-primary";

.button-primary {
  @include sbh-button-primary;
}