Skip to content
Infusion combines JavaScript, CSS, HTML and user-centered design, rolling them all into a single package that sits on top of the popular jQuery toolkit. Infusion includes ready-to-use components as well as a framework to build your own.
JavaScript HTML CSS
Latest commit 78f8986 Jun 22, 2016 @amb26 amb26 Merge branch 'FLUID-5919'
* FLUID-5919:
  FLUID-5919: Removed console.log statement, reworded docs, placed ResourceLoader test together with FluidRequests in order
  FLUID-5919: Moved fluid.resourceLoader from the preferences framework into the core framework as well as adding tests to demonstrate how to use it.
Failed to load latest commit information.
.settings NOJIRA: Converting DOS to UNIX line endings for the chili plugin. Feb 4, 2011
demos FLUID-5919: Moved fluid.resourceLoader from the preferences framework… Jun 17, 2016
examples FLUID-5919: Moved fluid.resourceLoader from the preferences framework… Jun 17, 2016
provisioning FLUID-5916: Updates Fedora to 23 and Node.js to the LTS branch. Jun 14, 2016
src FLUID-5919: Removed console.log statement, reworded docs, placed Reso… Jun 22, 2016
tests FLUID-5919: Removed console.log statement, reworded docs, placed Reso… Jun 21, 2016
.eslintignore FLUID-5909: Moving up to grunt 1.x build chain, simplifying (and acce… Jun 1, 2016
.eslintrc.json FLUID-5810: Fix for erratic failure of tests. QUnit patched to suppor… Jun 12, 2016
.gitignore FLUID-5906: Added omitted test-module2 and corrected .gitignore paths… May 19, 2016
.npmignore FLUID-5745: Omits test core tests and all-tests.html (correctly). Sep 3, 2015
.project FLUID-3888: Fixing an accidental change to the project name. Dec 13, 2010
Gruntfile.js FLUID-5914: Fixed some oversights in .eslintrc and moved Gruntfile.js… Jun 8, 2016
Infusion-LICENSE.txt NOJIRA: Cleaning up whitespace issues. Oct 26, 2015 GPII-1550: Upgrades browsers upon VM creation Feb 3, 2016 FLUID-5797: Removed beta from the release notes Oct 26, 2015
Vagrantfile FLUID-5916: Updates Fedora to 23 and Node.js to the LTS branch. Jun 14, 2016
package.json FLUID-5909: Moved up to published version of grunt-modulefiles Jun 2, 2016

What Is Infusion?

Infusion is a different kind of JavaScript framework. Our approach is to leave you in control—it's your interface, using your markup, your way. Infusion is accessible and very, very configurable.

Infusion includes:

  • an application framework for developing flexible stuff with JavaScript and jQuery
  • a collection of accessible UI components

Where Can I See Infusion Components?

How Do I Get Infusion?

You can checkout and fork Infusion on github:

See How Do I Create an Infusion Package?, for details on creating complete or custom packages of Infusion.

Where is the Infusion Documentation?

Infusion has comprehensive documentation at

Who Makes Infusion, and How Can I Help?

The Fluid community is an international group of designers, developers, and testers who focus on a common mission: improving the user experience and accessibility of the open web.

The best way to join the Fluid Community is to jump into any of our community activities. Visit our website for links to our mailing lists, chat room, wiki, etc.

Where is Infusion Used?

The Infusion library is the cornerstone of a number of projects. You can see some of them featured on our Projects page.

How Do I Create an Infusion Package?

Strictly speaking, Infusion can be used directly from source (i.e. by including each individual required file). However, for simplicity and performance reasons, you may wish to create a concatenated, minified file. The Grunt build options described below will also allow you to remove any unneeded features or libraries that you may already have in your project.


All other development dependencies will be installed by running the following from the project root:

npm install

(Infusion has no external runtime dependencies)

Package Types

Infusion All Build

Will include all of Infusion. The source files packaged along with the single concatenated js file will include all of the demos and unit tests. This is a good choice if you are trying to learn Infusion.

Custom Build

Will only include the modules you request, and all of their dependencies, minus any that are explicitly excluded. Unlike the "all" build, none of the demos or tests are included with a custom package.

grunt custom

Build Options


value: true (Boolean) the value can be omitted if --source is the last flag specified

By default all packages are minified. This option will allow you to maintain the readable spacing and comments.

grunt --source=true

grunt custom --source=true


value: "module(s)" (String) only available to custom packages

The --include option takes in a comma-separated string of the Modules to be included in a custom package. If omitted, all modules will be included (demos and tests will not be included).

grunt custom --include="inlineEdit, uiOptions"


value: "module(s)" (String) only available to custom packages

The exclude option takes in a comma-separated string of the Modules to be excluded from a custom package. The --exclude option takes priority over --include.

grunt custom --exclude="jQuery"

grunt custom --include="framework" --exclude="jQuery"


value: "custom suffix" (String) only available to custom packages

By default, custom packages are given a name with the form and the concatenated js file is called infusion-custom.js. By supplying the --name option, you can replace "custom" with any other valid string you like.

grunt custom --name="myPackage"    # this produces infusion-myPackage.js

How Do I Run Tests?

There are two options available for running tests. The first option involves using browsers installed on your computer and the second uses browsers available in a VM.

Run Tests Using Browsers Installed On Your Computer

Using this option requires the installation of Testem and then running testem ci --file tests/testem.json in this directory. Any browsers that Testem finds on your platform will be launched sequentially with each browser running the full Infusion test suite. The results will be returned in your terminal in the TAP format. You can use the testem launchers command to get a list of available browsers.

Please note that any browsers launched will need to remain in the foreground because some of the tests require window focus.

Run Tests Using Browsers Installed In a VM

If installing Testem is not preferable, a Fedora VM can be automatically created using tools provided by the Prosperity4All Quality Infrastructure. After meeting the QI development VM requirements the vagrant up command can be used to launch a VM which will contain Testem and several browsers. Typing grunt tests will run the Infusion tests in the VM and the results will be displayed in your terminal.

When this VM is first created Chrome and Firefox will be upgraded to the latest versions available in the Fedora and Google package repositories. The vagrant provision command can be used at a later time to trigger the browser upgrade and general VM provisioning mechanism.


Framework Modules

  • enhancement
  • framework
  • preferences
  • renderer

Component Modules

  • inlineEdit
  • overviewPanel
  • pager
  • progress
  • reorderer
  • slidingPanel
  • tableOfContents
  • tabs
  • textfieldSlider
  • textToSpeech
  • tooltip
  • uiOptions
  • undo
  • uploader

External Libraries

  • fastXmlPull
  • jQuery
  • jQueryScrollToPlugin
  • jQueryTouchPunchPlugin
  • jQueryUICore
  • jQueryUIWidgets
  • normalize

All of these libraries are already bundled within the Infusion image.

Developing with the Preferences Framework

Infusion is in the process of switching to use Stylus for CSS pre-processing. CSS files for the Preferences Framework have been re-written in Stylus. Only Stylus files are pushed into the github repository. For developing the Preferences Framework, run the following from the project root to compile Stylus files to CSS:

grunt buildStylus
Something went wrong with that request. Please try again.