EragonJ

• Precise Selector ( Loose when necessary )

EragonJ

$(document).ready(function(){
    trip.start();
});

EragonJ

var trip = new Trip([
   { 
       sel : $('#element1'),
       content : 'This is element 1'
   },
   {
       sel : $('#element2'),
       content : 'This is element 2'
   }
], options); // details about options are listed below

EragonJ

<script type="text/javascript" src="dist/trip.min.js"></script>

EragonJ

<link type="text/css" rel="stylesheet" href="dist/trip.min.css">

EragonJ

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

EragonJ

$(document).ready(function() {
    var trip = new Trip([
        { 
            sel : $('.step1'), 
            position : 'n', 
            content : 'Hi, I am Trip.js', 
            delay : 2000,
            callback : function(i) {
                console.log("step "+ i +" is finished");
            }

EragonJ

// reset all inline styles 

$("SEL").each(function() {
  $(this).get(0).style.cssText = "";
})

EragonJ

// desktop_page.jade

extends layout_desktop
block content
  p this is a page for desktop extending layout_desktop

EragonJ

Bootstrap Stuffs

• Themeforest - http://themeforest.net/
• Bootswatch - http://bootswatch.com/
• Wrapbootstrap - https://wrapbootstrap.com/

Icon fonts

• icomoon - http://icomoon.io/
• Font Awesome - http://fortawesome.github.com/Font-Awesome/