Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

how to build an api

  • Loading branch information...
commit f546a7e89340e97aa76b2c09e4b95db1782b35b7 1 parent fdddb7c
@jrf0110 jrf0110 authored
View
150 css/main.css
@@ -60,17 +60,19 @@ html, body {
h1 {
font-size: 1.7rem;
line-height: 2rem;
+ margin-bottom: 12px;
}
h2 {
font-size: 1.3rem;
line-height: 1.8rem;
}
p, ul, li, code {
- font-size: 0.8rem;
- line-height: 1.1rem;
+ font-size: 1rem;
+ line-height: 1.6rem;
}
ul {
- margin-left: 44px;
+ color: #555;
+ margin: 18px 0 12px 44px;
}
@@ -81,6 +83,15 @@ ul {
font-family: "bello-pro";
}
+.blue {
+ color: #009cff;
+}
+
+.gb-bg {
+ background-image: url('../img/gb-bg.png');
+ background-repeat: no-repeat;
+}
+
.blue-triangle-banner {
background:
url('../img/triangles-blue-up.png') top left repeat-x
@@ -96,18 +107,45 @@ ul {
.blue-triangle-banner.title-banner {
margin-top: 14px;
}
-.blue-triangle-banner.title-banner > .inner-bg{
+.blue-triangle-banner.title-banner > .inner-bg {
box-sizing: border-box;
padding-left: 14px;
}
.blue-triangle-banner.title-banner .title {
font-size: 1.5rem;
- font-weight: 300;
+ font-weight: 500;
+}
+.page .content {
+ color: #444;
+ text-shadow: 0 1px 0 #fff;
+}
+.page .content.with-topic {
+ position: relative;
+ padding-left: 100px;
+}
+.page .content .topic {
+ position: absolute;
+ left: -300px;
+ top: 50%;
+ margin-top: -120px;
+ width: 600px;
+ font-size: 2rem;
+ opacity: 0.4;
+ -webkit-transform: rotate(-90deg);
+}
+.page .title-wrapper .title,
+.blue-triangle-banner.title-banner .title {
+ margin-bottom: 0;
}
.step > .wrapper {
width: 100%;
}
+.sub-title {
+ font-size: 0.8rem;
+ margin-left: 8px;
+ opacity: 0.9;
+}
.cube {
background: url('../img/gray-texture-bg.png');
@@ -118,13 +156,16 @@ ul {
border-bottom: solid #ccc 1px;
-webkit-transition: box-shadow linear 0.2s;
}
+.cube.gb-bg {
+ background:
+ url('../img/gb-bg.png') no-repeat 110% 112%
+ , url('../img/gray-texture-bg.png');
+}
.cube.present {
box-shadow: 0 0 35px rgba(0,0,0, 0.25);
}
.cube .page .content {
margin: 14px;
- color: #444;
- text-shadow: 0 1px 0 #fff;
}
.cube .title-wrapper {
margin-bottom: 24px;
@@ -132,18 +173,16 @@ ul {
border-bottom: dotted 3px #aaa;
}
.cube .title {
- font-weight: 300;
+ font-weight: 500;
}
-.cube .sub-title {
- font-size: 0.8rem;
- margin-left: 8px;
- opacity: 0.9;
+.cube .blue-triangle-banner > .inner-bg {
+ position: relative;
+ box-sizing: border-box;
+ padding: 10px 14px;
}
.cube-1 .blue-triangle-banner > .inner-bg {
- position: relative;
- box-sizing: border-box;
- padding: 10px 0 10px 140px;
+ padding-left: 140px;
}
.cube-1 .title {
border-bottom: dashed 5px rgba(0, 0, 0, 0.1);
@@ -158,7 +197,8 @@ ul {
text-transform: uppercase;
opacity: 0.8;
}
-.cube-1 .arrow {
+.cube-1 .arrow,
+.cube-2 .arrow {
position: absolute;
bottom: 20px;
right: 14px;
@@ -169,8 +209,8 @@ ul {
0 -1px 0 rgba(0, 0, 0, 0.4)
, 0 1px 0 rgba(255, 255, 255, 0.4);
}
-.cube-1 .arrow.animate-arrow {
- -webkit-animation: arrow-bounce 1.4s infinite ease-in-out;
+.cube-1.present .arrow {
+ -webkit-animation: arrow-bounce 1.4s infinite ease-in-out 6s;
}
@-webkit-keyframes arrow-bounce {
@@ -185,8 +225,20 @@ ul {
}
}
+.cube-2 .sub-text {
+ line-height: 1.rem;
+}
+.cube-2 .sub-text > .atx {
+ font-size: 1.3rem;
+}
+
.what-are-apis {
width: 1000px;
+ padding-left: 80px;
+}
+.what-are-apis .next-direction {
+ text-align: right;
+ font-size: 72px;
}
.what-are-apis-1 .title-wrapper {
@@ -194,11 +246,12 @@ ul {
}
.what-are-apis-1 .title {
text-align: center;
+ margin-bottom: 0;
}
.what-are-apis-1 .title .what {
font-size: 6rem;
line-height: 6rem;
- margin-left: -40px;
+ margin: 0 0 18px -40px;
text-align: left;
}
.what-are-apis-1 .title .question-mark {
@@ -213,12 +266,44 @@ ul {
.what-are-apis-1 .title .apis {
font-size: 4rem;
display: inline-block;
- margin-left: 40px;
- opacity: 0.8;
+ margin: 0 10px 10px 30px;
+ opacity: 0.9;
+ color: #009cff;
+}
+.what-are-apis-1 .beers {
+ font-size: 1.3em;
+}
+.what-are-apis-1 .corner-dots {
+ height: 1px;
+ width: 1px;
+ position: absolute;
+ margin-top: -105px;
+ border-left: dotted 10px #999;
+ border-bottom: dotted 10px #999;
+ margin-left: 5px;
+ opacity: 0;
+ -webkit-transition:
+ opacity 0.8s linear 0.8s
+ , height 0.3s ease-in-out 0.8s
+ , width 0.5s ease-in-out 1.2s;
+}
+.what-are-apis-1.present .corner-dots {
+ height: 80px;
+ opacity: 1;
+ width: 241px;
}
.what-are-apis-1.present .title .apis {
-webkit-animation: apis-bulge 0.6s ease-in 0.1s;
}
+.what-are-apis-1 .next-direction {
+ margin: -52px 158px 0 0;
+ opacity: 0;
+ -webkit-transition: all 0.6s ease-in 1s;
+}
+.what-are-apis-1.present .next-direction {
+ opacity: 1;
+ -webkit-animation: blink 1.6s infinite ease-in-out 3s;
+}
@-webkit-keyframes apis-bulge {
0% {
-webkit-transform: scale(1);
@@ -229,6 +314,27 @@ ul {
}
100% {
-webkit-transform: scale(1);
- opacity: 0.8;
+ opacity: 0.9;
+ }
+}
+@-webkit-keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.4;
}
+ 100% {
+ opacity: 1;
+ }
+}
+
+
+.how-to-build {
+ width: 1000px;
+ opacity: 0;
+ -webkit-transition: opacity 1s linear;
+}
+.how-to-build.active {
+ opacity: 1;
}
View
BIN  img/gb-bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  img/like-a-boss.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
113 index.html
@@ -29,36 +29,30 @@ <h3 class="credentials">CTO, Goodybag</h3>
</div>
</section>
- <section id="intro-2" class="step cube cube-2 intro intro-2" data-x="300" data-y="50" data-z="-300" data-perspective="100" data-rotate-y="90" scale="2">
- <div class="page">
- <div class="blue-triangle-banner title-banner">
- <div class="inner-bg">
- <h1 class="title serif">Cube Page Title</h1>
- <p class="sub-title">Here is some sub-text</p>
- </div>
- </div>
- <div class="content">
- <h2>Header 2</h2>
- <p>here is some content blah blah blah balhb bal ablh</p>
- <ul>
- <li>Test</li>
- <li>Testing</li>
- <li>Testing AGain</li>
- <li>Another</li>
- <li>Test</li>
- </ul>
+ <section id="intro-2" class="step cube cube-2 intro intro-2 vcentered-box gb-bg" data-x="300" data-y="50" data-z="-300" data-perspective="100" data-rotate-y="90">
+ <div class="wrapper blue-triangle-banner">
+ <div class="inner-bg">
+ <h1 class="title serif">Goodybag</h1>
+ <p class="sub-text">We're a neato tech-startup in<br /><span class="script atx">Austin, TX</span></p>
+ <div class="icon-circle-arrow-down arrow"></div>
</div>
</div>
</section>
- <section id="intro-3" class="step cube cube-3 intro intro-3" data-x="0" data-y="350" data-z="-300" data-perspective="1000" data-rotate-x="-90" data-rotate-z="90">
+ <section id="intro-3" class="step cube cube-3 intro intro-3 gb-bg" data-x="0" data-y="350" data-z="-300" data-perspective="1000" data-rotate-x="-90" data-rotate-z="90">
<div class="page">
<div class="content">
<div class="title-wrapper">
- <h1 class="title serif">Page Title</h1>
- <p class="sub-title">This is a sub-title</p>
+ <h1 class="title serif">Goodybag</h1>
+ <p class="sub-title">We pretty much just write <code>{code}</code> all day.</p>
</div>
- <p>We're just doing' some testing in here. Nothing to see here except <code>var just = "testing";</code> yeah, but that's not much.</p>
+ <p><b>We of course wrote the<br /><em>Goodybag API</em> - which powers:</b></p>
+ <ul>
+ <li>Our Loyalty Platform</li>
+ <li>Our Consumer and Business web interface</li>
+ <li>Our Mobile Application</li>
+ <li>Tons of other stuff too</li>
+ </ul>
</div>
</div>
</section>
@@ -75,22 +69,83 @@ <h1 class="title serif">
<div class="what">What</div>
are <span class="apis">API's</span><span class="question-mark">?</span>
</h1>
+ <div class="corner-dots"></div>
+ </div>
+ <p>Hold on to your <strong class="script blue beers"><em>beers</em></strong>. We're about to find out.</p>
+ <div class="next-direction">
+ <span class="icon-circle-arrow-down"></span>
</div>
- <p>Hold on to your <em>beers</em>. We're about to find out.</p>
</div>
</div>
</section>
- <section id="what-are-apis-2" class="step what-are-apis what-are-apis-2" data-x="-800" data-y="3000" data-z="-2000" data-perspective="1000" data-rotate-x="0" data-rotate-z="90">
+ <section id="what-are-apis-2" class="step what-are-apis what-are-apis-2" data-x="-800" data-y="3000" data-z="-2000" data-perspective="1000" data-rotate-x="0" data-rotate-z="0">
+ <div class="page">
+ <div class="content with-topic">
+ <h2 class="topic">What are APIs?</h2>
+ <div class="title-wrapper">
+ <h1 class="title serif">APIs are the <strong class="blue">exposed</strong> pieces of functionality within a given system</h1>
+ </div>
+ <ul>
+ <li>Each function performs a single task</li>
+ <li>Set of functionality enabling products and services</li>
+ <li>For example, Twitter has an awesome API</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <section id="what-are-apis-3" class="step what-are-apis what-are-apis-3" data-x="-800" data-y="4200" data-z="-2000" data-perspective="1000" data-rotate-x="0" data-rotate-z="-90">
+ <div class="page">
+ <div class="content with-topic">
+ <h2 class="topic">What are APIs?</h2>
+ <div class="title-wrapper">
+ <h1 class="title serif">Why do I need an API?</h1>
+ </div>
+ <ul>
+ <li>Streamline functionality across multiple products (e.g. Mobile App, Admin Panel, Analytics Dashboard, etc.)</li>
+ <li>Separate back-end logic from the front-end interface</li>
+ <li>Consolidate a system's critical functional pieces</li>
+ <li>Modular application design</li>
+ <li>Makes <em>Unit Testing a breeze</em></li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <section id="what-are-apis-4" class="step what-are-apis what-are-apis-3" data-x="-1600" data-y="4200" data-z="-2000" data-perspective="1000" data-rotate-x="0" data-rotate-z="-90">
+ <div class="page">
+ <div class="content with-topic">
+ <h2 class="topic">What are APIs?</h2>
+ <div class="title-wrapper">
+ <h1 class="title serif">Enough, with the fancy talk, Lalit, let's dig in.</h1>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- ############## -->
+ <!-- ## EXAMPLES ## -->
+ <!-- ############## -->
+ <section id="how-to-build-1" class="step how-to-build how-to-build-1" data-x="-600" data-y="3000" data-z="-8000" data-perspective="1000" data-rotate-x="0" data-rotate-z="90">
<div class="page">
<div class="content">
<div class="title-wrapper">
- <h1 class="title serif">
- <div class="what">What</div>
- are <span class="apis">API's</span><span class="question-mark">?</span>
- </h1>
+ <h1 class="title serif">How to Build an API</h1>
+ <h2 class="sub-title">...Like a Boss</h2>
+ </div>
+ <div class="inline-columns">
+ <div class="column">
+ <ul>
+ <li><em>Lots</em> of planning</li>
+ <li></li>
+ <li></li>
+ </ul>
+ </div>
+ <div class="column">
+ <img src="img/like-a-boss.gif" />
+ </div>
</div>
- <p>Hold on to your <em>beers</em>. We're about to find out.</p>
</div>
</div>
</section>
View
11 js/app.js
@@ -2,12 +2,13 @@ var slides = impress();
slides.init();
var routes = {
- "everything": function(){
+ "everything": function(slide){
console.log("entering - everything");
+
}
, "intro-1": function(slide){
// Animate the arrow
- this.animateArrow = setTimeout(function(){ $(slide).find('.arrow').addClass('animate-arrow'); }, 4000);
+ // this.animateArrow = setTimeout(function(){ $(slide).find('.arrow').addClass('animate-arrow'); }, 6000);
}
}
, exitRoutes = {
@@ -16,14 +17,14 @@ var routes = {
}
, "intro-1": function(slide){
// Kill arrow animation
- clearTimeout(this.animateArrow);
- $(slide).find('.arrow').removeClass('animate-arrow');
+ // clearTimeout(this.animateArrow);
+ // $(slide).find('.arrow').removeClass('animate-arrow');
}
}, routeScope = {}; // shared scope between enter/exit routes
for (var key in routes) routeScope[key] = {};
$(document).on('impress:stepenter', function(e){
- routes.everything();
+ routes.everything(e.target, e);
var route = e.target.id;
if (routes.hasOwnProperty(route)) routes[route].call(routeScope[route], e.target, e);
});
Please sign in to comment.
Something went wrong with that request. Please try again.