You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 34
Next »
Possible Technologies
Evaluation Criteria
- Covers FSS Considerations (see below)
- CSS Reset / Normalization
Founation - uses a normalize.css, unknown at this time if it is necolas' normalize or Zurb's own.
Bootstrap uses necolas' normalize.css.
Purecss is built on top of Normalize.css.
- Responsive layouts
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:
- 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-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
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
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).
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
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:
- visually hidden, but accessible
- visually hidden but visible to ATs and print
- hidden on print, but visible on all other media.