GBG Component Library - Vanilla

Getting started

Getting started with the vanilla component library is just a matter of including the compiled styles and scripts.

Install GBG Component Library

Use your package manager of choice to install the GBG component library, in this guide we'll use npm.

npm i @gbg/gbgcomponentlibrary --save-dev

This will install the package to your node_modules folder.

Include the scripts and styles

The package within your node_modules folder will contain a dist folder. You can reference the css and js files from this folder, or copy them to a more convenient place.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>The HTML5 Herald</title>
        <meta name="description" content="My HTML Page">
        <meta name="author" content="Henry Thomas">

        <link rel="stylesheet" href="node_modules/@gbg/gbgcomponentlibrary/dist/gbgcomponentlibrary.css">

    </head>

    <body>
        <script src="node_modules/@gbg/gbgcomponentlibrary/dist/gbgcomponentlibrary.min.js"></script>
    </body>
</html>

Using components

Once the styles and scripts are included on your page using components is just a case of copying and pasting their markup from the storybook examples.

The scripts will automatically initialise components that require it on initial page load. Following that all initialisers can be found under the "gbg" namespace.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>The HTML5 Herald</title>
        <meta name="description" content="My HTML Page">
        <meta name="author" content="Henry Thomas">

        <link rel="stylesheet" href="node_modules/@gbg/gbgcomponentlibrary/dist/gbgcomponentlibrary.css">

    </head>

    <body>

        <button class="button button--primary" aria-label="Button Title">
            Button Title
        </button>

        <script src="node_modules/@gbg/gbgcomponentlibrary/dist/gbgcomponentlibrary.min.js"></script>
    </body>
</html>