Schweizer Berghilfe Styleguide

This styleguide is intended for developing web applications. It contains all meta definitions like colors, fonts, breakpoints, grid and typography.

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;
}