motor
v0.1.4
Published
A UI library.
Downloads
121
Maintainers
sorincatanaKeywords
Readme
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.
browserify workflow
Install nodejs, then create package.json for your
project.
npm init # creates package.jsonInstall browserify globally.
npm install -g browserifyInstall motor along with famous, famousify, and cssify into your project.
npm install motor famous famousify cssify --saveAdd the the famousify and cssify transforms to your package.json so it looks similar to the following.
{
"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.jsAlternatively, use watchify to watch the filesystem for changes and re-compile automatically.
watchify src/app.js -o public/app.jsInstall serve globally.
npm install -g serveServe the contents of the public folder.
serve publicVisit localhost:3000 in your browser.
webpack workflow
Install nodejs, then create package.json for your
project.
npm init # creates package.jsonInstall webpack globally.
npm install -g webpackInstall motor along with famous, webpack, css-loader, and style-loader into your project.
npm install motor webpack famous css-loader style-loader --saveCreate webpack.config.js to configure webpack.
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.
webpackAlternatively, watch the filesystem for changes and re-compile automatically.
webpack --watchInstall serve globally.
npm install -g serveServe the contents of the public folder.
serve publicVisit localhost:3000 in your browser.
jspm workflow
Install nodejs, then create package.json for your
project.
npm init # creates package.jsonInstall jspm globally.
npm install -g jspmSet jspm.directories.baseURL in your package.json to "src", similar to the
following.
{
"jspm": {
"directories": {
"baseURL": "src"
}
}
}Install motor along with famous and css into your project.
jspm install -y motor famous cssSuppose you have src/app.js containing Snippet 3 and
src/index.html containing Snippet 4. Install serve globally.
npm install -g serveServe the contents of the src folder.
serve srcVisit localhost:3000 in your browser.
Snippets
Snippet 1
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'})Snippet 2
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Project with motor</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
</body>
</html>Snippet 3
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'})Snippet 4
<!DOCTYPE html>
<html>
<head>
<title>Project with motor</title>
<meta charset="utf-8" />
</head>
<body>
<script src='jspm_packages/system.src.js'></script>
<script src='config.js'></script>
<script type="module">
System.import('app');
</script>
</body>
</html>