You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 49
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.0 | Foundation 4 | Pure 0.3.0 | YAML 4 | Inuit 5 |
---|
Navigation Lists | | | | | |
Tabs |  | Implemented using Sections |  |  | |
Pills |  | | | | |
Vertical lists |  | Implemented using Sections |  |  | |
Dropdowns |  | 
|  | | |
Forms: Right aligned labels |  |  |  |  | |
Anchor Buttons | No ARIA role |  |  |  | |
Normalize |  |  |  | see base.css | |
Clearfix |  | need to add it yourself
| |  | |
Progressive Enhancement | | uses custom modernizr
| | | |
Fixed height / Grid item layouts |  |  | |  | |
Progress Bars | No WAI-ARIA markup | No WAI-ARIA markup |  |  | |
Theming | Bootstrap Theme Roller - bootstrap only supports 1 theme. Use Javascript to switch stylesheets.
- the theme roller lacks finer font colour adjustments (i.e. for buttons, table headers, disabled form fields)
| | 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 unit | px | | | em | |
Environment | LESS | Sass | Straight CSS? | Sass | Sass |
Max Package Size* | 471,199 bytes | 1,028,053 bytes | 226,559 bytes | 1,196,192 bytes | |
License | Apache License v2.0 | MIT Open Source | BSD License | CC Attribution 2.0 | Apache License 2.0 |
Documentation | Friendly and thorough | Technical and thorough | Minimal, but complete. | Technical and thorough | Very minimal documentation. "There are no official docs for inuit.css because the code is the documentation. " - source |
Community / Adoption | Active and widely adopted | Active and widely adopted |  | Active and widely adopted |  |
IE | | | | | |
6 | Unknown | basic experience, not broken. | Assume compatible due to Normalize.css |  |  |
7 | basic experience, not broken. | basic experience, not broken. | | |  |
8 | basic experience, not broken. | not supported | | |  |
* 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;
}
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