search

propublica / stateface

A typeface of U.S. state shapes to use in web apps.
http://propublica.github.com/stateface/
MIT License
360 stars 26 forks source link

State abbreviation-based CSS classes for text replacement #3

Closed paulsmith closed 12 years ago

paulsmith commented 12 years ago

As an alternative to having to remember or lookup the right letter code to type for a state, one could use CSS classes where the class names are derived from the two-letter state USPS abbreviations. It’s also SEO-friendlier because you can write out the name of the state and have it replaced with the StateFace icon.

For example, instead of typing T to get an icon for Maryland:

<span class=".state .state-replace .state-md">Maryland</span>

If replacement is not required, omit .state-replace to have the icon prepended to the text:

<span class=".state .state-md">Maryland</span>

Perhaps since the common case is replacement, the .state-replace could be omitted and replacement would be the default, to be less verbose, and .state-prepend could be introduced for prepending.

delfuego commented 12 years ago

That's a sweet idea, indeed!

thejefflarson commented 12 years ago

Awesome! I merged it in, namespaced it a bit more, and added it to the main docs in cb1a4e1. Just waiting for gh-pages to catch up now...

paulsmith commented 12 years ago

Nice example! Thanks, Jeff, and very cool project, BTW.