Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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

Merge branch 'FLUID-5599'

* FLUID-5599:
  FLUID-5599: Added a new line char at the end of a json file.
  FLUID-5599: Improved the unit test for the prefs editor.
  FLUID-5599: Fixed a typo.
  FLUID-5599: Setup a proper defaltLocale value in fluid.prefs.prefsEditorLoader, improved unit tests for prefsEditor and use french language in _fr json files.
  FLUID-5599: Simplified the merge of locale and defaultLocale options into the resource spec at fluid.prefs.resourceLoader.
  FLUID-5599: Added new line chars at the end of some message json files.
  FLUID-5599: Based on Antranig's implementation of localised resource fetcher, updated the prefs framework to accept and fetch message files using locale values.
latest commit 76c61899b6
@amb26 amb26 authored

README.md

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?

http://fluidproject.org/infusion.html

How Do I Get Infusion?

You can checkout and fork Infusion on github:

https://github.com/fluid-project/infusion

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

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.

Dependencies

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

npm install

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.

grunt
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

--source

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

--include

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"

--exclude

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"

--name

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

By default, custom packages are given a name with the form infusion-custom-.zip 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

Modules

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
  • fonts
  • jQuery
  • jQueryScrollToPlugin
  • jQueryTouchPunchPlugin
  • jQueryUICore
  • jQueryUIWidgets
  • json
  • normalize

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.