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:
Using a framework for styling purposes in an Infusion component is not recommended because of the lack of class name spacing. Without a good way to namespace Infusion's use of a framework, there is a likelihood that Infusion's choice framework may collide with integrator's existing styling causing undesired results. In order to ensure that Infusion components play nicely with the integrator's application regardless of their styling, Infusion components will use their own default styling following the recommended classname convention to reduce the occurrence of collisions.
CSS frameworks are fine to be used within the context of demos, websites, and other integration scenarios.
We will re-evaluate the use of CSS frameworks for Infusion components if a good method for name spacing becomes available.
In deciding which framework to recommend for the Fluid project, many criteria were considered including: documentation, community support, accessibility, and scalability.
After researching and comparing 6 different CSS frameworks, Zurb Foundation is the recommended framework for the following reasons:
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.