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

 

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.

Frameworks considered

 Bootstrap 3.0Foundation 4Pure 0.3.0YAML 4Inuit 5

Navigation Lists

     
Tabs(tick)(tick)Implemented using Sections(tick)(tick) 
Pills(tick)    
Vertical lists(tick)(tick) Implemented using Sections(tick)(tick) 
Dropdowns(tick)

(tick)

(tick)  
Forms: Right aligned labels(tick)(tick)(tick)(error) 
Anchor Buttons(tick) No ARIA role(tick)(tick)(tick) 
Normalize(tick)(tick)(tick)(tick) see base.css 
Clearfix(tick)

(error) need to add it yourself

 (tick) 

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) 
Theming
  • Single bootstrap-theme.css file. Use Javascript to switch stylesheets.
  • the theme roller lacks finer font colour adjustments (i.e. for buttons, table headers, disabled form fields)
  • themes can be created by either modifying bootstrap-theme.css, or recompiling bootstrap with modifications to bootstrap mixins.
 PureCSS Skin Builder  
Accessibility Features

.sr-only class makes element visible to ATs only

.hidden and .show hide or show content.

See below for notes on sr-only class

  
  • skip links class
  • element visibility classes:
    • hidden / visible to ATs and printing
      visible but not while printing

See notes below.

 
Spacing unitpx  em 
EnvironmentLESSSass(question) Straight CSS?SassSass
Max Package Size*471,199 bytes1,028,053 bytes226,559 bytes1,196,192 bytes 
LicenseApache License v2.0MIT Open SourceBSD LicenseCC Attribution 2.0Apache License 2.0
DocumentationFriendly and thoroughTechnical and thoroughMinimal, but complete.Technical and thorough

Very minimal documentation.

"There are no official docs for
inuit.css because the code is the documentation. " - source

Community / AdoptionActive and widely adoptedActive and widely adopted(question)Active and widely adopted(question)
IE     
6(question) Unknown(tick) basic experience, not broken.(question) Assume compatible due to Normalize.css(tick)(error)
7(tick) basic experience, not broken.(tick) basic experience, not broken.  (error)
8(tick) basic experience, not broken.(error) not supported  (tick)

* Un-minified

 

Bootstrap:

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

 

The following is Bootstrap's CSS for .sr-only screen reader visible markup

 

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

 

 

 

Foundation:

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
  • Not "version 1"

YAML

  • YAML accessible text is to position the text off screen so it can get focus, but not visible on the screen.
 
.ym-skip, .ym-hideme, .ym-print {
    left: -32768px;
    position: absolute;
    top: -32768px;
}

.ym-skiplinks .ym-skip:focus, .ym-skiplinks .ym-skip:active {
    left: 32768px;
    outline: 0 none;
    position: absolute;
    width: 100%;
}

.ym-skip:focus, .ym-skip:active {
    top: 0;
}

 

LESS

A quick examination of LESS.

  • LESS will give the ability of some conditional statements which control which CSS is rendered.
  • Example: If screen is dark, then use light text.
  • This is useful for our theming as it could replace inverted styles currently used in the preferences editor.

 

FSS Considerations

The following classes are used by UIO and Exploration Tool. The candidate framework should make it easy to create themes or customizations based on these classnames:

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