Page History

• What if a Fluid component is using a particular framework in its implementation, what are the consequences for an integrator?
• An integrator is using an existing framework, what happens if the Fluid component is using the same or different framework?
• In the case of the same framework, the component may be using a custom build or custom framework styles (over-ridden in css file) - what happens in this framework-framework interaction?

To explore answers to these questions, the following 4 use cases are possible:

1. Integrator is not using any framework but chooses to use our component.
2. Integrator adopts and uses the framework used by our component.
3. Integrator is using the same framework as our component, but with different customizations (essentially two versions of the same framework exists on the same page).
4. Integrator is using a different framework than the one used by our component.

To attempt to figure out the consequences of use cases 3 and 4, a custom version of Foundation (linked below) was created that is scoped to a unique mock Infusion component with the classname called ".inf-foundation" . The idea is to mimic the scenario where our component, contained in an element with the classname "inf-infusion", is being added to an existing application one with Bootstrap, and another with Foundationon the container. 

• Customized Foundation: Namespaced to .inf-foundation, headings pink: app-pink.css (customized Foundation with pink header text colour)
• Customized Foundation: Namespaced to .inf-foundation, headings blue: app-blue.css (customized Foundation with blue header text colour)

Findings: REM units and Root

Issue: REM sizes may not look proper when adding styles with REM units to a document where the root element has existing font-size specified. 

Description:

It is possible that the document in which an Infusion component is being added to already have a root font-size specified. In which case any REM sizes used in the Infusion component will size itself relative to that existing root font-size. If the font-size is not an expected value, the Infusion component may not look as expected.

Example:

Bootstrap specifies font-size: 62.5% to the HTML element, and a font-size: 14px to the Body element. Adding an Infusion component (which is using Foundation) with a font-size: 1rem to this document would have the Infusion component appear smaller since 1rem is relative to the 62.5% font-size value on the HTML element.

Findings: Mixing Frameworks within the same scope