Micro Single Mobile App Framework

main.html

<div class="pages">
	<div data-page="home" class="page current">
		<h1>Home</h1>
		<button data-to="key-service-offerings">Go to key services</button>
		<button data-to="industries-served">industries-served</button>
		<button data-to="technology-solutions">technology-solutions</button>
		<button data-to="home">home</button>
	</div>
	<div data-page="key-service-offerings" class="page right">
		<h1>Key service</h1>
		<button data-to="key-service-offerings">Go to key services</button>
		<button data-to="industries-served">industries-served</button>
		<button data-to="technology-solutions">technology-solutions</button>
		<button data-to="home">home</button>
	</div>
	<div data-page="industries-served" class="page right">
		<h1>industries served</h1>
		<button data-to="key-service-offerings">Go to key services</button>
		<button data-to="industries-served">industries-served</button>
		<button data-to="technology-solutions">technology-solutions</button>
		<button data-to="home">home</button>
	</div>
	<div data-page="technology-solutions" class="page right">
		<h1>technology-solutions</h1>
		<button data-to="key-service-offerings">Go to key services</button>
		<button data-to="industries-served">industries-served</button>
		<button data-to="technology-solutions">technology-solutions</button>
		<button data-to="home">home</button>
	</div>
</div>

main.js

(function() {
	"use strict";
	
	// first load
	var firstLoad = true;
	
	// fast click
	FastClick.attach(document.body);
	
	page("/:page?", function(ctx, next, something) {
		var aPage = ctx.params.page
		  , $next = $(".page[data-page="+aPage+"]")
		  , $current = $(".page.current");
		
		// don't do a damn thing if you're trying to go to the same page
		if(aPage !== $current.attr("data-page")) {
			
			// this prevents the initial load from 'jumping'
			$current.add($next)[(firstLoad ? 'add' : 'remove') + 'Class']("noAnimate");
			
			// if the next page is on the left
			if($next.hasClass("right")) {
				$current.removeClass("current").addClass("left");
				$next.removeClass("right").addClass("current");
			
			// next page is on the right
			} else if($next.hasClass("left")) {
				$current.removeClass("current").addClass("right");
				$next.removeClass("left").addClass("current");
			}
		}
		
		// not first load anymore
		firstLoad = false;
	});
	
	// page load
	page();
	
	// any data-to button or link click
	$(".pages").on("click","[data-to]",function(e) {
		e.preventDefault();
		page("/" + $(this).attr("data-to") );
	});
	
})();

main.styl

// This is an app-wide stylesheet, included in layout.html.
// It will compile automatically to /public/css/main.css.
*
	box-sizing border-box

html, body
	overflow hidden
	position absolute
	top 0
	left 0
	right 0
	bottom 0
	margin 0

.pages
	.page
		// each page should be full screen
		position absolute
		top 0
		left 0
		right 0
		bottom 0
		transform translate3d(0,0,0)
		// animations, this is smooth
		transition all 350ms cubic-bezier(.10, .10, .28, .88)
		// smooth scrolling
		overflow-y auto
		-webkit-overflow-scrolling touch
		
		&.noAnimate
			transition-duration 0s
		
		// current page
		&.current
			transform translate3d(0,0,0)
		// page on the right
		&.right
			transform translate3d(102%,0,0)
		// page on the left
		&.left
			transform translate3d(-100%,0,0)