PoGO-Awesome is similar to Font-Awesome. With this CSS library you can easily show Pokémons or Pokémons shadows.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css First version Jul 29, 2016
html
img first commit Jul 28, 2016
scss First version Jul 29, 2016
.gitignore Ignore IDE files Jul 29, 2016
LICENSE
README.md README.md update Jul 29, 2016

README.md

PoGO-Awesome

PoGO-Awesome is similar to Font-Awesome. With this CSS library you can easily show Pokémons or Pokémons shadows.

License

You can use this library for non-comercial projects. Because the images in this library are licensed under a trademark. You can find the following information about copyright en term of use here below:

How-to use

Default

.pogo is required to make use of PoGO-Awesome.

Example:

<div class="pogo pokemon-1"></div>

List of all Pokémons

.pokemon-* replace * with the number of the pokémon. Notice: At this moment the library shown here only contains GEN-1 Pokémons (from #1 up to #151), which is equal to the Pokémon Go game.

Example:

<div class="pogo pokemon-1"></div>
<div class="pogo pokemon-2"></div>
<div class="pogo pokemon-3"></div>
<div class="pogo pokemon-4"></div>
...

Sizes

PoGO-Awesome has predefined sizes for displaying Pokémon.

List of available sizes:

  • .pogo-xs, 16x16px
  • .pogo-s, 32x32px
  • .pogo-m, 64x64px (default size)
  • .pogo-l, 128x128px
  • .pogo-xl, 256x256px
  • .pogo-xxl, 512x512px

Example:

  • <div class="pogo pokemon-103 pogo-xs"></div>
  • <div class="pogo pokemon-103 pogo-xxl"></div>

Shadow/Mask (only webkit browsers)

Add the class .mask or .shadow to the element to get the shadow of the pokemon.

Example:

  • <div class="pogo pokemon-123 mask"></div>
  • <div class="pogo pokemon-145 shadow"></div>

Examples

<div class="pogo pokemon-53 pogo-l mask"></div> // Pokémon #53 (Persian), bigger than normal size, mask/shadow
<div class="pogo pokemon-33 pogo-s"></div> // Pokémon #33 (Nidorino), smaller than normal size, shown normally
<div class="pogo pokemon-67"></div> // Pokémon #67 (Machoke), normal size, shown normally