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

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.