Elements

Elements is a web component library used for the open boardgame simulator project and is built using Stencil.

Use Elements to design and build any web application using our Design Principles and Components.

Getting Started

To start contributing to Elements web component library using Stencil, clone this repo:

git clone https://github.com/GamesSquared/Elements.git
cd Elements

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Convention

When creating new component tags, use the prefix el (ex: <el-grid>).

Using Elements component library

There are three strategies we recommend for using Elements web component library built with Stencil.

Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/[email protected]/dist/elements.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install elements --save
• Put a script tag similar to this <script type='module' src='node_modules/elements/dist/elements.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install elements --save
• Add an import to the npm packages import elements;
• Then you can use the element anywhere in your template, JSX, html etc