Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

 

Common Features:

  • Responsive layouts using grid or column schemes
  • Push-pull control
  • Special text boxes and labels - alerts, warnings, notes, wells, pre-formatted boxes etc.

Frameworks considered

...

 Bootstrap 3.0Foundation 4Pure 0.3.0YAML 4Inuit 5

Navigation Lists

     
Tabs(tick)(tick)Implemented using Sections(tick)(tick) 
Pills(tick)    
Vertical lists(tick)(tick) Implemented using Sections(tick)(tick) 
Dropdowns(tick)

(tick)

(tick)  
Forms: Right aligned labels(tick)(tick)(tick)(error) 
Anchor Buttons(tick) No ARIA role(tick)(tick)(tick) 
Normalize(tick)(tick)(tick)(tick) see base.css 
Clearfix(tick)

(error) need to add it yourself

 (tick) 

Progressive Enhancement

 

(tick) uses custom modernizr

   
Fixed height / Grid item layouts(tick)(tick) (tick) 
Progress Bars(tick) No WAI-ARIA markup(tick) No WAI-ARIA markup(minus)(minus) 
Theming

Bootstrap Theme Roller

  • bootstrap only supports 1 theme. Use Javascript to switch stylesheets.
  • the theme roller lacks finer font colour adjustments (i.e. for buttons, table headers, disabled form fields)
 PureCSS Skin Builder  
Accessibility Features

.sr-only class makes element visible to ATs only

.hidden and .show hide or show content.

See below for notes on sr-only class

  
  • skip links class
  • element visibility classes:
    • hidden / visible to ATs and printing
      visible but not while printing

See notes below.

 
Spacing unitpx  em 
EnvironmentLESSSass(question) Straight CSS?SassSass
Max Package Size*471,199 bytes1,028,053 bytes226,559 bytes1,196,192 bytes 
LicenseApache License v2.0MIT Open SourceBSD LicenseCC Attribution 2.0Apache License 2.0
DocumentationFriendly and thoroughTechnical and thoroughMinimal, but complete.Technical and thorough

Very minimal documentation.

"There are no official docs for
inuit.css because the code is the documentation. " - source

Community / AdoptionActive and widely adoptedActive and widely adopted(question)Active and widely adopted(question)
IE     
6(question) Unknown(tick) basic experience, not broken.(question) Assume compatible due to Normalize.css(tick)(error)
7(tick) basic experience, not broken.(tick) basic experience, not broken.  (error)
8(tick) basic experience, not broken.(error) not supported  (tick)

* Un-minified

 

Bootstrap:

  • Navigation lists: can be mixed with pills and dropdowns, dividers / spacers, flexible tabs placement
  • Javascript components: carousels, modals, drop-downs, tabs, scroll-tracker

 

The following is Bootstrap's CSS for .sr-only screen reader visible markup

 

Code Block
languagecss
.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

 

 

 

Foundation:

Purecss:

  • very minimal
  • written in SMACSS
  • Purecss is designed to play nice with other frameworks. One use case is to have Purecss as foundation and specific Bootstrap modules
  • Not "version 1"

YAML

  • YAML accessible text is to position the text off screen so it can get focus, but not visible on the screen.
 
Code Block
.ym-skip, .ym-hideme, .ym-print {
    left: -32768px;
    position: absolute;
    top: -32768px;
}

.ym-skiplinks .ym-skip:focus, .ym-skiplinks .ym-skip:active {
    left: 32768px;
    outline: 0 none;
    position: absolute;
    width: 100%;
}

.ym-skip:focus, .ym-skip:active {
    top: 0;
}

 

FSS Considerations

The following classes are used by UIO and Exploration Tool. The candidate framework should make it easy to create themes or customizations based on these classnames:

Links and Text:
.fl-link-enhanced
.fl-text-larger

...

Theming:
.fl-inverted-color
.fl-theme-uio-bw 
.fl-theme-uio-lgdg
.fl-theme-prefsEditor-[bw/wb/by/yb/lgdg]
.fl-preview-theme.fl-theme-prefsEditor-[bw/wb/by/yb/lgdg]
.fl-theme-prefsEditor-[bw/wb/by/yb/lgdg].fl-inverted-color
.fl-theme-prefsEditor-[wb/bw/wb/by/yb/lgdg] .fl-inverted-color
.fl-preview-theme.fl-theme-prefsEditor-[wb/bw/by/yb/lgdg].fl-inverted-color

Summary and Background

Up to version 1.5, Infusion shipped with a built-in CSS framework called the Fluid Skinning System. When the FSS was first designed, there were few viable production-scale CSS frameworks available to developers. As a community, we felt a need to provide something that had been designed with accessibility and flexibility in mind. Since then, we've experienced a massive shift in the way websites are designed and implemented. Responsive Web Design is now widely practiced, enabling web pages to adapt to different screen sizes and device form factors. CSS preprocessors such as Less and Sass have changed the way style sheets are developed and reused. Mature and widely-used CSS frameworks such as Bootstrap and Foundation are available to help ease the effort of styling responsive layouts, grids, and widgets.

Unfortunately, the Fluid Skinning System hasn't kept pace. As a result, we chose to deprecate it in version 1.5. We recommend that users of Infusion choose from any of the available third-party frameworks based on their own needs and requirements. As of Infusion 2.0, we will remove FSS entirely.

Infusion components currently don't rely on any CSS framework, and we will continue to ensure that they are styled in a way that is unlikely to conflict with popular tools like Bootstrap and Foundation. For the foreseeable future, we don't plan to include any third-party CSS framework with Infusion, nor to require that our users select a specific framework.

Who is this document for?

This document reflects the decision-making process we have undertaken as a community to select a CSS framework for some of our own websites, documentation, and demos. It may also be useful when selecting your own CSS framework to use alongside Infusion.

Recommendation Summary

Fluid Infusion components do not use a CSS framework out of the box. The motivation for this is to ensure Infusion components play nicely in whatever application is used. Integrators may choose to add their own CSS framework to Infusion components if they wish.

Using a CSS Framework within an Infusion component

  • Components shipped as part of the core Infusion package do not use a CSS framework for their styling.
     
  • Some CSS frameworks don't use namespaced or prefixed class names, which creates the possibility of collisions that can cause styling problems. Infusion component styles are always namespaced, which reduces the potential for Infusion to cause conflicts with non-namespaced frameworks. See Infusion Class Name Conventions for more information.
  • Because Infusion components do 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 within Fluid-related demos, websites, etc.

  • A CSS framework is fine to be used for websites, demos, and other integration / non-component scenarios. We recommend Foundation because of its use of REM sizing throughout.

Using a CSS Framework for contrast themes in UI Options and the Preferences Framework

  • 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.

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 a CSS Framework

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 Fluid-related websites and demos, we prefer frameworks that are:

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

Future Considerations

Better namespacing

  • At this time it is very difficult to namespace 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

Table of Contents
excludeTable of Contents