Possible Technologies

Summary

Common Features:

 

 Bootstrap 3.0Foundation 4Pure 0.3.0YAML

Navigation Lists

    
Tabs(tick)(tick)Implemented using Sections - not Unordered List.(tick) 
Pills(tick)   
Vertical lists(tick)(tick) Implemented using Sections - not Unordered List.(tick) 
Dropdowns(tick)

(tick) Dropdowns can be attached to almost any content, not just lists. 

(tick) 
Forms: Right aligned labels(tick)(tick)(tick) 
Anchor Buttons(tick) No ARIA role(tick)(tick) 
Normalize(tick)(tick)(tick) 
Clearfix(tick)

(error) need to add it yourself

  

Progressive Enhancement

 

(tick) uses custom modernizr

  
Fixed height / Grid item layouts(tick)(tick)  
Progress Bars(tick) No WAI-ARIA markup(tick) No WAI-ARIA markup(minus) 
ThemingBootstrap Theme Roller PureCSS Skin Builder 
Accessibility Features    
EnvironmentLESSSass  
Max Package Size*471,199 bytes1,028,053 bytes226,559 bytes 
LicenseApache License v2.0MIT Open SourceBSD License 
DocumentationFriendly and thoroughTechnical and thoroughMinimal, but complete. 
Community / AdoptionWidely adoptedWidely adopted(question) 
IE    
6(question) Unknown(tick) basic experience, not broken.(question) Assume compatible due to Normalize.css 
7(tick) basic experience, not broken.(tick) basic experience, not broken.  
8(tick) basic experience, not broken.(error) not supported  

* Un-minified

 

Bootstrap:

Foundation:

 

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

(warning)  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

components

theming

fonts

Notes

bootstrap:

Purecss:

YAML