UI Options Lunchbox

Owned by Jonathan Hung
Last updated: Jun 06, 2023 by Avtar GillVersion comment
2 min read

Work in Progress

This page is work in progress.


People are incredibly diverse - each person will have different needs, preferences, and ability to adapt to situations. Since most web content is primarily static once published or delivered to a web browser, how can websites change and adapt to account for such human diversity and changing contexts with minimal disruption?

UI Options provides a way to enhance or improve website usability, flexibility, and accessibility by providing a way to customize and control aspects of a website without the need for additional software or tools. For those who design, build, or maintain websites, UI Options can also help reveal areas where the web content and structure can be changed to improve flexibility and robustness.

What is UI Options?

UI Options is a "widget" that can be added to websites that provide ways for visitors to adjust the website's presentation, perceptibility, and usability. Currently UI Options can:

  • adjust text size and style
  • increase line spacing
  • change colour contrast
  • add a table of contents
  • emphasize links, buttons, and other inputs

UI Options works within the website and does not require any additional software to be installed - visitors needs only a modern web browser (latest Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge). UI Options works with Internet Explorer 11 (with support ending with Infusion version 3 to be released in mid to late 2020).

Try the demo: UI Options demo.

Introductory Video: This video (Youtube) summarizes the features of UI Options and goes over installation using the Zip package method.

Technical: UI Options works by modifying the displayed web page's CSS and HTML using Javascript. For example, UI Options colour contrast adjustment works by adding a contrast CSS class to the body HTML element. The Table of Contents feature is controlled by adding and removing a unique Nav element from the webpage.

Aside: Have an idea to improve UI Options? We're always looking to add new features. Send us an email / github etc.

Getting and Installing UI Options

UI Options can be obtained through a Zip package, built from Github source code, or via npm. Visit this guide for the instructions getting UI Options using one of these methods.

UI Options is also available as a plugin for Wordpress and Drupal.

There are a number of ways to get and install UI Options:

  • Getting the latest stable release as a Zip package, or via npm. See "Getting Started with UI Options"
  • Downloading and building from the latest development source code on github
  • Wordpress Plugin:
    • Released with latest stable infusion release
    • Directions / build process for using latest dev version.
  • Drupal Plugin (maintained by Open Concept)


Outline for Adding UIO:

  • Install
    • Detail instructions for the 5 methods above
  • Test
  • Fix issues
  • Updating / upgrading
  • Support, bug reporting
  • Wordpress Plugin


Questions to answer:

  • ongoing maintenance of UIO, upgrading, changes and new features, etc.
  • how to use UIO for wordpress