Skip to content
This repository was archived by the owner on Jan 7, 2026. It is now read-only.

Getting Started

Jump to bottom
Kris Erickson edited this page Jan 28, 2014 · 11 revisions

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

$npm install -g yo
$npm install -g generator-topcoat-touch
$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  to select)
>[X] ios
 [X] android
 [ ] wp8
 [ ] windows8
 [ ] amazon-fireos
 [ ] firefoxos
 [ ] blackberry10
[?] Light or dark theme? (Use arrow keys)
> light
  dark
[?] Light or dark theme? (Use arrow keys)
> light
  dark
[?] 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

1. Download topcoat-touch
2. Create an index.html in the root directory.
3. Set the viewport and include stylesheets and scripts

(You can choose topcoat-mobile-light.css or topcoat-mobile-dark.css depending upon your colour preference.)

<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/fastclick.js"></script>
    <script src="js/app.js"></script>
</head>
4. Create an empty app.js in the js directory and an empty app.css in the css directory.
5. Choose between [Single Document](Single Document) and an [MVC Style Application](MVC Style Application)

Clone this wiki locally