Recommended for people less comfortable with javascript. This method is the easiest, but gives you a bit less flexibility. You can use Ink.Autoload to create the UI components by adding classes to the DOM, and data-attributes to pass options.

All configuration options, except callback functions, are available as data-attributes but are prefixed with data- and are written in lowercase and hyphen separated: someOption = data-some-option.

modernizr.js - Used for browser feature detection, mainly useful if you intend to use our flex grid.

Ink.requireModules

The Ink.requireModules() method is our implementation of AMDsrequire pattern. It handles dependency loading, provides aliases for modules and a callback function that gets executed. We recommend that you use it.

As you'll see throughout our documentation, the provided examples use Ink.requireModules(). Don't worry you don't have to use with every method invocation, but wrapping you code in its callback function will keep your code isolated and the DOMs global scope clean of clutter.

Example

/* Start of my_project.js file */Ink.requireModules(['Ink.Dom.Loaded_1','Ink.Dom.Element_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Net.Ajax_1','Ink.UI.Modal_1','Ink.UI.Carousel_1'],function(Loaded,InkElement,InkEvent,InkCss,Ajax,Modal,Carousel){varbody=Ink.s('body');varcontainer=Ink.ss('#container')[0];functiononClickBody(){InkCss.addClassName(body,'body-class');varnewElm=InkElement.create('div',{className:'some-class',id:'newdiv',setTextContent:'Element text content',insertBottom:container});}functionaddEvents(){InkEvent.on(body,'click touchstart',onClickBody);}/* ... more code ... */functioninitProject(){addEvents();newModal('#project-modal',{trigger:'#open-modal'});newCarousel('#project-carousel',{pagination:'#carousel-pagination'})}Loaded.run(function(){// will run on DOMContentLoadedinitProject();});});/* End of my_project.js file */

Ink.Ext

The Ink.Ext is a special namespace. It was created to allow the community to contribute with new modules or components. These contributions may eventually be integrated into Inks core. Read more on how to contribute on our Github repository.

To create your own extension use the Ink.createExt(). Your extension will become available under the Ink.Ext namespace.

Ink.requireModules(['Ink.Ext.Donut_1'],function(Donut){'use strict';vardonutElement=document.getElementById('donut-element');newDonut(donutElement,{// See `Donut._optionDefinition` for what you can pass as options// Options can also be passed as data-attributes in the element.flavor:'chocolate'});});