CSS Framework Exploration (Post-FSS Planning)

Possible Technologies

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

Evaluation Criteria

• Covers FSS Considerations (see below)
• CSS Reset / Normalization
  •  Founation - uses a normalize.css, unknown at this time if it is necolas' normalize or Zurb's own.
  •  Bootstrap uses necolas' normalize.css.
  • Purecss is built on top of Normalize.css.
    
    
• Responsive layouts
  •  Foundation - detects mobile and touch devices, responsive grids. Content is linearized by default - "mobile first".
  •  Bootstrap - responsive images, responsive grid layout, there are these responsive utilities too which define visibility

Summary

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.

	Bootstrap	Foundation	Purecss	YAML
Navigation Lists
Tabs
Pills
Vertical lists
Dropdowns
Forms: Right aligned labels
Anchor Buttons	No ARIA role
Normalize
Clearfix
Progressive Enhancement
Fixed height / Grid item layouts
Progress Bars	No WAI-ARIA markup
Theming	Bootstrap Theme Roller
Accessibility Features	Missing ARIA in key components

Bootstrap:

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

FSS Considerations

The following classes are used by UIO and Exploration Tool:

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

Hypothetical Scenario: Framework as FSS Replacement

  To better understand functionality of a framework, it may be worthwhile to explore how a framework can replicate functionality of FSS (see: FSS Cheat Sheet).

layout

forms and controls

• buttons:
  • Apply button styling to an element
    • Purecss - add pure-button class to anchor element to make it into a button.
  • alignment: left, right
• control and label alignment: left, center, right
  • Foundation using forms and grids
  • Bootstrap,Purecss: right justified labels / horizontal  form, and inline forms

components

• widgets
  • movable containers that emcompass elements that collectively create a "widget" (i.e. a calendar or search field).
    •  Foundation - Foundation has a Panel style which is like a callout.
  • contains: title, options, and content sections.
• progressive enhancement
  • mark elements as default / basic, or enhanced / JavaScript enabled.
    •  Foundation (uses custom modernizr)
• visibility / content hiding
  • 5 modes of hiding:
    • hidden to browsers and ATs
    • hidden to browsers and ATs, but maintaining layout
    • hidden to browsers but available to ATs
    • hide text and replace with image
  clearfix
  
  •  Foundation (need to add it yourself https://github.com/zurb/foundation/issues/2768)
  •  Bootstrap: Micro-clearfix to fix floats within containers. See: http://getbootstrap.com/css/#responsive-utilities\
  • Purecss

theming

• purecss - skinning supported

fonts

• size, spacing between characters
  
  •  Bootstrap - defined via @font-family-base, @font-size-base, and @line-height-base attributes
• font loading: serif, sans, monospace, times, courier, arial, verdana
• alignment: left, right, center
  • Foundation, bootstrap
• colors

Notes

bootstrap:

• emphasis classes for text: warning, error, info, success, muted.
• scrollable pre-formatted blocks
• table formatting classes
• lots of form formatting options - appending buttons to text input, alignment, form states (error, disabled etc.)
• Javascript features like carousel, modals, etc.
• well documented - not technical.

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.

YAML

• Flexible layouts like the other frameworks
• Can specify equal height grids that are backward compatible with IE (except IE7)
• documentation can be technical. Examples can be hard to follow as they often consist of just CSS snippets.
• has clearfix
• Of all the frameworks, YAML is the only one to address accessibility interests:
  • cross-browser implementation of skip links (to navigation and content).
  • different layers of visibility:
    
    1. visually hidden, but accessible
    2. visually hidden but visible to ATs and print
    3. hidden on print, but visible on all other media.