CodePen

HTML

            
              <!--
Join over 70,000 developers in our beta program at http://famo.us.

Famo.us is a free, open source Javascript development platform that can build apps, games and interfaces using HTML5 and WebGL.

We have built a pure JS renderer and 3D physics engine. We've wrapped these engines with an enterprise grade platform that is easy to use.

Each week we release new examples.  If you are a blogger and would like early access so you can write about them please email Ryan@famo.us.

Full public beta begins late February of 2014.
-->
            
          
!

CSS

            
              html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

html                { 
                      font-size: 18px; 
                      background-color: #303637; 
                    } 

.panel-background, .description-panel {
    background-color: rgba(0, 0, 0, 0.25);
}

.label
{
	font-family: 'Avenir Next W10 Medium', sans-serif;	
	color: rgba(255,255,255,1.0);
    border-bottom: 1px solid white;
}

.slider-label {					
	font-family: 'Avenir Next W10 Thin', sans-serif;	
  font-weight: 200;
	color: rgba(255,255,255,1.0);
}

.slider-back {
	background-color: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,0.2);
}

.slider-fill {
	background-color: rgba(255,255,255,0.8);
}
.slider-value {
	font-family: 'Avenir Next W10 Medium', sans-serif;	
    color: rgba(172,234,255,1);
}
.settings-save { 
	  font-family: 'Avenir Next W10 Bold', sans-serif;	
    color: rgba(172,234,255,1);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #2a2933;
    border-top: 2px solid #7bd0db;
    border-left: 2px solid #7bd0db;
    border-right: 2px solid #7bd0db;
    
}

.settings-save-button { 
	font-family: 'Avenir Next W10 Bold', sans-serif;	
    background-color: #6cce3e;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.settings-clear { 
	font-family: 'Avenir Next W10 Bold', sans-serif;	
    color: rgba(255, 255, 255, 1);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #eb704f;
}

.no-user-select { 
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1, h2, h3 { 
    font-family: 'Avenir Next W10 Bold';
    font-size: 18px;
    color: white;
}
h4, h5, h6 { 
    font-family: 'Avenir Next W01 Thin';
}
p { 
    font-size: 14px;
    font-family: 'Avenir Next W10 Medium';
    color: white;
}

.backface-visible { 
    backface-visibility:visible;
    -webkit-backface-visibility:visible; 
    -moz-backface-visibility:visible; 
    -ms-backface-visibility:visible;
}

//CORE UI

.core-nextDescription a {
    color: #ffffff;
    line-height: 18px;
}
.core-next-demo { 
    font-size: 12px;
    color: #ccc;
    font-family: 'Avenir Next W10 Medium';   
}
.core-next-name { 
    color: #ffffff;
    font-family: 'Avenir Next W10 Medium';   
}
.core-error { 
    font-family: 'Avenir Next W10 Medium';   
}

.textinput
{        
    height:40px; 
    width:100%; 
    padding-left: 6px;     
    padding-top: 0px;     
    color: rgba(255, 255, 255, .750);
    font-size: 24px; 
    font-family: 'Avenir Next W10 Thin';
    background-color:rgba(0, 0, 0, 0.0); 
    border: 1px solid rgba(255, 255, 255, .750);   
    outline-width: 0px;
}

.textinput:focus
{
    color: rgba(255, 255, 255, 1.0);
    border: 1px solid rgba(255, 255, 255, 1.0);   
    outline-width: 0px;    
}

.submit
{
    padding-top: 9px;
    padding-left: 4px;
    line-height: 24px;
    font-size: 24px; 
    font-family: 'Avenir Next W10 Thin';   
}
.textinput { 
     background-color: #222; 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //CodePen Evaluation License 
//
// Copyright (c) 2013 Famo.us, Inc.
//
// Non-sublicensable permission is hereby granted, free of charge,
// to any person obtaining a copy of this software and associated
// documentation files directly from codepen.io (the "Software"), solely to
// internally make and internally use copies of the Software to test,
// explore, and evaluate the Software solely in such person’s non-commercial,
// non-production environments, provided that the above copyright
// notice and this permission notice shall be included in all copies or
// substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Famous(function(require, exports, module) 
{   require('famous-sync/FastClick');
    // Engine
    var Engine           = require('famous/Engine');
    var FM               = require('famous/Matrix');
    var RenderNode       = require('famous/RenderNode');
    var SceneController = require('app/SceneController');

    // APP
    var GridScene        = require('app/scenes/GridScene');

    var mainCtx = Engine.createContext();
    mainCtx.setPerspective( 1000 );

    SceneController.addScenes({
        'grid': GridScene
    }); 
    SceneController.setScene('grid');

    mainCtx.add( SceneController );
 
});


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................