CSS Framework Research Notes

Frameworks considered

Foundation - http://foundation.zurb.com/
Bootstrap (Twitter) - https://dev.twitter.com/blog/bootstrap-twitter
Pure (Yahoo!) - http://purecss.io/
YAML - http://www.yaml.de/
inuitcss - http://inuitcss.com/ - a object oriented CSS framework, with little design.

Bootstrap and Foundation Comparison

Feature / Desired application	Bootstrap	Foundation
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	uses normalize.css in Bootstrap CSS.	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 Error rendering macro 'jira' : Unable to locate Jira server for this macro. It may be due to Application Link configuration.
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: https://coderwall.com/p/uiwcow	ZURB intends to add namespace support but not clear when that will be. (see https://github.com/zurb/foundation/issues/546) Sass has / plans to add namespace support (http://thechangelog.com/namespace-support-is-being-added-to-sass/)
UIO Theme generation	Themes can be created using the online tool but it is not a quick process and error prone: http://getbootstrap.com/customize/ 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: http://foundation.zurb.com/develop/download.html#customizeFoundation 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 Fluidproject.org design	https://github.com/acheetham/fluidproject.org/tree/FLUID-5261	https://github.com/jhung/fluidproject.org/tree/FLUID-5262

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

Description:

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.

Example:

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.

Conclusion:

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

Description:

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.

Discussion:

it is possible to add a prefix to Bootstrap classnames by using a Python script: https://gist.github.com/macanderson/6128137
here is a discussion about prefixing Foundation classnames: https://github.com/zurb/foundation/issues/546

Conclusion:

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.

There are currently some unresolved user questions:

What if a Fluid component is using a particular framework in its implementation, what are the consequences for an integrator?
An integrator is using an existing framework, what happens if the Fluid component is using the same or different framework?
In the case of the same framework, the component may be using a custom build or custom framework styles (over-ridden in css file) - what happens in this framework-framework interaction?

To explore answers to these questions, the following 4 use cases are possible:

Integrator is not using any framework but chooses to use our component.
Integrator adopts and uses the framework used by our component.
Integrator is using the same framework as our component, but with different customizations (essentially two versions of the same framework exists on the same page).
Integrator is using a different framework than the one used by our component.

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.

Customized Foundation: Namespaced to .inf-foundation, headings pink: app-pink.css (customized Foundation with pink header text colour)
Customized Foundation: Namespaced to .inf-foundation, headings blue: app-blue.css (customized Foundation with blue header text colour)

Evaluation of other CSS Frameworks (older versions)

	Bootstrap 3.0	Foundation 4	Pure 0.3.0	YAML 4	Inuit 5
Navigation Lists
Tabs		Implemented using Sections
Pills
Vertical lists		Implemented using Sections
Dropdowns
Forms: Right aligned labels
Anchor Buttons	No ARIA role
Normalize				see base.css
Clearfix		need to add it yourself
Progressive Enhancement		uses custom modernizr
Fixed height / Grid item layouts
Progress Bars	No WAI-ARIA markup	No WAI-ARIA markup
Theming	Single bootstrap-theme.css file. Use Javascript to switch stylesheets. the theme roller lacks finer font colour adjustments (i.e. for buttons, table headers, disabled form fields) themes can be created by either modifying bootstrap-theme.css, or recompiling bootstrap with modifications to bootstrap mixins.		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 unit	px			em
Environment	LESS	Sass	Straight CSS?	Sass	Sass
Max Package Size*	471,199 bytes	1,028,053 bytes	226,559 bytes	1,196,192 bytes
License	Apache License v2.0	MIT Open Source	BSD License	CC Attribution 2.0	Apache License 2.0
Documentation	Friendly and thorough	Technical and thorough	Minimal, but complete.	Technical and thorough	Very minimal documentation. "There are no official docs for inuit.css because the code is the documentation. " - source
Community / Adoption	Active and widely adopted	Active and widely adopted		Active and widely adopted
IE
6	Unknown	basic experience, not broken.	Assume compatible due to Normalize.css
7	basic experience, not broken.	basic experience, not broken.
8	basic experience, not broken.	not supported

* Un-minified

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

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

.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;
}

LESS

A quick examination of LESS.

LESS will give the ability of some conditional statements which control which CSS is rendered.
Example: If screen is dark, then use light text.
This is useful for our theming as it could replace inverted styles currently used in the preferences editor.

Sass

A quick examination of SASS.

In addition to mixins like in LESS, Sass has if, each, for loops like a proper programming language.