❤
npm
Sign UpSign In

motor

0.1.4 • Public • Published

motor

A famous UI library.

NPM

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.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.

{
  "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.

webpack workflow

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.

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.

jspm workflow

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.

{
  "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

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>

Readme

Keywords

Package Sidebar

Install

npm i motor

Repository

github.com/infamous/infamous

Homepage

github.com/infamous/infamous

Weekly Downloads

16

Version

0.1.4

License

MPL

Last publish

Collaborators

  • sorincatana
Try on RunKit
Report malware