Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Evaluation Criteria

  • Covers FSS functionality theming(see below)
  • CSS Reset
  • Responsive layouts

FSS Criteria

  • layout
    • Containers:
      • fixed-width containers: 100 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000px
      • relative width containers: auto auto, flex[1-99]
    • Columns:
      • equal-width columns: 2 / 3 / 4 / 5 column layouts.
      • fixed-width columns: 100 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
    • icons:
      • force an element to 16x16 pixels and hides descriptive text.
  • forms and controls
    • buttons:
      • Apply button styling to an element
      • alignment: left, right
    • control and label alignment: left, center, right
      text sizing
    • 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.
  • CSS Reset
  • Responsive layouts
    • 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