Getting started with the vanilla component library is just a matter of including the compiled styles and scripts.
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.
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">
<!-- Optionally include a theme -->
<link rel="stylesheet" href="node_modules/@gbg/gbgcomponentlibrary/dist/themes/loqate.css">
</head>
<body>
<script src="node_modules/@gbg/gbgcomponentlibrary/dist/gbgcomponentlibrary.min.js"></script>
</body>
</html>
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>