Quick Start

This quick start is for users who have already worked with the Style Guide. For newcomers, we recommend starting with Download & Integration.

Include to your own project

You can integrate the Style Guide into your project via npm.

You need access to the Azure DevOps Artifactory. Add a .npmrc to your project with the following content.

@finanzen-net:registry=https://pkgs.dev.azure.com/finanzennet/finando/_packaging/finanzen-net/npm/registry/
always-auth=true

Then install the Style Guide package @finanzen-net/common-styles.

npm install @finanzen-net/common-styles

You can integrate the style and script files directly in the browser and thus access the components.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Project</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="~/node_modules/@finanzen-net/common-styles/dist/style-guide/style-default.css" />

    <!-- JavaScript -->
    <script src="~/node_modules/@finanzen-net/common-styles/dist/style-guide/script-default.js" defer></script>
  </head>
  <body>
    <button class="button">Hello World</button>
  </body>
</html>

Learn more about the integrate in the How to download & integration detail description, eg. how to integrate the files via a bundle process.