Fluid Project has adopted the following recommendation for using CSS Frameworks:
|Reccomendation||Application: Infusion Components||Application: Integration|
|Use CSS framework||No||Yes|
|Use own / default styles||Yes||Yes*|
|Recommended framework||Zurb Foundation|
|Use CSS framework with contrast themes||No||Maybe*|
*see notes below
For Fluid Infusion Components:
For websites, demos, etc.
Recommended CSS framework:
CSS framework for components
Other interesting notes:
|Feature / Desired application||Bootstrap||Foundation|
|Units in EMs|
Current release (v3) uses pixels and not EMs. However, v4 (unreleased) will support EMs. See Mark Otto's January 9th response in this thread on Github.
|Foundation 5 uses REM units throughout. The exception being media queries which use EM units.|
|Ease of using default styles in a heavily customized application|
|Use of !important|
|Namespacing framework classnames|
UIO Theme generation
|Possible new Learner Prefs transformations with CSS Framework|
|Example implementation of Fluidproject.org design||https://github.com/acheetham/fluidproject.org/tree/FLUID-5261||https://github.com/jhung/fluidproject.org/tree/FLUID-5262|
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.
This issue would occur if using Foundation in a Infusion component. To avoid this problem, Infusion's use of CSS framework should have a name space.
If the integrator wants to customize an Infusion component using their own framework, style collisions may be unavoidable due to the use of generic classnames (like "row") or conflicting styles on HTML level elements (like "h1"). Therefore if Infusion's uses a CSS framework, it should be properly name spaced to ensure it doesn't get in the way of an integrator's customizations.
At this time, name spacing a CSS framework is not feasible. The common approach is to use a post processor (like Python) to add name space information, but this approach is fragile since new versions of the CSS framework may break the script.
|On February 26, 2014, there was a Fluid community workshop which explored the scenario where an integrator tried adding Bootstrap to a page with Foundation, and vice versa. The following outlines the goals. The outcomes from this workshop helped generate knowledge which went into the research contained in this document.|
There are currently some unresolved user questions:
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.