Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


Fluid Project is evaluating CSS Frameworks as a possible tool:


After a research and evaluation period (see: CSS Framework Research Notes), Foundation and Bootstrap have emerged to be the front runners. This attempts to document in detail the requirements of the framework to be used.



  • (error) Do not use a CSS framework for components. For more details see "CSS framework for components" below.
  • (tick) Recommend the use of CSS framework for websites, demos, and other integration situations
  • (tick) Foundation is the recommended CSS framework primarily because:
    • it uses REMs as units instead of PX.
    • has a more usable grid system - it's fluid width and has a cleaner structure which makes integration and customization easier.
    • it is light weight.


  • Common CSS framework features (such as navigation bars, link buttons, progress bars, breadcrumbs) can lead to some new Learner Preferences transformations. Also see "Possible new Learner Prefs transformations with CSS Framework" in the Criteria Evaluation table in the next section. 
    • It is conceivable that Learner Preferences need not adopt a CSS framework, but instead rely on the integrator to supply an adapter that links Learner Preferences to specific CSS classes. 
    • For example, Learner Prefs has a new feature which transforms navigation bars into vertical lists. The integrator writes an adapter that tells Learner Prefs which classes in their website correspond to navigation bars.

Criteria Evaluation


Feature / Desired applicationBootstrapFoundation
Responsive layouts
  • Bootstrap uses fixed width containers that "snap" across breakpoints
  • Grid layout needs to follow a container-row-column hierarchy. Otherwise 15px paddings / margins don't align properly.
  • Foundation uses fluid width containers that stretch and shrink depending on the size of the client, with relevant breakpoints.
  • Foundation has a row-column hierarchy with paddings on the columns only. Row is only for containment.
Style reset
  • normalize.css is included in default package, but optional whether or not it is used in your markup.
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.

  • Note: EMs will be supported. Unclear if REMs will be used.
  • UIO works well with Bootstrap's pixel units, although EMs are more desirable.
Foundation 5 uses REM units throughout. The exception being media queries which use EM units.
  • REMs are desirable and easier to use for CSS styling than EM because REMs always refer to the root EM and not the parent EM as with EM units.
  • REM units currently do not scale properly in UI Options. See
    serverFluid Project Issue Tracker
Ease of using default styles in a heavily customized application
  • +/-15px margin and padding on container, rows, and columns dictate a hierarchy and usage pattern. Customizing this or deviating from this pattern causes unintentional and unwanted alignment issues which can be hard to correct (involves overriding).
  • This hierarchy is required to ensure good scalable layouts.
  • Working with Foundation within a heavily customized application seemed very straight forward. Some styles needed to be overridden, but that was expected.
  • Foundation button has !important for font weight
Use of !important
  • important used for print media styling, visibility of collapsing navbar, and visible and hidden elements.
  • no use of !important on html elements
  • Important primarily used to position starting and ending Foundation classes such as offsets, start and end of navigation containers, hide/show elements (i.e. "hide-for-large"), and custom components (like Joyride widget).
  • Uses of !important on html elements
    • button: font-weight: normal !important;
    • select: webkit - appearance: none !important;

Namespacing framework classnames
  • Bootstrap uses generic classnames which may cause classname collisions.
  • A work-around is to use LESS or Sass to add a named container. See this as a possible solution:

UIO Theme generation

  • Themes can be created using the online tool but it is not a quick process and error prone:
  • Themes can also be created by modifying the variables.less file
  • There are a lot of variables to configure, experimentation will be needed to determine the effect of each variable and which variables should be modified for a theme.
  • Background colour can not be changed using the online customization tool:
  • Themes can be created by modifying the _settings.scss file
  • There are a lot of variables to configure, experimentation will be needed to determine the effect of each variable and which variables should be modified for a theme.
Possible new Learner Prefs transformations with CSS Framework
  • Bootstrap components can be turned into a Learner Preference.
  • For example:
    • Linearize / stack content by changing the grid layout
    • Navigation bar preferences: make tabs look like pills, make navigation pills stack
    • Pager: size, appearance, spacing
    • Alerts: change the way alerts are positioned or styled (i.e. make them bigger, put them in a floating panel etc.)
    • Hide / show screenreader-only content (elements with "sr-only" class).

  • Like Bootstrap, Foundation features can be turned into Learner Preferences
  • For example:
    • Linearize / stack content by changing grid layout
    • Reposition side navigation
    • Turn sub-nav (frequently used for filtering lists) from horizontal list into a drop-down menu.
    • Change the way link-buttons (links that look like buttons) appear
    • Make progress bars bigger and appear in different colours.
Example implementation of design


Issue: REM sizes may not behave as intended if the root element has existing font-size


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.


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.

Issue: Without proper name spacing, it is difficult to mix two frameworks


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.


Appendix: Use Case Exploration

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.