motor

motor
========

A famous UI library.


Getting Started
---------------

The following sample workflows show possible ways to install and start using
motor. These examples will refer to the snippets at the end of
the README.

$3

Install nodejs, then create package.json for your
project.

``
npm init # creates package.json
`

Install browserify globally.

`
npm install -g browserify
`

Install motor along with famous, famousify, and cssify into your project.

`
npm install motor famous famousify cssify --save
`

Add the the famousify and cssify transforms to your package.json so it looks
similar to the following.

`json
{
"dependencies": {
"cssify": "^0.6.0",
"famous": "^0.3.4",
"famousify": "^0.1.5",
"motor": "^0.0.15"
},
"browserify": {
"transform": [
"famousify",
"cssify"
]
}
}
`

Suppose you have src/app.js containing Snippet 1 and
public/index.html containing Snippet 2. Compile a bundle for
production.

`
browserify src/app.js -o public/app.js
`

Alternatively, use watchify to watch
the filesystem for changes and re-compile automatically.

`
watchify src/app.js -o public/app.js
`

Install serve globally.

`
npm install -g serve
`

Serve the contents of the public folder.

`
serve public
`

Visit localhost:3000 in your browser.

$3

Install nodejs, then create package.json for your
project.

`
npm init # creates package.json
`

Install webpack globally.

`
npm install -g webpack
`

Install motor along with famous, webpack, css-loader, and style-loader into
your project.

`
npm install motor webpack famous css-loader style-loader --save
`

Create webpack.config.js to configure webpack.

`js
var webpack = require('webpack')
module.exports = {
entry: "./src/app.js",
output: {
path: './public',
filename: "app.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
resolve: {
alias: {
// add this alias only for famous <0.3.5
famous: 'famous/src'
}
}
}
`

Suppose you have src/app.js containing Snippet 1 and
public/index.html containing Snippet 2. Compile a bundle for
production.

`
webpack
`

Alternatively, watch the filesystem for changes and re-compile automatically.

`
webpack --watch
`

Install serve globally.

`
npm install -g serve
`

Serve the contents of the public folder.

`
serve public
`

Visit localhost:3000 in your browser.

$3

Install nodejs, then create package.json for your
project.

`
npm init # creates package.json
`

Install jspm globally.

`
npm install -g jspm
`

Set jspm.directories.baseURL in your package.json to "src", similar to the
following.

`json
{
"jspm": {
"directories": {
"baseURL": "src"
}
}
}
`

Install motor along with famous and css into your project.

`
jspm install -y motor famous css
`

Suppose you have src/app.js containing Snippet 3 and
src/index.html containing Snippet 4. Install serve globally.

`
npm install -g serve
`

Serve the contents of the src folder.

`
serve src
`

Visit localhost:3000 in your browser.

Snippets
--------

$3

`js
var style = require('famous/core/famous.css') // needed by famous
var Plane = require('motor/Plane')
var contextWithPerspective = require('motor/utils').contextWithPerspective

var ctx = contextWithPerspective(1000)
var square = new Plane({
size: [200,200],
content: 'Hello.',
properties: {
backfaceVisibility: 'visible',
background: 'pink',
padding: '5px'
}
})

ctx.add(square)
square.transform.setRotate([0,2*Math.PI,0], {duration: 5000, curve: 'easeInOut'})
`

$3

`html











`

$3

`js
import 'famous/core/famous.css!'

import Plane from 'motor/Plane'
import {contextWithPerspective} from 'motor/utils'

var ctx = contextWithPerspective(1000)
var square = new Plane({
size: [200,200],
content: 'Hello.',
properties: {
backfaceVisibility: 'visible',
background: 'pink',
padding: '5px'
}
})

ctx.add(square)
square.transform.setRotate([0,2*Math.PI,0], {duration: 5000, curve: 'easeInOut'})
`

$3

`html












``