Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 103 Next »


Fluid Project has adopted the following recommendation for using CSS Frameworks:

ReccomendationApplication: Infusion ComponentsApplication: Integration
Use CSS framework(minus) No(tick) Yes
Use own / default styles(tick) Yes(tick) Yes*
Recommended framework Zurb Foundation
Use CSS framework with contrast themes(minus) No(question) Maybe*

*see notes below

For Fluid Infusion Components: 

  • CSS framework is not recommended for Fluid components at this time primarily due to the lack of custom name spacing. Without proper name spacing, there is a chance that there will be classname collisions which will make it difficult to integrate Fluid components.
  • Continue using default styles in Fluid components and leave it to the integrator to customize with their own CSS framework if they choose to.
  • We will not create contrast themes for CSS frameworks. Creating a theme is non-trivial (lots of values to adapt) and s high maintenance (each major or minor release will need to be tested - occurs roughly once a month).

For websites, demos, etc.

  • CSS framework is fine to be used for websites, demos, and other integration / non-component scenarios.

Recommended CSS framework:

  • Zurb Foundation is the recommended CSS framework to be used because of its use of REM sizing throughout.

Future possibilities:

  • There may be an opportunity to add new features to Learner Preferences that can transform CSS framework components (like navigation bars and button links). Further discussion is encouraged.
  • Contrast theme generation using a CSS pre-processor to be investigated. Possible pre-processors include: Less, SASS, and Stylus. This will be a separate discussion.

Appropriate Use of 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.

Example: Metadata component

Choosing a CSS Framework: Why Zurb Foundation?

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:

  • Foundation uses REMs as units which ensures scalability across clients and devices.
  • Foundation's grid system is flexible - it's fluid width and has a cleaner structure which makes integration and customization easier.
  • We typically work in highly customized environments and Foundation is light weight and doesn't get in the way (mostly).

Can I use a different framework?

Yes, you can use any framework you prefer for integration applications if it satisfies the concerns of the Fluid project. In particular, the CSS framework should be:

  • Accessible and scalable
  • Mature and widely supported
  • Open source

Future Considerations

Better name spacing

  • At this time it is very difficult to name space CSS framework classes. Most solutions are a manual process, or a manual process that is automated by a script. This is fragile and requires constant testing with each new framework release.
  • If a CSS framework or tool emerges to support custom name spacing easily, and satisfies our needs (i.e. scalable, accessible, widely supported, etc.) - we should revisit the topic of using a framework for Infusion components.


Add CSS framework support to the Preferences Framework

  • Since CSS frameworks share common features (such as navigation bars, link buttons, progress bars, breadcrumbs), this can lead to some new preferences.
  • 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.)
  • In order to support multiple CSS frameworks, consider using an adapter model where the Preferences framework supports a generic definition and adapters are created to map CSS framework definitions to the framework. i.e. Framework 1 may use divs for breadcrumbs, and Framework 2 may use a list. The adapter would define this configuration so that the framework can use both.



Table of Contents

  • No labels