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 38 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




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


forms and controls

  • buttons:
    • Apply button styling to an element
      • (tick) Purecss - add pure-button class to anchor element to make it into a button.
    • alignment: left, right
  • control and label alignment: left, center, right


  • widgets
    • movable containers that emcompass elements that collectively create a "widget" (i.e. a calendar or search field).
      • (error) 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.
  • 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



  • size, spacing between characters
    • (tick) 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
  • colors




  • 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