README

Quick Start

Step 1: Install the framework

$ npm install ehealth-pillar --save

Or by CDN directly in your HTML <head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ehealth-pillar/output.css">

Step 2: Import style library

@import '~ehealth-pillar/output.css';

// Custom styles go here if needed

Prototyping (for eHealth Employees)

This repository includes a simple build system including everything you need to happily prototype using the latest JS and CSS features. Options for live reloading and builds are also included.

SASS support is also included

Develop

Clone this project

$ git clone <user-repo>

Build with dependencies

$ npm install

Create *.html file at project root and reference design library and JS bundle.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Playground</title>
    <link rel="stylesheet" href="./output.css">
</head>
<body>

    <!-- Your Lovely Work here -->

    <script src="./output.js"></script>
</body>
</html>

Run NPM script to watch for file changes

$ npm run watch

5a. Live Reload with VSCode Using the Live server extension simply right click on html file and 'Open with Live Server'.

5b. Live Reload with Http Server

$ http-server

Build

As you develop, the files will automatically be compiled and extracted to individual files

output.css for CSS styles output.js for JS

Optional Build Plugins to be enabled:

cssnano for css optimization such as minifying, removing comments, etc.
purgecss for removing all unused styles
babel for transpiling JS code to ES5
terser for js optimization

The above plugins are disabled for development but should be used when deploying to production. Make sure all function calls found in plugins: [] in rollup.config.js are enabled.

TODO: set environment variables for DEV and PROD

Usage no npm install needed!