CSS Framework Exploration (Post-FSS Planning)

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

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