Skip to content

Getting started

Jump to bottom Edit New page
ranbena edited this page Sep 12, 2011 · 27 revisions

Basic setup:

  1. Download the project files: zip, tar or fork it.
  2. Browse to index.html from your desktop and mobile.
  3. Edit the file to your liking and make it your own.

If you got a server that runs php, start with index.php so you could enjoy TouchPHP. It enables you to embed assets into the page (potentially speeding up load time).

Advanced usage

There's a whole lot you can do with the Touchy projects. Full documentation can be found in TouchyJS and TouchyPHP.

Before starting, make sure touchy.js is loaded into the page.

Here's a few quick ones:

Fixed header

Your HTML structure should look like this:

<html>
  <head>
    <style>
      .touchy-js{display: none}; /* To avoid a flash of content */
    </style>
  </head>
  <body>
    <!-- header -->
    <div class="touchyjs-header">
      ...
    </div>

    <!-- content page #1 -->
    <div class="touchyjs-content" id="page1">
      ...
    </div>

    <!-- content page #2 -->
    <div class="touchyjs-header" id="page2">
      ...
    </div>
  </body>
</html>

Reload the page. Now only the first "page" is displayed.

Now, let's move between them!

Page navigation

Add a custom footer
Add a custom sidebar
Clone this wiki locally