Versions Compared

Key

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

...

Evaluation Criteria

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

FSS

...

Considerations

The following classes are used by UIO and Exploration Tool:

Hypothetical Scenario: Framework as FSS Replacement

(warning)  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

  • 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]
    • (warning) This may not be a critical feature anymore since frameworks offer flexible and responsive layouts.
  • 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
    • (question) Foundation - replaced by Foundation's Sections. Traditional tabs possible using Top Bar?
  • Vertical Menu:
    • Turn UL of anchors into a vertical navigation menu
    • Active menu item styling
    • (tick) Foundation
  • Grid item layout:
    • A fixed height (150px) grid of a list (UL) of images, captions, or other content
  • Alignment:
  • linearization of content

...