A famo.us UI library.
The following sample workflows show possible ways to install and start using infamous. These examples will refer to the snippets at the end of the README.
Also read the docs.
Install nodejs, then create package.json for your project.
npm init # creates package.json
Install browserify globally.
npm install -g browserify
Install infamous along with famous, famousify, and cssify into your project.
npm install infamous 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",
"infamous": "^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.
Install nodejs, then create package.json for your project.
npm init # creates package.json
Install webpack globally.
npm install -g webpack
Install infamous along with famous, webpack, css-loader, and style-loader into your project.
npm install infamous 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.
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 infamous along with famous and css into your project.
jspm install -y infamous 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.
var style = require('famous/core/famous.css') // needed by famous
var Plane = require('infamous/Plane')
var contextWithPerspective = require('infamous/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'})<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Project with infamous</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
</body>
</html>import 'famous/core/famous.css!'
import Plane from 'infamous/Plane'
import {contextWithPerspective} from 'infamous/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'})<!DOCTYPE html>
<html>
<head>
<title>Project with infamous</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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent