CSS Framework Exploration (Post-FSS Planning)

Possible Technologies

We might also want to look at normalize.css as a replacement for our base and reset files.

Bootstrap uses normalize.css.
Foundation has a block grid which creates a grid from a <ul>. Bootstrap does not appear have a comparable feature (although one can be created).

This criteria is based on the FSS Cheat Sheet.

layout

Containers:
- fixed-width containers: 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000px
- relative width containers: auto, flex[1-99]
Columns:
- equal-width columns: 2 / 3 / 4 / 5 column layouts.
- fixed-width columns: 100, 150, 200, 250, 300
- flexible columns: flexible-width column to left or right of a fixed-width column
Tabs:
- Turn UL and LI into tabs
- Align: left, center, right
- Active tab styling
Vertical Menu:
- Turn UL of anchors into a vertical navigation menu
- 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
- push / force element onto its own line
linearization of content

images

forms and controls

buttons:
- Apply button styling to an element
- alignment: left, right
control and label alignment: left, center, right
scrollbars:
- clearfix to remove scrollbars from appearing when padding is used with 100% width elements.

components

widgets
- movable containers that emcompass elements that collectively create a "widget" (i.e. a calendar or search field).
- 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

theming

fonts