Skip to content
master
Switch branches/tags
Code
This branch is 17 commits ahead, 16 commits behind mobomo/stately:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

GENERAL DISCLAIMER

The original Stately is copyrighted by Intridea and you can find the original here » Stately

StatelyBrazil

StatelyBrazil is the Brazilian version [copied and adapted] of Stately. StatelyBrazil makes it easier to create maps for data visualization of Brazil using only HTML & CSS. Each state can be styled independently with CSS for making simple visualizations. And since it's a font, it scales whithout losing definition.

Files

statelybrazil/original-map.svg      - Original SVG map used to create the font
statelybrazil/statelybrazil.svg     - The SVG font file
statelybrazil/statelybrazil.ttf     - TrueType font file - converted from the SVG using [FreeFontConverter](http://www.freefontconverter.com/index.php)
statelybrazil/assets/font           - Folder containing the @font-face ready files - exported using [FontSquirrel @font-face generator](http://www.fontsquirrel.com/fontface/generator)
statelybrazil/assets/sass           - Folder containing basic SASS files, including both StatelyBrazil setup and demo
statelybrazil/assets/css            - Folder containing compiled CSS files
statelybrazil/statelybrazil.html    - Basic Demo
The original Stately files were kept in for reference.

How it Works?

StatelyBrazil is a symbol font were the letters are formed by the shapes of the states of Brazil. Like it's American counterpart, each letter corresponds to a state, in alphabetical order by the state acronym.

Reference of States

AC · A · Acre
AL · B · Alagoas
AP · C · Amapá
AM · D · Amazonas
BA · E · Bahia
CE · F · Ceará
DF · G · Distrito Federal
ES · H · Espírito Santo
GO · I · Goiás
MA · J · Maranhão
MT · K · Mato Grosso
MS · L · Mato Grosso do Sul
MG · M · Minas Gerais
PA · N · Pará
PB · O · Paraíba
PR · P · Paraná
PE · Q · Pernambuco
PI · R · Piauí
RJ · S · Rio de Janeiro
RN · T · Rio Grande do Norte
RS · U · Rio Grande do Sul
RO · V · Rondônia
RR · W · Roraima
SC · X · Santa Catarina
SP · Y · São Paulo
SE · Z · Sergipe
TO · a · Tocantins

Basic Use Case

  1. Download StatelyBrazil to your computer.
  2. Copy the statelybrazil/assets/ and statelybrazil/assets/ to your project public folder.
  3. Add the statelybrazil.css to the head of your document. <link rel="stylesheet" href="assets/css/statelybrasil.css">

Then add this markup to the page:

<ul class="statelybrazil"> 
  <li data-state-acronym="AC" data-state-name="Acre"                 class="statelybrazil-state-ac statelybrazil-state">A</li>
  <li data-state-acronym="AL" data-state-name="Alagoas"              class="statelybrazil-state-al statelybrazil-state">B</li>
  <li data-state-acronym="AP" data-state-name="Amapá"                class="statelybrazil-state-ap statelybrazil-state">C</li>
  <li data-state-acronym="AM" data-state-name="Amazonas"             class="statelybrazil-state-am statelybrazil-state">D</li>
  <li data-state-acronym="BA" data-state-name="Bahia"                class="statelybrazil-state-ba statelybrazil-state">E</li>
  <li data-state-acronym="CE" data-state-name="Ceará"                class="statelybrazil-state-ce statelybrazil-state">F</li>
  <li data-state-acronym="DF" data-state-name="Distrito Federal"     class="statelybrazil-state-df statelybrazil-state">G</li>
  <li data-state-acronym="ES" data-state-name="Espírito Santo"       class="statelybrazil-state-es statelybrazil-state">H</li>
  <li data-state-acronym="GO" data-state-name="Goiás"                class="statelybrazil-state-go statelybrazil-state">I</li>
  <li data-state-acronym="MA" data-state-name="Maranhão"             class="statelybrazil-state-ma statelybrazil-state">J</li>
  <li data-state-acronym="MT" data-state-name="Mato Grosso"          class="statelybrazil-state-mt statelybrazil-state">K</li>
  <li data-state-acronym="MS" data-state-name="Mato Grosso do Sul"   class="statelybrazil-state-ms statelybrazil-state">L</li>
  <li data-state-acronym="MG" data-state-name="Minas Gerais"         class="statelybrazil-state-mg statelybrazil-state">M</li>
  <li data-state-acronym="PA" data-state-name="Pará"                 class="statelybrazil-state-pa statelybrazil-state">N</li>
  <li data-state-acronym="PB" data-state-name="Paraíba"              class="statelybrazil-state-pb statelybrazil-state">O</li>
  <li data-state-acronym="PR" data-state-name="Paraná"               class="statelybrazil-state-pr statelybrazil-state">P</li>
  <li data-state-acronym="PE" data-state-name="Pernambuco"           class="statelybrazil-state-pe statelybrazil-state">Q</li>
  <li data-state-acronym="PI" data-state-name="Piauí"                class="statelybrazil-state-pi statelybrazil-state">R</li>
  <li data-state-acronym="RJ" data-state-name="Rio de Janeiro"       class="statelybrazil-state-rj statelybrazil-state">S</li>
  <li data-state-acronym="RN" data-state-name="Rio Grande do Norte"  class="statelybrazil-state-rn statelybrazil-state">T</li>
  <li data-state-acronym="RS" data-state-name="Rio Grande do Sul"    class="statelybrazil-state-rs statelybrazil-state">U</li>
  <li data-state-acronym="RO" data-state-name="Rondônia"             class="statelybrazil-state-ro statelybrazil-state">V</li>
  <li data-state-acronym="RR" data-state-name="Roraima"              class="statelybrazil-state-rr statelybrazil-state">W</li>
  <li data-state-acronym="SC" data-state-name="Santa Catarina"       class="statelybrazil-state-sc statelybrazil-state">X</li>
  <li data-state-acronym="SP" data-state-name="São Paulo"            class="statelybrazil-state-sp statelybrazil-state">Y</li>
  <li data-state-acronym="SE" data-state-name="Sergipe"              class="statelybrazil-state-se statelybrazil-state">Z</li>
  <li data-state-acronym="TO" data-state-name="Tocantins"            class="statelybrazil-state-to statelybrazil-state">a</li>
</ul>

Set the size and base map color in your CSS:

.statelybrazil {
    width: 230px;     // width and font size must match 
    font-size: 300px; // width and font size must match 
    color: #808080;
}

Style Individual State:

.statelybrazil .statelybrazil-state-ac { 
    color: #F00; // Yes, Acre exists!
}

Live Example

Stately Microsite

Stately Brazil 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

StatelyBrazil project by:

Original Stately project created by Ben Markowitz at Intridea:

License

MIT License. See LICENSE for details.

To Do

  • State acronyms in ligatures
  • One letter for the whole map of Brazil

About

StatelyBrazil is the Brazilian version of Intridea's homonymous font.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages