HexagonJS
Getting Started
How to set up a basic page with hexagon
Installing and Building Hexagon
The first step to using hexagon is to install it and build it somewhere.
A basic install script for a site serving the public directory would be something like:
const hexagon = require('hexagon-js')

hexagon.light.build({
  dest: 'public/resources/hexagon'
})
This would build hexagon into public/resources/hexagon
See the Installation page for more information about building hexagon.
HTML Base template
Below is an example start page with a Titlebar and the example from the Card module.
For the sake of this demo, hexagon has been built into public/resources/hexagon/latest
The HTML5 <!DOCTYPE html> is important here as without it browsers can fall back to 'compatibility mode' which can break some Hexagon functionality.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hexagon Starter Page</title>

  <!-- Make the page responsive to the device window size -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <!-- Add Font Awesome (for icons) https://fontawesome.com/get-started -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

  <!-- Add the hexagon stylesheet -->
  <link rel="stylesheet" href="/resources/hexagon/latest/hexagon.css">
</head>
<body>
  <div class="hx-heading example-heading">
    <div class="hx-titlebar">
      <div class="hx-titlebar-container">
        <div class="hx-titlebar-header">
          <a class="hx-titlebar-icon" href="#">
            <img class="hx-logo"></img>
          </a>
          <div class="hx-titlebar-title">Title</div>
          <div class="hx-titlebar-subtitle">Subtitle</div>
          <div class="hx-titlebar-menu-icon-mobile"><i class="fa fa-bars"></i></div>
        </div>
        <div class="hx-titlebar-menu-icons">
          <div class="hx-titlebar-menu-icons-container">
            <a class="hx-titlebar-menu-icon"><i class="fa fa-tags"></i><span class="hx-titlebar-menu-text">Tags</span></a>
            <a class="hx-titlebar-menu-icon"><i class="fa fa-life-ring"></i><span class="hx-titlebar-menu-text">Help</span></a>
            <a class="hx-titlebar-menu-icon"><i class="fa fa-cog"></i><span class="hx-titlebar-menu-text">Settings</span></a>
            <a class="hx-titlebar-menu-icon"><i class="fa fa-power-off"></i><span class="hx-titlebar-menu-text">Sign out</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="hx-titlebar-linkbar">
      <div class="hx-titlebar-contents">
        <a class="hx-titlebar-link">Link 1</a>
        <a class="hx-titlebar-link">Link 2</a>
        <a class="hx-titlebar-link">Link 3</a>
        <a class="hx-titlebar-link">Link 4</a>
        <a class="hx-titlebar-link">Link 5</a>
      </div>
    </div>
  </div>
  <div class="hx-content">
    <div id="card-container"></div>
  </div>

  <!-- Include the hexagon script at the end of the body -->
  <script src="/resources/hexagon/latest/hexagon.js"></script>


  <!-- Add your own scripts -->
  <script>
    function titleText (title, text) {
      return hx.card.section()
        .add(hx.detached('div')
          .add(hx.card.title({text: title})))
        .add(hx.detached('div')
        .add(hx.card.text({text: text})))
    }

    function sparkline (options) {
      return hx.card.group()
        .add(hx.card.fixed.section().add(hx.card.text({text: options.text})))
        .add(hx.card.section().add(hx.sparkline({strokeColor: options.sparklineColor, data: options.sparklineData})))
    }

    function random (i) {
      return {
        x: i,
        y: Math.random()
      }
    }

    function statusCard (name, context) {
      return hx.card()
        .add(hx.card.header.section({ context: context})
          .add(hx.card.title({text: name})))
        .add(hx.card.header.group()
          .add(titleText('Status', 'Normal'))
          .add(titleText('Uptime', '5 days'))
          .add(titleText('Memory Usage', '482 MB'))
          .add(titleText('Thread Count', '19'))
          .add(titleText('Page Hits', '2236 / s')))
        .add(hx.card.aligned()
          .add(sparkline({text: 'Memory Use', sparklineColor: hx.theme.plot.colors[0], sparklineData: hx.range(60).map(random)}))
          .add(sparkline({text: 'Thread Count', sparklineColor: hx.theme.plot.colors[1], sparklineData: hx.range(60).map(random)}))
          .add(sparkline({text: 'Page Hits', sparklineColor: hx.theme.plot.colors[2], sparklineData: hx.range(60).map(random)}))
          .add(sparkline({text: 'Messages Processed', sparklineColor: hx.theme.plot.colors[3], sparklineData: hx.range(60).map(random)})))
    }

    hx.select('#card-container').classed('hx-group hx-horizontal', true)
      .add(hx.section()
        .add(statusCard('Instance 1', undefined)))
      .add(hx.section()
        .add(statusCard('Instance 2', 'positive')))
      .add(hx.section()
        .add(statusCard('Instance 3', 'negative')))
  </script>
</body>
</html>
Live Demo
View demo in new window