mobomo / stately Goto Github PK

License: MIT License

CSS 100.00%

stately's Introduction

#Stately Stately is a symbol font that makes is easy to create a map of the United States using only HTML and CSS. Each state can be styled independently with CSS for making simple visualizations. And since it's a font, it scales bigger and smaller while staying sharp as a tack.

##Files map.svg - SVG map used to create the font assets\font - Folder containing the web-font files assets\sass - Folder containing basic Sass files, including both Stately setup and stately.html demo customizations assets\css - Folder containing compiled CSS files stately.html - Basic Demo stately.svg - SVG font file stately.ttf - TrueType font file

##What is Stately? Each state is a glyph within the font. Each state is positioned and sized relative to the the rest of the states, so that when each character is stacked on top of one another, it creates a full map. The pertinent characters are uppercase A-Z and lowercase a-z with lowercase y generating the District of Columbia and lowercase z generating a full US map. For modern browsers ligatures are available and a state's abbreviation is its ligature. For example, "va" generates the glyph of the state of Virginia and 'dc' the District of Columbia. Additionally, the ligature "usa" produces a character of the full US map.

##Basic Use Case You can use stately however you like, but some base Sass/CSS and HTML is included. Download and add the Stately folder to your project which includes the base CSS and the web font files. Grab the stately folder and add it to your project. Then add the stately.css to the head of your document.

<link rel="stylesheet" href="assets/css/stately.css">

Then add this markup to the page:

<ul class="stately"> 
    <li data-state="al" class="al">A</li>
    <li data-state="ak" class="ak">B</li>
    <li data-state="ar" class="ar">C</li>						
    <li data-state="az" class="az">D</li>
    <li data-state="ca" class="ca">E</li>
    <li data-state="co" class="co">F</li>
    <li data-state="ct" class="ct">G</li>
    <li data-state="de" class="de">H</li>
    <li data-state="dc" class="dc">I</li>
    <li data-state="fl" class="fl">J</li>
    <li data-state="ga" class="ga">K</li>
    <li data-state="hi" class="hi">L</li>
    <li data-state="id" class="id">M</li>
    <li data-state="il" class="il">N</li>
    <li data-state="in" class="in">O</li>
    <li data-state="ia" class="ia">P</li>
    <li data-state="ks" class="ks">Q</li>
    <li data-state="ky" class="ky">R</li>
    <li data-state="la" class="la">S</li>
    <li data-state="me" class="me">T</li>
    <li data-state="md" class="md">U</li>
    <li data-state="ma" class="ma">V</li>
    <li data-state="mi" class="mi">W</li>
    <li data-state="mn" class="mn">X</li>
    <li data-state="ms" class="ms">Y</li>
    <li data-state="mo" class="mo">Z</li>
    <li data-state="mt" class="mt">a</li>
    <li data-state="ne" class="ne">b</li>
    <li data-state="nv" class="nv">c</li>
    <li data-state="nh" class="nh">d</li>
    <li data-state="nj" class="nj">e</li>
    <li data-state="nm" class="nm">f</li>
    <li data-state="ny" class="ny">g</li>
    <li data-state="nc" class="nc">h</li>
    <li data-state="nd" class="nd">i</li>
    <li data-state="oh" class="oh">j</li>			
    <li data-state="ok" class="ok">k</li>
    <li data-state="or" class="or">l</li>
    <li data-state="pa" class="pa">m</li>
    <li data-state="ri" class="ri">n</li>
    <li data-state="sc" class="sc">o</li>
    <li data-state="sd" class="sd">p</li>
    <li data-state="tn" class="tn">q</li>
    <li data-state="tx" class="tx">r</li>
    <li data-state="ut" class="ut">s</li>
    <li data-state="va" class="va">t</li>
    <li data-state="vt" class="vt">u</li>			
    <li data-state="wa" class="wa">v</li>
    <li data-state="wv" class="wv">w</li>
    <li data-state="wi" class="wi">x</li>
    <li data-state="wy" class="wy">y</li>
</ul>

Set the size and base map color in your CSS:

.stately {
    width: 300px;     /* width and font size must match */
    font-size: 300px; /*width and font size must match */
    color: #f0f0f0;
}

Style Individual State:

.stately .va,
.stately .md,
.stately .dc { 
   color: #FF0000;
}

If you are not using Sass for your project, you can use and edit the compiled CSS files. The included files have been compiled using the expanded output style for readability.

##Live Example

Stately Microsite

##Resources

Free Online Font Converter - For converting SVG to TTF
Font Squirrel - For converting TTF to web fonts (make sure you check 'no subsetting')
Intridea Blog: How to Make Your Own Symbol Font - A good starting place ##Credits

Created by Ben Markowitz at Intridea.

Ben Markowitz
twitter
website

Intridea
website

##License

MIT License. See LICENSE for details.

##Copyright

stately's People

Stargazers

Watchers

Forkers

dmackerman vhagerty jeremyjbowers zherring derekgaw bjacquemet mrjustinjryan gijs levelsetsolutions adambertram esundahl saleiva teroneward guyclarcom gitlisted carter0327 paulmorel geniusbydesign jackie obra germanny resistorsoftware dataviz briancfeeney pwwilson deepfryed miamk landsurveyorsunited deegrayve anandgeetey puntofisso joelfoy districtem dcburke ejang smb122 budelman orenfalkowitz rsperberg nmlaspenson jmccloud radiodario rlehnhof mariev fxstein ninor tcg cyrke conrad-white nvdnkpr wrstscrnnm6 dancranmer darrencauthon masseym aberjame apereeprishsq cjlaughlin dezzie rouselos tamcao mango314 joshuapekera willhlaw ammonvictor sunforged bjmcdonald jpatsos phpmypython trungngo-agilityio kymtgt nyampire sunacha arjunkt sasagichuki newgovus aaronholla melmendo michquig dardevelin jasonmassengale ryanhcs ks--ks cathalmurray modulexcite zeke lpatti10 pgmy deyugo vszontagh danmv gwright eatarandom jonosprings imraazrally alexmahan pk-codebox-evo mikehathaway ketchumdigital poursafe akrion

stately's Issues

Any interest in doing a Worldly?

I like stately. Any interest in doing a worldly giving countries instead of states?

Reset State Positions

How would one reset the positions? For instance if we wanted to use a tri-state area map or a singular state?

Add Stately to Bower

Hey, I use and love Stately. I think it would be awesome if it could be added as a Bower package so it can be managed with all the other project dependencies. Any chance of this happening?

Error in readme example

Howdy -- I love this font and idea, and just started playing around with it! One issue, though: the example in the readme has an error, in that it uses ids for all the <li> items, but then the example CSS uses the title-based selector (.stately li[title="va"]) to style the various states with a new color (rather than an ID-based selector, e.g., ".stately li#va").

Thanks for the awesome font and idea!

Make each state clickable and give an hover effect

Do you have any idea, if a feature of make clickable with hover effect each state could be add in the future with this logic.

Thanks for the efforts in this project.

SVG is invalid - some tags end with "d=".

Some of the <glyph> tags in the SVG are incomplete - they're written like <glyph d= and just end there. Obviously, a string is needed for the attribute value, and a closing > character.

Remove the tilt to Alaska's image.

The image of Alaska seems too haphazardly placed on the map, detracting from the image of the USA as a whole. A google image search of "map of USA" will normally show Alaska's long upper eastern border to be straight north-south (up-down), not turned 20 degrees counter-clockwise. (At any rate, on a globe it would really be turned 20 degrees clockwise.)

East Coast truncated on Mobile Chrome in Portrait Mode

As shown in this screenshot, the East Coast of the USA is truncated in Mobile Chrome version 32 in Portrait Mode. Landscape Mode is fine.

Thanks!

Make an alternative lighter/mobile version

My Samsung Galaxy SIII can't handle it.

What would it take for me to make something like this for California counties?

Interactive/clickable version

Since each character is stacked on top of each other, there is currently no easy way to click on each <li> and do anything with the data that builds it. My use case is to tint the color based on a set of population density data.

Ben mentioned on Twitter recently that an interactive version was coming soon.

I don't see any recent commits here, but was hoping to open up the discussion so if there was any way to help, I could try to contribute!

Or if anyone has any suggestions on how I could go about implementing this on my own, let me know!

Clarify which browsers can use the ligatures rather than arbitrary letters.

In your documentation, you say that in "modern browsers" ligatures are available, rather than having to use arbitrary characters. Which browsers are those?

If the set of modern browsers is sufficiently large, please update the suggested markup to use the ligatures instead, perhaps with a note that one can also use single letters to support legacy browsers.

use Bootstrap 2.3

Bootstrap 2.3 was released.

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Microsite has some sort of memory leak or performance issue

If the microsite is left open, it starts taking up a significant amount of processing power.

Font loading problem with Firefox

Hi, the attached HTML page, which externally links to http://intridea.github.io/stately/stately/stately.css, renders fine in Chrome but not in Firefox (in the latter, the fonts aren't loading, just resulting in big letters appearing instead.) This is a possible solution: http://stackoverflow.com/a/11547159.

It would be good if http://intridea.github.io/stately/stately/stately.css in the gh-pages branch can be tweaked so it will work with Firefox remotely. Even though we shouldn't rely on this CSS page for production use, it's helpful for prototyping and in learning how to configure our own stately.css so it works with all browsers.

Here is the HTML file: https://gist.github.com/gmazza/5710892

Added Puerto Rico

I recently worked on a project that included Puerto Rico in it's dataset. I was able to add it to the set myself, but thought that perhaps it would be a helpful consideration to include it in the future.

I suppose there are plenty of other united states incorporated territories that could be considered for integration but seems that Puerto Rico has the largest population.

Thanks so much!

U.S. Maps not rendering properly with Firefox and Konqueror

Hi using Firefox 21 with Ubuntu Linux 12.04 the maps on the home page (http://intridea.github.io/stately/) are not appearing properly, with Maine and Washington State's northern halves getting truncated. (I'm not seeing this problem with Google Chrome, everything is fine with it.) Also, the minor web browser Konqueror cannot display the maps at all, I don't know how much of a concern that is though. The attached picture shows Konqueror on the left and Firefox on the right.