Installation

Hexagon version 2.x.x
Hexagon version 1.x.x

Hexagon version 2.x.x

Installing

npm install --save-dev hexagon-js

The library will be stored in node_modules/hexagon-js/dist

The minimum required files are:

dist/
  - assets/
  - hexagon.css
  - hexagon.js

The print styles are also available

dist/
  - hexagon.print.css
  - hexagon.print.js

Assets

The dist/assets directory contains the font files that hexagon uses for the icons. This should be copied along with the other files.

For the purpose of customisation, there are additional files output in the dist directory, however these are not required when copying the pre-built version.

Using Hexagon Modules

It is now possible to import modules directly and create a bundle using your favourite module bundler (like Webpack or Rollup ).

import { DatePicker } from 'hexagon-js';

All hx.xxx apis are available and exported from hexagon-js. If you are using hx.theme() you will need to add the following to your app, before running any hexagon code:

import { theme } from 'hexagon-js';
import currentTheme from 'hexagon-js/dist/hexagon.theme.js';

theme(currentTheme);

...

This initialises the variables for the theme so they can be accessed via hx.theme()

import { theme } from 'hexagon-js';

console.log(theme().palette.actionCol);

Removed install methods

Installing with bower and using the builder API have been made redundant by the improved package structure.

See Migrating for information on switching to version 2.x.x

Hexagon version 1.x.x

Installing with npm (recommended)

npm install --save hexagon-js

The library will be stored in node_modules/hexagon-js/dist

Installing with bower

bower install hexagon-js

The bower builds contain all the modules - in order to create more slimline builds see the installing with npm section below.

The library will be stored in bower_components/hexagon-js

Using the builder api

Hexagon has a builder api for creating custom builds. This is included in the hexagon-js npm module. To install it run the following:

npm install --save hexagon-js

To build a custom version of the library some javascript must be written:

const hexagon = require('hexagon-js')

hexagon.light.build({
  // the directory to output the library to
  dest: 'libs/hexagonjs',
  // include just the modules you are interested in, or leave as undefined to get all the modules
  modules: ['plot', 'titlebar', 'base']
})

There are two themes available by default, hexagon.light and hexagon.dark with a third, more basic theme available called hexagon.base. Save this in a file, then run it with node to generate your build. This api can be easily integrated with gulp or grunt, or can even be run as an npm task.

Builder API

hexagon.[base|dark|light].buildoptionsObjectPromise

Builds a copy of the hexagon library into the provided dest

hexagon.base.build: Builds a basic theme with minimal styles
hexagon.dark.build: Builds the dark hexagon theme
hexagon.light.build: Builds the light hexagon theme

Arguments

options

Properties

destString

The target directory for the hexagon build

embedAssetsBoolean

Whether to embed assets in the CSS using base64 encoding

It is not always possible to embed all assets so some may still be output to the assets directory

Default: false

minifyBoolean

Whether to output minified JS/CSS alongside the usual build files

Default: false

modulesArray[String]

The array of hexagon modules to build

This can be used to create a subset of Hexagon modules for cases where only specific modules are required

The list of modules provided (and any dependencies) will be included in the bundle

Default: All Modules

prefixString

The hexagon prefix to use for the CSS. (e.g. the hx of .hx-form )

Default: "hx"

Returns

Promise

A promise that resolves when hexagon has finished building or rejects when there is an error

Contents