Layout a grid of skill patches.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
example
.gitignore
hex-default.html
index.js
index.less
package.json
readme.md
render.js

readme.md

diy-skill-hex-grid

Layout a grid of skill patches.

Example

Installation

npm install diy/skill-hex-grid

Usage

var g = grid(document.querySelector('.grid-wrapper'), { skills: skills.map(function (s) {
    return {
        img: {
            src: s.images.large,
            alt: s.title + ' Badge'
        },

        href: '/skills/' + s.url
    };
}) });

g.enable();

var g = grid($el, options);

Returns an instance of SkillHexGrid which is a wrapper for hex-grid.

var options = {
    skills: [],
    offset: {
        x: 0,
        y: 0
    }
}

g.disable()

Disables mouseenter and mouseleave interactions.

g.enable()

Enables mouseenter and mouseleave interactions.