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

 

Possible Technologies

Evaluation Criteria

Summary

Common Features:

  • Responsive layouts using grid or column schemes
  • Push-pull control
  • Special text boxes - alerts, warnings, notes, etc.
 BootstrapFoundationPurecssYAML

Navigation Lists

    
Tabs    
Vertical lists    
Dropdowns    
Forms: Right aligned labels    
Anchor Buttons    
Normalize    
Clearfix    

Progressive Enhancement

    
Fixed height / Grid item layouts    
Theming    
Custom Font Stack    
Modals   

 

Accessibility Features    
     

 

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

  • Tabs:
    • Turn UL and LI into tabs
      • (tick) Bootstrap - can turn a list into pills, tabs
      • (tick) Purecss - horizontal tabs, vertical menus, and drop-downs
    • Align: left, center, right
    • Active tab styling
    • (question) Foundation - replaced by Foundation's Sections. Traditional tabs possible using Top Bar?
  • Vertical Menu:
    • Turn UL of anchors into a vertical navigation menu
      • (tick)Bootstrap - can turn a list into pills, tabs, and drop-downs
    Active menu item styling
  • Grid item layout:
    • A fixed height (150px) grid of a list (UL) of images, captions, or other content
  • Alignment:
    • align element left, center, or right
      • (tick) Foundation
      • (tick) Bootstrap - alignment options for text, form labels. Containers are center aligned by default.
    • push / force element onto its own line
  • linearization of content
    • (tick) Foundation is mobile first - default is single column layout (linearized).

images

  • icons:
    • force an element to 16x16 pixels and hides descriptive text.
      • Foundation - you can use the thumbnail class and do some mixins so it does similar to a 16x16 icon.
      • Bootstrap - thumbnail class, also adds formatting for optional captions and interactive elements to thumbnails (i.e. links and buttons)

 

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