How to install Gridifier using GIT?

Bower and npm

How to install Gridifier using bower?

// Execute bower install from your project root
$ bower install gridifier

// Include one of builds(gridifier.min.js is a full version)
<script src="/bower_components/gridifier/dist/gridifier.min.js"></script>

How to install Gridifier using npm?

// Execute npm install from your project root
$ npm install gridifier

// Include one of builds(gridifier.min.js is a full version)
<script src="/node_modules/gridifier/dist/gridifier.min.js"></script>


Folder structure:

/gridifier // Root folder
        /dist // Contains files, ready for production usage
                /gzip // Contains GZIP-ed versions of builds
        /src // Contains source files, that are used per custom builds
                /api // Api files, used per modifications
                /core // Core files, used per builds
        /test // Contains project unit tests
                ... // Folders with tests
        /vendor // Contains libs, required to run unit tests








You can build custom version of Gridifier to remove unused features with Grunt/Gulp. Grunt/Gulp also can be used to rebuild library after modifications. So, you can modify some API functions or settings and rebuild Gridifier to use them globally instead of passing functions/settings to each Gridifier instance. Gruntfile.js/gulpfile.js files are located in the root project directory and have following structure:


module.exports = function(grunt) {
    // Any class from 'selectable' array can be excluded from custom build
    var selectable = [
        // Any file here can be removed from build.
        // (if you are not using features, provided by included file)
       core + "core/antialiaser.js",

    // All classes from 'required' array should be included in all builds
    var required = [
        // This files should not be modified

    grunt.initConfig({ ... });

    // This dependencies are included in package.json file, so run 'sudo npm install'
    // from /gridifier folder to install them.

    // To build custom version run 'grunt' command from /gridifier folder.
    // By default, this will create 'gridifier-custom.js' and 'gridifier-custom.min.js'
    // files inside /dist directory.
    grunt.registerTask('default', [ ... ]);


// Gulp config file has similar to Gruntfile.js structure.
// Running gulp task from /gridifier folder will also create 'gridifier-custom.js' and
// 'gridifier-custom.min.js' files inside /dist directory.

Custom versions

How to build custom version?

  1. exclude unused classes - exclude unused classes in Gruntfile.js, if it is required.
  2. modify src/api classes - modify api classes, if it is required.
  3. run 'grunt' or 'gulp' command - run 'grunt' or 'gulp' command from /gridifier root folder. gridifier-custom.js and gridifier-custom.min.js files will be created in /dist directory.
  4. run unit tests(test/tests.html) - Gridifier ships with unit tests, that are testing the most important kernel functions. If you have excluded some classes in step 1, don't forget to comment them out in tests.html file too. (Otherwise some tests will fail)


What loader Gridifier uses?

Gridifier loader
Gridifier UMD returnExports loader

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory); // AMD. Register as an anonymous module.
    } else if (typeof exports === 'object' && exports) {
        module.exports = factory(); // CommonJS-like environments
    } else {
        root.Gridifier = factory(); // Browsers globals (root is window)
}(this, function () {
    // ... Library code here

    return Gridifier;
RequireJS usage:

// As RequireJs devs recommends, Gridifier is registred as anonymous module.
// So, Gridifier will be available with name, that depends on path, relative to RequireJs root file.
// If created by RequireJs name has subfolders, you always can shorten it by using paths in your configuration:
paths: {
    'gridifier': 'path-to-gridifier/gridifier.min.js'

// Later, you can use require library like this:
require(['gridifier'], function(Gridifier) {
    var asyncGrid = new Gridifier(...);
next: Usage prev: Intro