Polypage

What's this all about?

Polypage was designed to ease the process of showing multiple page states in html mock-ups. By adding simply adding class names to a document you can imply state and conditional view logic.

How does it work?

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:

URL anchors
These work the same as class names so building an anchor like #logged_in_and_admin would turn these two states on by default on page load.
Init options
Passing an array of states to the polypage.init() function will set default on states for the page.
Cookies
Cookie support relies on the jQuery cookie plugin, when this is present it is used to make choices persistent. You can set a cookie from the server by setting 'polypage_option'='yes'

Where can I see a demo?

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.

Where can I get hold of it?

You can download the current version (0.4) here.

This version is still an early release and has only really been tested on Firefox & Safari therefore please keep sending us your feedback and issues.
Check-out the changelog for more details on what's new.

What's next?