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

Navigation Lists

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

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

Forms: Right aligned labels(tick)(tick)(tick)(error)
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) (tick)
Progress Bars(tick) No WAI-ARIA markup(tick) No WAI-ARIA markup(minus)(minus)
ThemingBootstrap Theme Roller PureCSS Skin Builder 
Accessibility Features   
  • skip links class
  • element visibility classes:
    • hidden, visible to ATs and printing, visible but not while printing
EnvironmentLESSSass(question) Straight CSS?Sass
Max Package Size*471,199 bytes1,028,053 bytes226,559 bytes 
LicenseApache License v2.0MIT Open SourceBSD LicenseCC Attribution 2.0
DocumentationFriendly and thoroughTechnical and thoroughMinimal, but complete.Technical and thorough
Community / AdoptionActive and widely adoptedActive and widely adopted(question)Active and widely adopted
6(question) Unknown(tick) basic experience, not broken.(question) Assume compatible due to Normalize.css(tick)
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