• 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

StatelyBrazil

StatelyBrazil is the Brazilian version of Intridea's 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 and, since it's a font, it scales whithout losing definition.

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.

Letter to State Reference List
ACAAcre
ALBAlagoas
APCAmapá
AMDAmazonas
BAEBahia
CEFCeará
DFGDistrito Federal
ESHEspírito Santo
GOIGoiás
MAJMaranhão
MTKMato Grosso
MSLMato Grosso do Sul
MGMMinas Gerais
PANPará
PBOParaíba
PRPParaná
PEQPernambuco
PIRPiauí
RJSRio de Janeiro
RNTRio Grande do Norte
RSURio Grande do Sul
ROVRondônia
RRWRoraima
SCXSanta Catarina
SPYSão Paulo
SEZSergipe
TOaTocantins
Basic Usage

  1. Download StatelyBrazil

    Grab the latest code from GitHub.

  2. Copy the files

    Copy the CSS and FONT assets folder from statelybrazil/assets/ and paste on your project's public folder.

  3. Add the StatelyBrazil to your project

    Add statelybrazil.css to the <head> of your document.

    <link rel="stylesheet" href="css/statelybrazil.css">

  4. Required Markup

    Add the code below to your HTML.

    
<ul class="statelybrazil example">
    
  <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>

  5. Voilà!

    You should have a map on your screen.