Pokemon GameBoy CSS-Framework

This is a demo of a joke CSS-framework.

Frames

Frames can be used to clearly indicate sections or menu's.

Frames can be styled with the primary...
... secondary and danger accents.
Letters will be outlined when an accent is applied.
Use the 'exclude-border' class to not draw the accent under the border.
You can get the frame in it's original (unscaled) size by adding the no-hd class.

Buttons

Buttons are recognizable by their text being uppercase. Hover over buttons to see a selection indicator

You can organize buttons like you would see them in Pokémon, either in a list (start-menu) or in a group of 4.

Start menu style

Battle style

Progress / Health Bar

Like in the game, this progress/health bar changes colour when it's low (by default).

20%
* On Google Chrome the <Progress> element does not support changing color based on the [value] attribute. Apply a .p1 - .p100 class to the progressbar for maximum compatibility.

Helix Fossil

Helix Fossil: Please come to GitHub and help me make this project better!

Go to GitHub Repo

Close this message