node package manager

hex-framework

A front-end framework from LionsMouth Digital

Hex is still in development and is NOT production-ready. Some things are more tedious to set up right now, because we're still playing around with a lot of things. Once we release v1, you can expect Hex setup to be at least as simple to set up as any other framework you'd install with npm.

⬢ Hex is a front-end framework from LionsMouth Digital.

Purpose

  1. Provide a lightweight starting point for front-end development.
    As does any framework, Hex aims to save time by supplying common components. However, we don't want Hex's default appearance to do too much. If you can look at a site and see Hex in its soul, we've got work to do.
  2. Avoid div soup.
    We don't like the verbosity of markup from some other frameworks we've used in the past and intend to keep markup lean.

Getting started

Sass

  1. npm install hex-framework
  2. Configure the :load_paths option to include node_modules. The option in node-sass is called includePaths.
  3. Set up your main Sass file:
    • Duplicate node_modules/hex-framework/resources/sass/utils/_variables.scss into your Sass folder as utils/_hex-vars.scss, and update values for your project.

    • Add this to your main Sass file:

      @import 'hex-framework/src/scss/utils/functions';
      @import 'utils/hex-vars';
      @import 'hex-framework/src/scss/hex';

      Importing your own copy of the variables file before Hex allows you to configure only the variables you want. You could delete whatever you leave at the default setting, but we like to keep it in there so we don't have to hunt for a variable name if we decide to change something.

      The variables file uses functions, so that needs to be included first.

JavaScript

Hex's JavaScript is Vue-based. We recommend installing only the components you need via npm and adding them to your script like so:

npm i -S vue vue-hex-dropdown
var Vue         = require('vue');
var HexDropdown = require('vue-hex-dropdown');
 
new Vue({
  el: 'body',
 
  components: {
    HexDropdown
  },
});

If you don't want to bother setting up all the components, you can just require it in your script (BYO build tool).

var Hex = require('hex-framework');

If you're not familiar with using build tools, you can just download hex.js or hex.min.js and reference it like any other script for now.

<script src="path/to/hex.js"></script>

Dev

  1. git clone git@github.com:LionsMouthDigital/Hex.git
  2. Open package.json and js/hex.js and remove any Vue components you don't need.
    If you don't need any, you can just remove hex.js altogether. For more info, See Hex Vue components.
  3. cd Hex && npm install
  4. grunt serve

Hex Vue components

We built a bunch of Vue components to use along with Hex, but we separated them from the Hex framework to make it easier to use them without the framework (also released under the CC BY-SA 4.0 license).

Using the components w/o the framework

To simplify maintenance, we keep the styles here. We figure if you don't use the framework, you must know how to write your own CSS and probably don't like our base styles anyway. If you do want our styles, you can find what you need in scss.

License

CC BY-SA 4.0

To simplify attribution, we've included a humans.txt template with our info pre-filled. Just drop it in the root directory of the project using Hex to comply with the minimum attribution requirement.