Skip to content

Instantly share code, notes, and snippets.

@justinriggio

justinriggio/index.html

Created September 24, 2014 23:34
Show Gist options
  • Save justinriggio/5720b919f67947d7e230 to your computer and use it in GitHub Desktop.
Save justinriggio/5720b919f67947d7e230 to your computer and use it in GitHub Desktop.
Download ZIP
Famo.us FormContainerSurface Famo.us FormContainerSurface // source http://jsbin.com/bekona/3
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Famo.us FormContainerSurface" />
<meta charset="utf-8">
<title>Famo.us FormContainerSurface</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Famous/famous/master/core/famous.css">
<script src="https://cdn.rawgit.com/Famous/polyfills/master/classList.js"></script>
<script src="https://cdn.rawgit.com/Famous/polyfills/master/functionPrototypeBind.js"></script>
<script src="https://cdn.rawgit.com/Famous/polyfills/master/requestAnimationFrame.js"></script>
<script src="https://cdn.rawgit.com/jrburke/requirejs/master/require.js"></script>
<script src="https://cdn.rawgit.com/Famous/famous/master/dist/famous.min.js"></script>
<script type="text/javascript">require(['main']);console.log('------------start------------')</script>
<style id="jsbin-css">
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
</style>
</head>
<body class='famous-root'>
<script id="jsbin-javascript">
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var FormContainerSurface = require('famous/surfaces/FormContainerSurface');
var SubmitInputSurface = require('famous/surfaces/SubmitInputSurface');
var InputSurface = require('famous/surfaces/InputSurface');
var mainContext = Engine.createContext();
// Used to group InputSurfaces...
var formGroup = new FormContainerSurface({});
var submit = new SubmitInputSurface({});
var title = new Surface({
size: [200, 20],
content: "Famo.us login Form"
});
var email = new InputSurface({
size: [200, 20],
name: "email",
value: '',
type: "text"
});
var password = new InputSurface({
size: [200, 20],
name: "password",
value: '',
type: "password"
});
var formGroupMod = new Modifier({
size: [200, 20],
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var emailPos = new Modifier({
transform : Transform.translate(0, 40, 0)
});
var passwordPos = new Modifier({
transform : Transform.translate(0, 80, 0)
});
var submitPos = new Modifier({
transform : Transform.translate(0, 120, 0)
});
email.focus();
email.setPlaceholder('email or username');
password.setPlaceholder('password');
submit.setPlaceholder('send');
mainContext.add(formGroupMod).add(formGroup);
formGroup.add(title);
formGroup.add(emailPos).add(email);
formGroup.add(passwordPos).add(password);
formGroup.add(submitPos).add(submit);
});
</script>
<script id="jsbin-source-css" type="text/css">html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var FormContainerSurface = require('famous/surfaces/FormContainerSurface');
var SubmitInputSurface = require('famous/surfaces/SubmitInputSurface');
var InputSurface = require('famous/surfaces/InputSurface');
var mainContext = Engine.createContext();
// Used to group InputSurfaces...
var formGroup = new FormContainerSurface({});
var submit = new SubmitInputSurface({});
var title = new Surface({
size: [200, 20],
content: "Famo.us login Form"
});
var email = new InputSurface({
size: [200, 20],
name: "email",
value: '',
type: "text"
});
var password = new InputSurface({
size: [200, 20],
name: "password",
value: '',
type: "password"
});
var formGroupMod = new Modifier({
size: [200, 20],
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var emailPos = new Modifier({
transform : Transform.translate(0, 40, 0)
});
var passwordPos = new Modifier({
transform : Transform.translate(0, 80, 0)
});
var submitPos = new Modifier({
transform : Transform.translate(0, 120, 0)
});
email.focus();
email.setPlaceholder('email or username');
password.setPlaceholder('password');
submit.setPlaceholder('send');
mainContext.add(formGroupMod).add(formGroup);
formGroup.add(title);
formGroup.add(emailPos).add(email);
formGroup.add(passwordPos).add(password);
formGroup.add(submitPos).add(submit);
});</script></body>
</html>
Raw
jsbin.bekona.css
html {
background: #fff;
}
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.double-font {
font-size: 2em;
}
Raw
jsbin.bekona.js
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var FormContainerSurface = require('famous/surfaces/FormContainerSurface');
var SubmitInputSurface = require('famous/surfaces/SubmitInputSurface');
var InputSurface = require('famous/surfaces/InputSurface');
var mainContext = Engine.createContext();
// Used to group InputSurfaces...
var formGroup = new FormContainerSurface({});
var submit = new SubmitInputSurface({});
var title = new Surface({
size: [200, 20],
content: "Famo.us login Form"
});
var email = new InputSurface({
size: [200, 20],
name: "email",
value: '',
type: "text"
});
var password = new InputSurface({
size: [200, 20],
name: "password",
value: '',
type: "password"
});
var formGroupMod = new Modifier({
size: [200, 20],
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var emailPos = new Modifier({
transform : Transform.translate(0, 40, 0)
});
var passwordPos = new Modifier({
transform : Transform.translate(0, 80, 0)
});
var submitPos = new Modifier({
transform : Transform.translate(0, 120, 0)
});
email.focus();
email.setPlaceholder('email or username');
password.setPlaceholder('password');
submit.setPlaceholder('send');
mainContext.add(formGroupMod).add(formGroup);
formGroup.add(title);
formGroup.add(emailPos).add(email);
formGroup.add(passwordPos).add(password);
formGroup.add(submitPos).add(submit);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment