Versions Compared

Key

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

...

...

  • 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.
      • (tick) Foundation. bootstrap, purecss
      • (tick) In purecss, you can prevent responsive grid pushes at breakpoints by using pure-g class on a container.
    • 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
      • (tick) Bootstrap - can turn a list into pills, tabs
      • (tick) Purecss - horizontal tabs, vertical menus, and drop-downs
    • 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
      • (tick)Bootstrap - can turn a list into pills, tabs, and drop-downs
    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
      • (tick) Foundation
      • (tick) Bootstrap - alignment options for text, form labels. Containers are center aligned by default.
    • push / force element onto its own line
  • linearization of content
    • (tick) Foundation is mobile first - default is single column layout (linearized).

...

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

...

Purecss:

  • very minimal
  • written in SMACSS
  • Purecss is designed to play nice with other frameworks. One use case is to have Purecss as foundation and specific Bootstrap modules.