https://github.com/nix23/gridifier
// 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>
// 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>
/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.
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', [ ... ]);
};
// 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.
(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(...);
});
next: Usage
prev: Intro