Grid Map & List Transformation

A demo of how a single HTML source can be represented in different visual modes with CSS.

The visual modes US states list into the following:

  1. Map Mode - A geometric US map ordered by (general) geographic position
    • Uses CSS Grid to position tiles using flex's order property and grid-column for location.
    • Abbreviations are displayed in the tile. Full name is displayed on hover via HTML title.
  2. Tile Mode - A non-geographic tiled version
    • Uses CSS Grid ordered alphabetically in the DOM.
    • Abbreviations are displayed in the tile. Full name is displayed on hover via HTML title.
  3. List Mode - A semantic HTML list of checkbox items
    • Semantic HTML checkbox list, ordered alphabeticlly in the DOM.
    • Full name is displayed in the HTML