Getting started with Infusion

Cheetham, Anastasia acheetham at
Tue May 28 15:08:20 EDT 2013

Geoffrey, thanks for your reply. Your comments are very helpful: It's hard for us to anticipate the all various perspectives that people come to our documentation with. I will try to do two things:

1) Answer your specific questions here, and
2) Improve our documentation so that the next person doesn't have to ask these questions.

> I was confused by the instruction to modify: FatPanelUIOptionsFrame.html, because it didn't say where to fund this file.

Given that you've got your page working, I guess you eventually figured this one out. I will definitely update the docs to specify where to find the file.

> What is Fluid compared to Infusion?

- Infusion is the JavaScript framework and component library (User Interface Options is one of the components in the library; there are several others available as well).

- Fluid is the open-source community that created and maintains Infusion, among other things.

I suspect that the documentation might use the two words interchangeably some times. I'll try to clean that up a bit.

> Why doesn't the page: How Infusion Works tell me how Infusion works? (Instead giving me links to dozens of articles about topics that are confusing. ("that-ism"? "Markup Agnosticism"?)

Good point. Infusion is a pretty comprehensive toolkit, and we most likely couldn't describe it in one page, but your question suggests that the "How Infusion Works" page would benefit from some overview text, perhaps with suggested paths through the documentation. Plus, we could certainly think of better names for pages like "that-ism" :-)

> Why don't you use the Infusion tool on your own website?

Ah, that's another good point. Our documentation is currently hosted using Confluence, a wiki. It is a powerful wiki, but our documentation requirements have outgrown it. We are currently searching for an alternative platform which would meet our needs, and those needs would include the ability to apply UI Options to the site.

> I would have liked to see links to actual sites that use the Infusion tool. The Demos seemed overly specific.

I will definitely add links to sites that use User Interface Options, such as

> Mostly I am interested in a overall workflow explanation. To wit, I have a site I am building and I am trying to see if I can incorporate Infusion. I have this one page working: It's okay, but there are problems with the initial view (e.g. Black on White). The default line spacing is too small and the menu items are too small. I know the user can increase these, but how would I make it better to begin with (without entirely redesigning my site)?

I see that you've nicely scoped your styles to a theme name, so that they can be swapped out. Part of the problem is that it looks like you've scoped *all* of your styles to the theme name. This is not correct (and that's obviously not clear in the documentation): You should only scope colour-related styles. When you choose a different colour scheme, UI Options essentially removes any styles that you've scoped, so you're removing your layout, etc.

 - If it's something that should change when you switch to another colour scheme (for example, the red links), then you should scope it using your theme name.
 - If it's something you want to stay the same across different colour schemes (e.g. layout and positioning, font size, etc) then *don't* scope it using the theme name.

This will mean that some of your style blocks will need to be split out into two block. For example:

.uio-demo-theme .redheader {
    background-color: #CC3333;
    height: 4px;
    width: 100%;

would have to become

.redheader {
    height: 4px;
    width: 100%;
.uio-demo-theme .redheader {
    background-color: #CC3333;

Does that make sense?

If you change your styles to only scope colour-related styles, it will probably address many of the problems you're seeing.

> And where do I find out about Tables of Content? What are they? Site navigation or page navigation?

The Table of Contents is another component offered as part of the Infusion package, and it is included with UI Options. It adds to the page a nested list of all the headings on the page, so it can help people to get an overview of what's on the page, and help them navigate the page.

In order for this to work, you need to add an empty <div> to your page where you want the Table of Contents to appear. (I see that the tutorial is missing that part, sorry.)

The <div> should have a class of 'flc-toc-tocContainer', like this:

    <div class="flc-toc-tocContainer"> </div>

You can also add your own class if you like, and create your own styling for it so that it blends in with your site however you'd like.

> The whole thing seems like a great idea, but I'm unsure if I am approaching it correctly…

You're definitely on the right path! And I'm delighted to have your questions, please keep them coming. Hopefully we can help you get set up, and in the process we'll also learn some things that will help us to improve our documentation.

Anastasia Cheetham     Inclusive Design Research Centre
acheetham at           Inclusive Design Institute
                                        OCAD University

More information about the fluid-work mailing list