{index}

{title}

Table of contents

1. The Basics

1.1 Set up your new project directory

  1. Copy the projects/template directory and rename using your project name, e.g. "myproject". You should now have a new folder called projects/myprojects.
  2. The index.html file is the page index for your project. Put links to your prototypes there.

1.2 Create your first prototype

  1. Copy the template file to a new file, e.g. myproject/myprototype.html.
  2. Set your "notes" and "spec" variables to "true" or "false". True will insert notes or specs into your prototype.
    1. If you set notes variable to true, create your [prototype-name].notes file, e.g. if you named your prototype page "myprototype" then name the file myproject/myprototype.notes, and enter your notes there.
    2. If you set spec variable to true, create your [prototype-spec].notes file, e.g. if you named your prototype page "myprototype" then name the filemyproject/myprototype.spec, and enter your specifications there.
  3. Put the HTML for your prototype into myprototype.html.
  4. Create any CSS in the project's css/style.css file, e.g. if your project directory is "myproject" your css should be in myproject/css/style.css.

1.3 Using iXEdit

  1. To use iXEdit, you have to first add the following code in the HEAD of your HTML document during development:
    <!-- LOAD IXEDIT; DELETE AFTER DEPLOYING -->
    <script type="text/javascript" src="../../lib/ixedit/ixedit.packed.js"></script>
    <link rel="stylesheet" type="text/css" href="../../lib/ixedit/ixedit.css" />
  2. The included script inserts the iXEdit tools into your prototype when you're viewing it in a web browser.
  3. First you have to start writing the HTML to lay out your prototype. You may have to click the question mark icons in the iXEdit tool to see what kind of HTML it expects for the UI components it creates.
  4. Using the iXEdit tools, create the behaviors for your prototype. When you're happy with what you've got, select Menu > Deploy. Copy the generated javascript.
  5. Remove the code you put in the head in step 1. And now paste the javascript generated by iXEdit.

Demo

2. Templates

2.1 Grid Layouts

Protokit uses the Blueprint CSS framework for layout, and templates are provided for creating columns in a grid. Blueprint provides 24 columns inside a 950px wide container.

To create columns you use column tokens surrounded by curly braces.

{ cols } { /cols } contains a set of columns

{ col[#] } { /col[#] } contains a single column

A typical layout looks like this:


  { cols }
    { col12 }
    { /col } 
    { col12last }
    { /col }
  { /cols }

Be sure to remove spaces between the braces. The spaces are added above so that jQuery doesn't convert the tokens in the example.

Demo

2.2 Greeking

You can use the lipsum template to create a paragraph of greeked text.

{ lipsum }

Creates the greeked text below:

{lipsum}

Or for kicks, use this one:

{ tps }

Creates faked TPS report:

{tps}

3. UI Components

A UI component library is being built. Documentation will be provided here in the future.

Demos

Tests

Back to the main page {/index}