Polypage was designed to ease the process of showing multiple page states in html mock-ups. By simply adding class names to a document you can imply state and conditional view logic.
This page is using PolyPage! You may have noticed the options in the top right corner of this page. Try toggling them to see the text below change to reflect your choices.
Any class names that you would like Polypage to process should begin with pp_
Polypage will ignore all other classes in the document.
The pp_
prefix is then followed by a state, this can be any page state that you wish to use, some examples; logged_in
, administrator
, group_owner
, blank_state
. A complete class name might look something like pp_logged_in
When the page loads states are collected automatically from your used class names, because of this it is not necessary to tell Polypage what states you are using in a particular page.
States can be joined together and negated to add some basic logic to pages. The syntax for this follows natural language. Some examples; pp_logged_in_and_admin
, pp_not_logged_in
, pp_admin_or_group_owner
.
The state of a page can be easily changed by toggling the state options on and off in the grey box in the top left corner of the window.
Polypage has support for defaults and persistence through several different means:
polypage.init()
function will set default on states for the page.The source code is available on GitHub
This version is still an early release but is in regular use by several companies. Check-out the changelog for more details on what's new.
Who knows? I'm open to suggestions / patches