Install npm

Install LotusJS

Setting up TypeScript

Basic overview of config and link to TS docs

Setting up Webpack

Understanding exclude externals

Using the emitted modules in your HTML page

Example of how to import the emitted ES modules

Understanding how to use the UMD modules in script tags


Create a Component

Scrum to agree on the data contract including skin parts and skin part states


Set upp package JSON

Configure .npmignore

Configure webpack and typescript

Importing Lotus and Lavender

Extending a base component

Do's and don'ts

Define your skin parts

Create behaviors

Create your test

Run tests in all target devices (sauce labs example)

Compile bundle


Create your template file

Do's and don'ts. Avoid classes, use selectors if possible

Create your styles.

Create css states

Define elements

Assign skin parts

Passing attributes

Test in browser and cross platform testing tools

Publish to npm

Use gitflow to create a new release

Make sure .npmignore does not explude skin files

Icrement version number

Run npm build

Run npm test

Run usability tests to ensure all supplied skin files look good to a human

Run npm publish

Finish your release using gitflow and publish tag


Collection Components


Advanced Components

Built in components

Building data grids and advanced data visualization tools

Gaming components

Cloud Components

Building component based PWA's with Lotus-MVW