CSS Framework Exploration (Post-FSS Planning)

Possible Technologies

• Foundation - http://foundation.zurb.com/
• Bootstrap (Twitter) - https://dev.twitter.com/blog/bootstrap-twitter
• Pure (Yahoo!) - http://purecss.io/
• YAML - http://www.yaml.de/
• inuitcss - http://inuitcss.com/

Evaluation Criteria

• 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.
    
    
• Responsive layouts
  •  Foundation - detects mobile and touch devices, responsive grids. Content is linearized by default - "mobile first".
  •  Bootstrap - responsive images, responsive grid layout, there are these responsive utilities too which define visibility

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

  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]
  •  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.
    •  Foundation
  • 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
  •  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
  •  Foundation
• Grid item layout:
  • A fixed height (150px) grid of a list (UL) of images, captions, or other content
    •  Foundation - has a block grid which creates a grid from a <ul>.
• Alignment:
  • align element left, center, or right
    •  Foundation
  • push / force element onto its own line
    •  Foundation
• linearization of content
  •  Foundation is mobile first - default is single column layout (linearized).

images

• icons:
  • 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.

forms and controls

• buttons:
  • Apply button styling to an element
  • alignment: left, right
• control and label alignment: left, center, right
  •  Foundation using forms and grids
  scrollbars:
  • clearfix to remove scrollbars from appearing when padding is used with 100% width elements.
    •  Foundation (need to add it yourself https://github.com/zurb/foundation/issues/2768)
    •  Bootstrap: Micro-clearfix to fix floats within containers. See: http://getbootstrap.com/css/#responsive-utilities

components

• widgets
  • 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
  • mark elements as default / basic, or enhanced / JavaScript enabled.
    •  Foundation (uses custom modernizr)
• 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
  
  •  Bootstrap - defined via @font-family-base, @font-size-base, and @line-height-base attributes
• font loading: serif, sans, monospace, times, courier, arial, verdana
• alignment: left, right, center
  •  Foundation
• colors