tool-integration.md

Tool Integration

Information on how to integrate Toolkit with build tools, task runners, and more.

Sass

Integrating Toolkit into your Sass layer will allow for direct importing of Toolkit's Sass files. Something like the following.

// Import all variables, mixins and functions
@import 'toolkit/common';

// Import the CSS for the tooltip component
@import 'toolkit/components/tooltip';

// Import everything
@import 'toolkit';

The available paths for import must be relative to the Toolkit scss directory.

Gulp

Integrate Toolkit using Gulp. This will require the titon-toolkit and gulp-sass NPM packages.

gulp.task('css', function() {
    return gulp.src('./scss/**/*.scss')
        .pipe(sass({
            includePaths: [__dirname + '/node_modules/titon-toolkit/scss']
        }))
        .pipe(gulp.dest('./css/'));
});

Grunt

Integrate Toolkit using Grunt. This will require the titon-toolkit and grunt-sass NPM packages.

grunt.initConfig({
    sass: {
        options: {
            includePaths: [__dirname + '/node_modules/titon-toolkit/scss']
        },
        build: {
            src: './scss/**/*.scss',
            dest: './css/'
        }
    }
});

grunt.registerTask('default', ['sass']);

Compass

Integrate Toolkit using a Compass extension. This approach requires Ruby, Ruby Gems, Sass, and Compass to be installed.

gem install sass
gem install compass
gem install titon-toolkit

Once installed, require Toolkit at the top of the Compass config.rb file. Learn more about Compass configuration.

require 'titon-toolkit'

JavaScript

Furthermore, integrating Toolkit into your JavaScript layer will allow for the direct importing of Toolkit's JS files. Toolkit uses AMD styled module definitions but should work if an agnostic module loader is used, something like the following.

// ES6
import Carousel from 'toolkit/components/carousel';

// CommonJS
var Carousel = require('toolkit/components/carousel');

// AMD
define(['toolkit/components/carousel'], function(Carousel) {});

The available paths for import must be relative to the Toolkit js directory.

Webpack

Integrate Toolkit using Webpack. This will require the titon-toolkit and webpack NPM packages.

resolve: {
    alias: {
        toolkit: __dirname + '/node_modules/titon-toolkit/js'
    }
}

RequireJS

Integrate Toolkit using RequireJS. This will require the titon-toolkit and requirejs NPM packages.

paths: {
    toolkit: __dirname + '/node_modules/titon-toolkit/js'
}