View Source

Features that we want:

Theme generation using preprocessor
UIO interactions with frameworks (features, positive/negative interactions, architecture)
Can we use a framework to remove our !important injection
responsive layouts

themes easier to generate

UIO features such as text size and font styles

resets
media queries should use EM's
ease of customization
ease of namespacing Framework classnames

Questions:

What if a Fluid component is using a particular framework, what are the consequences for an integrator? What happens if they are using an existing (different or same) framework? In the case of the same framework, we may have made some customizations - what happens in this framework-framework interaction?

Nice to have:

tooltips

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

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

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

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

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


Fonts:
.fl-font-uio-arial
.fl-font-prefsEditor-times
.fl-font-prefsEditor-comic-sans
.fl-font-prefsEditor-arial
.fl-font-prefsEditor-verdana

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