https://github.com/mobomo/stately

https://github.com/mobomo/stately

Last synced: 23 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/mobomo/stately
• Owner: mobomo
• License: mit
• Created: 2012-10-31T20:50:44.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2018-08-13T20:05:45.000Z (over 6 years ago)
• Last Synced: 2024-12-11T00:03:16.631Z (30 days ago)
• Language: CSS
• Size: 872 KB
• Stars: 1,103
• Watchers: 73
• Forks: 111
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#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.

```html

```

Then add this markup to the page:

```html

 

    
A

    
B

    
C
						

    
D

    
E

    
F

    
G

    
H

    
I

    
J

    
K

    
L

    
M

    
N

    
O

    
P

    
Q

    
R

    
S

    
T

    
U

    
V

    
W

    
X

    
Y

    
Z

    
a

    
b

    
c

    
d

    
e

    
f

    
g

    
h

    
i

    
j
			

    
k

    
l

    
m

    
n

    
o

    
p

    
q

    
r

    
s

    
t

    
u
			

    
v

    
w

    
x

    
y



```

    

Set the size and base map color in your CSS:


```css

.stately {

    width: 300px;     /* width and font size must match */

    font-size: 300px; /*width and font size must match */

    color: #f0f0f0;

}

```

    

Style Individual State:

```css

.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](http://intridea.github.com/stately/)

##Resources

[Free Online Font Converter](http://www.freefontconverter.com) - For converting SVG to TTF  

[Font Squirrel](http://www.fontsquirrel.com/fontface/generator) - For converting TTF to web fonts (make sure you check 'no subsetting')  

[Intridea Blog: How to Make Your Own Symbol Font](http://www.intridea.com/blog/2012/4/24/symbol-font) - A good starting place

##Credits

Created by Ben Markowitz at Intridea. 

Ben Markowitz  

[twitter](http://www.twitter.com/bpmarkowitz)  

[website](http://www.benmarkowitz.com)  

Intridea  

[website](http://www.intridea.com)  

##License

MIT License. See LICENSE for details.

##Copyright

Copyright (c) 2013 Intridea, Inc.