Installation

Download

You have the following options to get Gloss:

• Download the latest release with pre-built JavaScript and CSS.
• Install with Yarn to get the pre-built JavaScript, CSS and the source files. This is recommended when using Gloss for a typical web project: yarn add utahhealthcare/gloss-source the project cannot be added to package registries at this time.
• Clone the private repo to get all source files including build scripts: git clone git://github.com/utahhealthcare/gloss-source.git

File structure of the source

The GitHub project contains all source files which are compiled into the dist folder. Modern CSS sources are compiled into CSS files, JavaScript sources are bundled and transpiled into ECMAScript 5 and icons are bundled into the icon library.

Compile from GitHub source

To compile Gloss yourself, you can use the included build scripts.

# Run once to install all dependencies
yarn

# Compile all source files
yarn compile

# Watch files and compile automatically everytime a file changes
yarn watch

The compiled dist folder now contains additional files which are not checked in by default.

/dist/css

    <!-- Gloss's CSS -->
    gloss.css
    gloss.min.css

    <!-- Gloss's CSS in a right-to-left version -->
    gloss.rtl.css
    gloss.rtl.min.css


/dist/js

    <!-- Gloss's JavaScript -->
    gloss.js
    gloss.min.js

    <!-- Stripped down JavaScript. Core functionality without additional components -->
    gloss-core.js
    gloss-core.min.js

    <!-- Icon Library -->
    gloss-icons.js
    gloss-icons.min.js

    <!-- Additional components (e.g. Lightbox), only needed when including gloss-core.js -->
    /components

To use Gloss’s CSS and JavaScript, include the files in your own HTML and then create the markup of the components listed here in the docs.

To compile Gloss automatically everytime you change the CSS or JavaScript files, you can use the included build scripts.

yarn watch