Copy the projects/template directory and rename using your project name, e.g. "myproject". You should now have a new folder called projects/myprojects.
The index.html file is the page index for your project. Put links to your prototypes there.
1.2 Create your first prototype
Copy the template file to a new file, e.g. myproject/myprototype.html.
Set your "notes" and "spec" variables to "true" or "false". True will insert notes or specs into your prototype.
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.
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.
Put the HTML for your prototype into myprototype.html.
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
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 -->
<link rel="stylesheet" type="text/css" href="../../lib/ixedit/ixedit.css" />
The included script inserts the iXEdit tools into your prototype when you're viewing it in a web browser.
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.
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.