- 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
- Responsive layouts using grid or column schemes
- Push-pull control
- Special text boxes - alerts, warnings, notes, etc.
| || || || |
|Tabs|| || || || |
|Vertical lists|| || || || |
|Dropdowns|| || || || |
|Forms: Right aligned labels|| || || || |
|Anchor Buttons|| || || || |
|Normalize|| || || || |
|Clearfix|| || || || |
| || || || |
|Fixed height / Grid item layouts|| || || || |
|Theming|| || || || |
|Custom Font Stack|| || || || |
|Modals|| || || |
|Accessibility Features|| || || || |
| || || || || |
The following classes are used by UIO and Exploration Tool:
Links and Text:
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).
- Turn UL and LI into tabs
- Bootstrap - can turn a list into pills, tabs
- Purecss - horizontal tabs, vertical menus, and drop-downs
- Align: left, center, right
- Active tab styling
- Foundation - replaced by Foundation's Sections. Traditional tabs possible using Top Bar?
- Vertical Menu:
Active menu item styling
- Turn UL of anchors into a vertical navigation menu
- Bootstrap - can turn a list into pills, tabs, and drop-downs
- Grid item layout:
- A fixed height (150px) grid of a list (UL) of images, captions, or other content
- align element left, center, or right
- Bootstrap - alignment options for text, form labels. Containers are center aligned by default.
- push / force element onto its own line
- linearization of content
- Foundation is mobile first - default is single column layout (linearized).
- 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
- 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
- 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
- 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
- size, spacing between characters
- Bootstrap - defined via
- font loading: serif, sans, monospace, times, courier, arial, verdana
- alignment: left, right, center
- 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.
- 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.