JSFiddle - React, Tailwind, and code Playground

by cs_brandt

HTML

<link rel="stylesheet" href="http://cdn.ink.sapo.pt/2.3.0/css/ink-min.css">
<!doctype html>
<body>
    <script id="main-template" type="text/x-handlebars-template">
    <div class="wrap">
        <div class="top-menu">
                <nav class="ink-navigation ink-grid">
                        <ul class="menu horizontal grey flat">
                                <li class="active"><a href="#">TEDFeed</a></li>
                        </ul>
                </nav>
        </div>
        <div class="ink-grid content">
                <div class="column-group">
                       <div id="content" class="small-100 medium-100 large-75"></div>
                </div>
        </div>
        <div class="push"></div>
    </div>
    </script>
    
    <script id="entry-template" type="text/x-handlebars-template">
        {{#each this}}
        <div class="entry clearfix">
           <div class="photo-container pull-left">
	       <a href="{{mediaGroups.0.contents.0.url}}">
               <img src="{{mediaGroups.0.contents.0.thumbnails.0.url}}" />
           </a>
           </div>
           <span class="title">{{title}}</span>
           <p class="detail hidden">{{content}}</p>
           <abbr class="timeago pull-right" title="{{publishedDate}}">{{publishedDate}}</abbr>
        </div>
        {{/each}}
    </script>
    
    <!-- Application source. -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
    <!-- todo async/goog plugin -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</body>

CSS

.photo-container img {
    width: 121px;
    margin-right: 1em;
}
.detail {
    margin-left: 1em;
    margin-right: 1em;
}
.ink-grid {
    padding: 0;
}
.entry {
    border-bottom: 1px solid #BBB;
    font-size: 15px;
    cursor: pointer;
    position: relative;
}
.top-menu
{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: rgb(217, 217, 217);
   z-index: 100;
}
.ink-grid.content {
   margin-top: 54px;
   margin-bottom: 10px;
}
.hidden {
    display: none;
    padding-bottom: 1em;
}
.title {
    text-decoration: underline;
}
.timeago {
    position: absolute;
    right: 10px;
    bottom: 5px;
    color: rgb(179, 179, 179);
}

JavaScript

/** @file config.js
 *  @fileOverview Program driver. Configures path aliases and calls app.initialize()
 *  @author cs_brandt
 *  @date 03/05/2014
 */

require.config({
    waitSeconds: 10,
    paths: {
        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min',
        backbone: 'https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
        handlebars: 'https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min',
        timeago: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.3.1/jquery.timeago.min'
    },
    shim: {
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        lodash: {
            exports: '_'
        },
        handlebars: {
            exports: 'Handlebars'
        },
        timeago: {
            deps: ['jquery']
        }
    },
    map: {
        '*': {
            'underscore': 'lodash'
        }
    }
});

/** @file app.js
 *  @fileOverview App initialization.
 *  @author cs_brandt
 *  @date 03/05/2014
 */

define("app", function (require) {
    "use strict";
    // dependencies
    var Backbone = require('backbone');
    var MainView = require('main');

    return {
        initialize: function () {
            // app starts here
            this.mainView = new MainView({
                el: 'body'
            });
        }
    };
});

/** @file feeds.js
 *  @fileOverview
 *  @author cs_brandt
 *  @date 03/05/2014
 */

define("feeds", function (require) {
    "use strict";
    // dependencies
    var $ = require('jquery');
    var _ = require('lodash');
    var Backbone = require('backbone');
    
    return Backbone.Collection.extend({
        fetch: function(options) {
            this.options = options;
            
            google.load("feeds", "1", {
                'callback': this.loadFeed.bind(this)
           ...