Use data attributes to apply JavaScript to FatKit components

You can use all FatKit components by just adding data-f-* attributes to your HTML elements without writing a single line of JavaScript. This is FatKit's best practice of using its components and should always be considered first.


<button data-f-btn>My Button</button>

But of course you can still use the components just through the jQuery API.



AMD support

AMD (Asynchronous Module Definition) is a way of defining JavaScript modules and their dependencies so they can be loaded asynchronously.


/* Simple require of the FatKit core */
require("path/to/fatkit.js", function(UI){

	// UI is the global FatKit object a.k.a. $.FatKit


Autoload FatKit and its components

/* setup require.js first */

	paths: {
		"fatkit": 'path/to/fatkit.js'

	config: {
		"fatkit": {
			"base": "path/to/fatkit_dist_folder"


/* now you can autoload fatkit core + components separated by a comma */
require("fatkit!notify,sortable", function(UI){

	// access loaded components: UI.notify, UI.sortable


Override default component settings.

It is possible to adjust the default component settings as you can see in the following example.


// override default tooltip settings
FatKit.on('beforeready.f.dom', function()

	$.extend(FatKit.components.tooltip.prototype.defaults, {
		pos: 'top',
		delay: 500,
		animation: true


Observe the DOM to auto-init new added components, e.g via AJAX.

If you inject dynamic HTML markup into the DOM via JavaScript, just add the data-f-observe attribute to one of the parent elements to auto-initialize UIKit JavaScript components.


<div data-f-observe>
	<!-- inject your dynamic html here -->

Observe an element via JavaScript

FatKit.domObserve('#element', function(element) { /* apply on dom change within element */ })

Check Display event on visibility change.

Sometimes components, like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to be recalculated to adjust or fix the height and other dimensions.

To do so, add the data-f-check-display attribute to the elements which need to be recalculated. They now listen to the display.f.check event, which will be triggered by the container component, for example the Switcher. This is not needed for elements with data-f-margin, data-f-grid-margin and data-f-grid-match attributes, those will be triggered by default.


<!-- Element within a modal, switcher or dropdown -->
<div id="myelement" data-f-check-display>...</div>

$("#myelement").on('display.f.check', function()

	// custom code to adjust height etc on show