RPG CSS

A small css framework that can be combined with your existing stylesheet. All of the component classes start with "rpg-".

Components

.rpg-box

A simple container for content.

.rpg-title-box

A container that centers text, and has a flat background with reduced opacity.

.rpg-progress

A container for one or multiple .rpg-progress-bar elements.

.rpg-progress.mini

.rpg-progress-bar

Use inside of the .rpg-progress element.

.rpg-progress-bar.is-charged

.rpg-nav .rpg-nav-item .rpg-nav-a

A nestable vertical nav with hover and focus states. Using the .is-active class on an .rpg-nav-item styles the .rpg-nav-a within.

• Party
• Equip
• Items
  • potion
  • power up
  • revive
• Special
• Save

Controls

Basic controls for user input.

.rpg-textbox

select option

.rpg-toggle

The .rpg-toggle display is set to 'inline-flex'. To have them each start on a new line use 'display: flex'.

radio radio radio checkbox checkbox checkbox

.rpg-button

button button button button wide

Utilities

Simple color utilities to change color of text.

.rpg-c-dark

Lorem ipsum dolor.

.rpg-c-accent

Lorem ipsum dolor.

Themes

Themes set the background-color and background-image for the element they're used on.

.rpg-t-hp

.rpg-t-mp

Check it out on github!