Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 39 Next »


Possible Technologies


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 3.0Foundation 4Pure 0.3.0YAML

Navigation Lists

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

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

Forms: Right aligned labels(tick)(tick)(tick) 
Anchor Buttons(tick) No ARIA role(tick)(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    
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) 
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



  • 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-theme-prefsEditor-[wb/bw/wb/by/yb/lgdg] .fl-inverted-color




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


  • 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.
  • No labels