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 37 Next »

 

Possible Technologies

Evaluation Criteria

  • Covers FSS Considerations (see below)
  • CSS Reset / Normalization

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 3.0Foundation 4PurecssYAML

Navigation Lists

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

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

  
Forms: Right aligned labels(tick)(tick)  
Anchor Buttons(tick) No ARIA role(tick)  
Normalize(tick)(question) uses a normalize.css, unknown at this time if necolas' normalize.  
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  
ThemingBootstrap Theme Roller   
Accessibility Features    
EnvironmentLESSSass  
Max Package Size471,199 bytes1,028,053 bytes  
LicenseApache License v2.0MIT Open Source  
DocumentationFriendly and thoroughTechnical and thorough  
IE    
6(question) Unknown(tick) basic experience, not broken.  
7(tick) basic experience, not broken.(tick) basic experience, not broken.  
8(tick) basic experience, not broken.(error) not supported  

1 Implemented using Sections - not Unordered List.
2 Dropdown is a JS plugin that can be attached to almost any content, not just lists. 

 

Bootstrap:

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

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

  • 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

components

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

theming

fonts

  • 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

Notes

bootstrap:

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