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.




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


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>



This dependency is included in the lib/stylesheets directory.


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"/>


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">


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 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();

    details: function() {
      var detailsView = new DetailsView();



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 is how you trigger a navigation using an animation. It works a lot like Backbone.history.navigate:

  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