Junior

A front-end framework for building HTML5 mobile apps with a native look and feel.

  • CSS3 Transitions optimized for mobile performance.
  • Swipable carousels using flickable.js.
  • Integration with backbone.js views and routers.
  • Ratchet CSS UI components.
  • Try loading this page on a mobile phone or try our "simulator" to the right.
Download

Installation

Javascript

Dependencies

Each of these dependencies is included in the lib/javascripts directory.

junior.js

junior.js is included in the src/javascripts directory. Include each of the dependencies and junior.js in the following order:

<script src="lib/javascripts/modernizr.custom.15848.js"></script>
<script src="lib/javascripts/zepto.min.js"></script>
<script src="lib/javascripts/zepto.flickable.min.js"></script>
<script src="lib/javascripts/lodash.min.js"></script>
<script src="lib/javascripts/backbone-min.js"></script>
<script src="src/javascripts/junior.js"></script>

CSS

Dependencies

This dependency is included in the lib/stylesheets directory.

junior.css

junior.css is included in the src/stylesheets directory. Include the css in the following order in the head of the document:

<link rel="stylesheet" href="lib/stylesheets/ratchet.css"/>
<link rel="stylesheet" href="src/stylesheets/junior.css"/>

HTML

junior.js expects you to have a #app-container and #app-main in your body like this. This is where the animations and transitions happen.

<div id="app-container">
    <div id="app-main">
    </div>
</div>

Examples

Annoted example.js

The best and most detailed example for how to get started is the Annotated Example for example.js. That is the javascript behind the live demo on this page. However, if you are pretty confident that you can catch on quickly, then just read the more brief explanations on this page.

Jr.Router

Jr.Router is simply an extension of Backbone.Router. It gives you a renderView method to automatically render your view with an animation. A typical router may look like this (assuming each view is defined elsewhere):

var AppRouter = Jr.Router.extend({
    routes: {
      '': 'home',
      'about': 'about',
      'details': 'details'
    },

    home: function(){
      var homeView = new HomeView();
      this.renderView(homeView);
    },

    details: function() {
      var detailsView = new DetailsView();
      this.renderView(detailsView);
    }

});
      

Jr.View

Jr.View is optional for you to use. It extends from Backbone.View. All it does is automatically bind a touchend event in place of a click event if it detects you are using a touch device. A simple example is like this:

var HomeView = Jr.View.extend({
  render: function(){
    this.$el.html("<button class="some-element">Hi</button>");
    return this;
  },

  events: {
    'click .some-element': 'onClickSomeElement'
  },

  onClickSomeElement: function() {
    console.log('This event occurs on touchend on mobile or on click otherwise')
  }

});

Jr.Navigator

Jr.Navigator is how you trigger a navigation using an animation. It works a lot like Backbone.history.navigate:

Jr.Navigator.navigate('details',{
  trigger: true,
  animation: {
    type: Jr.Navigator.animations.SLIDE_STACK,
    direction: Jr.Navigator.directions.RIGHT
  }
});

Currently the only animations that we have is SLIDE_STACK. This slides from one view to the next. Also the only directions that we have is RIGHT and LEFT. In the future we would like to have many more animations.

Sources and Credits

Fork me on GitHub