Getting Started

You have two options to get started with your Topcoat Touch project, either you can use Yeoman, or you can add all the files manually:

Use Yeoman

We will assume that you have already installed nodejs, and npm but if you haven't do so now.

Next install Yeoman, if you haven't already. This can be done with the following simple command: $npm install -g yo

Next install the topcoat-touch genreator for yeoman

$npm install -g generator-topcoat-touch

Next run yeoman and answer a few simple questions

do you want to enable Cordova (Phonegap). Selecting this creates a grunt script that allows for quick creation of a Phonegap app with little messing around, if you don't create this now you will have to do it manually by yourself if you change your mind later.
The light or dark theme selection is easy to change later, so don't be too concerned
Hammer.js is used to react to swipes, pinches, zooms, other mobile touch events. You can easily add it later
Fastclick.js is used to get around the 300ms click delay (may be obsolete in a year or so). You can easily add it later
iScroll.js is used to allow for smooth scrolling of pages. You can easily add it later
mvc or single document is an important decision, however if you are used to jQuery Mobile and jQT you should probably pick single document for your first application. It is the simplest way to quickly create a mobile site.

$yo topcoat-touch

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------'  |    Welcome to Yeoman,    |
    ( _'U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 '   `  |° ' Y `

[?] Topcoat Touch Project Name? Example
[?] Would you like to enable Cordova for this project? Yes
[?] Cordova platforms: (Press <space> to select)
>[X] ios
 [X] android
 [ ] wp8
 [ ] windows8
 [ ] amazon-fireos
 [ ] firefoxos
 [ ] blackberry10
[?] Light or dark theme? (Use arrow keys)
> light
  dark
[?] Use jQuery or Zepto as Dom manipulation library? (Use arrow keys)
> jquery
  zepto
[?] Include Hammer.js for gesture support? (Y/n)
[?] Include fastclick.js to remove click delays? (Y/n)
[?] Include IScroll.js for scrolling (required for KitchenSink demo)? (Y/n)
[?] MVC or Single Document? (Use arrow keys)
> mvc
  single document
[?] Include the KitchenSink demo? (y/N)
   create app\index.html
   create app\js\app.js
   create app\css\app.css
   create bower.json
   create .bowerrc
   create Gruntfile.js
   create package.json
   create app\cordova.js
   create app\templates\home.ejs

I'm all done. Running bower install & npm install for you to install the required dependencies.
If this fails, try running the command yourself.

Manually

Download topcoat-touch.
Create an index.html in the root directory.
Set the viewport for mobile (<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">)
Include stylesheets (You can choose topcoat-mobile-light.css or topcoat-mobile-dark.css depending upon your colour preference) and topcoat-touch.css
Include the scripts you need to use: jquery or zepto depending on your preference, topcoat-touch, iscroll (if you want scrolling), hammerjs (if you need touch events), fastclick (to remove click delays), and any javascript you need.

<head>
    <title>Topcoat Touch</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link href="css/topcoat-mobile-light.css" rel="stylesheet">
    <link href="css/topcoat-touch.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/topcoat-touch.js"></script>
    <script src="js/iscroll.js"></script>
    <script src="js/hammer.js"></script>
    <script src="js/fastclick.js"></script>
    <script src="js/app.js"></script>
</head>