RPGUI

CSS & JavaScript lib to create old-school GUI in seconds!



RPGUI is a framework of CSS and JavaScript that creates an awesome RPG-like GUI for HTML5 and Web games.

It requires no dependencies and zero coding, just apply the right CSS classes to your elements and you're good to go!

Want to see more? Read the manual, Or
look at the examples below.







Examples

Below are examples of key elements in RPGUI. Scroll down or choose from the list to view an example:

Containers

This example shows the built-in containers and frames. Containers are just fancy divs used for rpgui elements.

class:
rpgui-container framed

class:
rpgui-container framed-golden

class:
rpgui-container framed-golden-2



class:
rpgui-container framed-grey

Paragraphs & Text Input

This example shows the basic paragraphs and headers in RPGUI.

Header 1

Header 2

Header 3

Header 4

Regular paragraph (p)

Span Link (a)



Buttons

This example shows the basic buttons.

Radio and Check boxes

This example shows radio buttons and check boxes.

Dropdown & Lists

This example shows the dropdown (aka combobox) and the list widgets. These elements are made from simple "select" with "options" and rpgui class.

Dropdown:

List:

Icons

This example shows the built-in icons. These can be easily extended (skeletons not included).









Sliders

This example shows the sliders class, which replaces the "range" input element.



Progress Bars

This example shows the RPGUI progress bar class.

Disabled Elements

All RPGUI elements can be disabled using the "disable" attribute. Here's an example of disabled RPGUI elements.

Text Input





Sliders:

Golden slider:

Icons











Buttons





Radio/Check








Dropdown


List:

Progress bar:

Cursors

This example shows the basic cursors.





That's it, for now!

Check out the RPGUI git for more info!



- Back to Top -