Install

Git

https://github.com/nix23/gridifier

How to install Gridifier using GIT?

• download ZIP - download ZIP-file and extract gridifier-master folder into your javascripts folder.
• include one of builds - for full version use 'path-to-js/gridifier-master/dist/gridifier.min.js'.

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>
        

Structure

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
        ...
        

/gridifier

• Gruntfile.js - contains preconfigured Grunt configuration file, which should be used for custom builds.
• gulpfile.js - contains preconfigured Gulp configuration file, which should be used for custom builds.
• package.json - npm configuration file. Contains dependencies for Grunt and Gulp, which are required for custom builds.

/dist

• gridifier.js - full version of library. Can be used to measure size relative to other builds.
• gridifier.min.js - full version of library. Should be used on production.

/gzip

• Contains GZIP-ed version per each .min library build from /build folder. This files can be used to measure how much network traffic will be required to deliver library from production servers.

/src

• /api - contains all files, which can be used to extend/change Gridifier functionality.
• /core - contains all core files. This files are used to build custom version.

/test

• tests.html - open this file in browser to run unit tests.

/vendor

• Contains libs, required to run unit tests.

Grunt/Gulp

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:

Gruntfile.js:

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.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-compress');

    // 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', [ ... ]);
};
        

gulpfile.js:

// 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)

AMD/Require.js

What loader Gridifier uses?

• umd returnExports - Gridifier uses UMD returnExports loader.
• anonymous AMD module - for AMD loaders Gridifier is registred as anonymous AMD module.
• amd, node - so, Gridifier will work with AMD loaders like RequireJs or CommonJS-like environments(like Node) that supports module.exports.

(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;
}
        

// 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(...);
});