Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 21 Next »

Possible Technologies

Notes

 

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).

 

Evaluation Criteria

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

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

(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

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
  • 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

  • size, spacing between characters
  • font loading: serif, sans, monospace, times, courier, arial, verdana
  • alignment: left, right, center
  • colors
  • No labels