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