- 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:
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 mock Infusion component with the classname ".inf-foundation" on the container.
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.
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.
Bootstrap specifies font-size: 62.5% on 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
Issue: Without proper namespacing of framework classnames, it is difficult to mix two frameworks in the same scope.
If the integrator wants to customize an Infusion component (which is already using a custom Foundation) using their own framework, namespace collisions may be unavoidable. Therefore Infusion's use of a CSS framework should be properly name spaced to ensure it doesn't get in the way of an integrator's customizations.