HTML Wireframe with Polypage

March 30th, 2009

polypage

What is PolyPage?

Polypage is jQuery plugin to help you build wireframe. It was designed to ease the process of showing multiple states in html mock-ups. You can do this by adding class names to your html mock-ups.

See the demo.

Where can I get PolyPage?

You can get the latest version from the github repository.

How to use PolyPage

After download the PolyPage files, you need to include jQuery, jQuery cookie plugin, jQuery PolyPage plugin, and don’t forget to include PolyPage stylesheet file.

Assume your PolyPage files is in polypage directory, we will see something like this :

<head>
    ...
    <link rel="stylesheet" href="polypage/skins/default.css" type="text/css" media="screen" title="no title" charset="utf-8">
 
    <script src="polypage/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="polypage/lib/cookie.jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="polypage/lib/polypage.jquery.js" type="text/javascript" charset="utf-8"></script>
 
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
	        $('body').polypage([]);
        });
    </script>
    ...
</head>

You can define a state by adding class name with pp_ prefix. Let’s say you have state where your user has logged in your application and in this state you want to give sign out option.

<p class="pp_logged_in">Welcome, KomunitasWeb <a href="#">Sign out</a></p>

To give log in option for user who are not signed in, we can negate the state by adding not in class.

<p class="pp_not_logged_in"><a href="#">Login</a> or <a href="#"><strong>Sign up</strong></a></p>

Look at the demo for more brief example.

This is only introduction to PolyPage, to help you get started with PolyPage I have provided some links at the bottom of this article.

Don’t miss a thing, subscribe to our feeds.

More information

More Polypage sample

Tags: polypage