Versions Compared

Key

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

...

.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

forms and controls

  • buttons:
    • Apply button styling to an element
      • (tick) Purecss - add pure-button class to anchor element to make it into a button.
    • alignment: left, right
  • control and label alignment: left, center, right

components

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

theming

fonts

  • size, spacing between characters
    • (tick) 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
  • colors

Notes

bootstrap:

...