Page Comparison

Recommendation Summary

After researching and using various CSS frameworksAt this time, it is recommended that by default Fluid Infusion components will not use a CSS framework out of the box. The motivation for this is to ensure Infusion components play nicely in whatever application it is used - an integrator may choose to add their own CSS framework to Infusion components if they wish.

Using a CSS Framework within an Infusion component

• CSS frameworks may lack proper name spacing which creates the possibility of class name collisions that can cause styling problems. Therefore Infusion by default will not use a framework out of the box, but a framework can be added by the integrator if they choose.
• If an integrator chooses to add a CSS framework to a Infusion component, we recommend using Zurb Foundation for reasons stated later in this document.
  
• Because Infusion components will not use a CSS framework by default, component creators will need to create good default styles and leave it to the integrator to customize with their own CSS framework if they choose to.

Using a CSS Framework for a demo, website, etc.

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

Using a CSS Framework for contrast themes

• At this time it is difficult to create contrast themes for CSS frameworks despite the availability of custom builders. Custom builders may not be an appropriate tool as they do not cover all possible styling rules we want to affect.
• Creating a theme manually is non-trivial (lots of values to adapt)
• Themes would have to be tested with each major and minor framework release to ensure compatibility. This adds a maintenance burden.

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

CSS frameworks may lack proper name spacing which creates the possibility of class name collisions that can cause styling problems. Therefore Infusion by default will not use a framework out of the box, but a framework can be added by the integrator if they choose. 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.

• Also see: Infusion Class Name Conventions

CSS frameworks are also 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

• The Metadata component for the Floe project has two major pieces: the component, and the demo.
  • See the project source code here: https://github.com/fluid-project/metadata
  • See the project designs here: FLOE Metadata Authoring Design
• The metadata component is styled using a "good default" style which is intended to be usable in most applications. The metadata component itself does not use a CSS framework.
  
  • See the component's styling here: https://github.com/fluid-project/metadata/blob/master/src/css/style.css
• The metadata demo itself uses Foundation as a CSS framework as it is an integration scenario.
  
  • See the demo's styling here: https://github.com/fluid-project/metadata/tree/master/demos/css
• If both the metadata component and the metadata demo used the same CSS framework, the styling of the demo would have collided with the styling of the component since the styles would have shared the same namespace and scope. Fixing this issue would have involved adding many styling overrides to restore the Metadata component to its original state.

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.

• Also see: CSS Framework Research Notes

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.