-
Notifications
You must be signed in to change notification settings - Fork 10
Getting Started
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:
$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.
(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>