Permalink
Browse files

Initial commit.

  • Loading branch information...
mrsweaters committed Oct 12, 2011
0 parents commit acc6aeccbf3531a6642b7570919fc4add97e0690
Showing with 756 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +115 −0 demo/demo-style.css
  3. +113 −0 demo/demo.html
  4. +80 −0 global.css
  5. +151 −0 joyride-1.0.css
  6. +1 −0 jquery-1.6.2.min.js
  7. +295 −0 jquery.joyride-1.0.js
@@ -0,0 +1 @@
+.DS_Store
@@ -0,0 +1,115 @@
+/* These are just the demo styles and these can be removed and Orbit
+will still work like a champ (except any content block needs a background which
+our demo gets from this sheet) */
+
+/* --------------------------------------------------
+ Global Reset & Standards
+ -------------------------------------------------- */
+ html, body { margin: 0; padding: 0; }
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, section { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
+ table { border-collapse: collapse; border-spacing: 0; }
+ ol, ul { list-style: none; }
+
+
+
+/* --------------------------------------------------
+ :: Grid
+ -------------------------------------------------- */
+
+ .container { padding: 40px 20px 0 20px; }
+
+ .row { width: 100%; max-width: 940px; min-width: 727px; margin: 0 auto; }
+ /* To fix the grid into a certain size, set max-width to width */
+ .row .row { min-width: 0px; }
+
+ .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
+ .column:first-child, .columns:first-child { margin-left: 0px; }
+
+ .row .one.columns { width: 4.3%; }
+ .row .two.columns { width: 13%; }
+ .row .three.columns { width: 21.7%; }
+ .row .four.columns { width: 30.4%; }
+ .row .five.columns { width: 39.1%; }
+ .row .six.columns { width: 47.8%; }
+ .row .seven.columns { width: 56.5%; }
+ .row .eight.columns { width: 65.2%; }
+ .row .nine.columns { width: 73.9%; }
+ .row .ten.columns { width: 82.6%; }
+ .row .eleven.columns { width: 91.3%; }
+ .row .twelve.columns { width: 100%; }
+
+ .row .offset-by-one { margin-left: 8.7%; }
+ .row .offset-by-two { margin-left: 17.4%; }
+ .row .offset-by-three { margin-left: 26.1%; }
+ .row .offset-by-four { margin-left: 34.8%; }
+ .row .offset-by-five { margin-left: 43.5%; }
+ .row .offset-by-six { margin-left: 52.2%; }
+ .row .offset-by-seven { margin-left: 60.9%; }
+ .row .offset-by-eight { margin-left: 69.6%; }
+ .row .offset-by-nine { margin-left: 78.3%; }
+ .row .offset-by-ten { margin-left: 87%; }
+ .row .offset-by-eleven { margin-left: 95.7%; }
+
+ img, object, embed { max-width: 100%; }
+ img { -ms-interpolation-mode: bicubic; }
+
+
+ /* Clear the columns automagically */
+ .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+ .row:last-child:after { content: ""; }
+ * html .row, * html .clearfix { height: 1%; }
+ .row, .clearfix { display: inline-block; }
+ .row, .clearfix { display: block; }
+
+
+
+ body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; }
+
+ p {
+ line-height: 1.25;
+ }
+
+ h1 {
+ font-weight: bold;
+ color: #222;
+ font-size: 36px;
+ line-height: 1.5;
+ }
+
+ h2 {
+ font-weight: bold;
+ color: #222;
+ font-size: 28px;
+ line-height: 1.25;
+ }
+
+ h3 {
+ font-weight: bold;
+ color: #222;
+ font-size: 22px;
+ line-height: 1.25;
+ }
+
+ h4 {
+ font-weight: bold;
+ color: #222;
+ font-size: 18px;
+ line-height: 1.25;
+ }
+
+ h1 + a {
+ color: #00baff;
+ text-decoration: none;
+ font-weight: normal;
+ font-size: 20px;
+ }
+
+ a:hover { text-decoration: underline; }
+
+ hr {
+ margin: 20px 0;
+ border: solid 1px #ccc;
+ border-width: 1px 0 0 0;
+ }
+
+
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+
+
+
+<!--
+ * Markup for jQuery Joyride Plugin 1.0
+ * www.ZURB.com/playground
+ * Copyright 2011, ZURB
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ -->
+
+
+
+ <head>
+ <meta charset="utf-8" />
+ <title>Joyride Demo</title>
+
+ <!-- Attach our CSS -->
+ <link rel="stylesheet" href="../joyride-1.0.css">
+ <link rel="stylesheet" href="demo-style.css">
+
+ <!-- Attach necessary JS -->
+ <script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
+ <script type="text/javascript" src="../jquery.joyride-1.0.js"></script>
+
+ </head>
+ <body>
+
+ <div class="container">
+ <div class="row">
+ <div class="twelve columns">
+ <h1>ZURB's Joyride Feature Tour Plugin</h1>
+ <a href="http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin">View Docs + Playground for Joyride</a>
+
+ <hr>
+ </div>
+ </div>
+
+ <br><br>
+
+ <div class="row">
+ <div class="six columns">
+ <h2 id="numero1">Point Out Those New Features!</h2>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+ <div class="six columns">
+ <img id="numero3" src="http://placehold.it/430x200">
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="twelve columns">
+ <h3>Get the Most Out of Your App!</h3>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="four columns">
+ <img src="http://placehold.it/280x120">
+ </div>
+ <div class="eight columns">
+ <h3 id="numero2">Customize Each Stop Along the Way</h3>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ <div class="row">
+ <div class="six columns">
+ <h4>Make Every Click Count</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
+ </div>
+ <div class="six columns">
+ <img src="http://placehold.it/430x200">
+ </div>
+ </div>
+
+ <br><br><br><br>
+
+ </div>
+ <!-- Tip Content -->
+ <ol id="joyRideTipContent">
+ <li data-id="numero1" data-text="Next" class="custom">
+ <h2>Stop #1</h2>
+ <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
+ </li>
+ <li data-id="numero2" data-text="Next">
+ <h2>Stop #2</h2>
+ <p>Get the details right by styling Joyride with a custom stylesheet!</p>
+ </li>
+ <li data-id="numero3" data-text="Close">
+ <h2>Stop #3</h2>
+ <p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
+ </li>
+ </ol>
+
+ <!-- Run the plugin -->
+ <script type="text/javascript">
+ $(window).load(function() {
+ $(this).joyride();
+ });
+ </script>
+
+
+ </body>
+</html>
@@ -0,0 +1,80 @@
+/* Arfully Masterminded by ZURB */
+
+/* --------------------------------------------------
+ Table of Contents
+-----------------------------------------------------
+:: Reset & Standards
+:: Typography
+:: Links
+:: Lists
+:: Mobile-Friendly Grid
+:: Tables
+:: Misc
+:: Block Grids
+:: Mobile Visbility
+*/
+
+
+ body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; }
+
+
+/* --------------------------------------------------
+ :: Typography
+ -------------------------------------------------- */
+
+ em { font-style: italic; line-height: inherit; }
+ strong { font-weight: bold; line-height: inherit; }
+ small { font-size: 0.8rem; line-height: inherit; }
+
+
+
+
+/* --------------------------------------------------
+ :: Grid
+ -------------------------------------------------- */
+
+ .container { padding: 0px 20px; }
+
+ .row { width: 100%; max-width: 940px; min-width: 727px; margin: 0 auto; }
+ /* To fix the grid into a certain size, set max-width to width */
+ .row .row { min-width: 0px; }
+
+ .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
+ .column:first-child, .columns:first-child { margin-left: 0px; }
+
+ .row .one.columns { width: 4.3%; }
+ .row .two.columns { width: 13%; }
+ .row .three.columns { width: 21.7%; }
+ .row .four.columns { width: 30.4%; }
+ .row .five.columns { width: 39.1%; }
+ .row .six.columns { width: 47.8%; }
+ .row .seven.columns { width: 56.5%; }
+ .row .eight.columns { width: 65.2%; }
+ .row .nine.columns { width: 73.9%; }
+ .row .ten.columns { width: 82.6%; }
+ .row .eleven.columns { width: 91.3%; }
+ .row .twelve.columns { width: 100%; }
+
+ .row .offset-by-one { margin-left: 8.7%; }
+ .row .offset-by-two { margin-left: 17.4%; }
+ .row .offset-by-three { margin-left: 26.1%; }
+ .row .offset-by-four { margin-left: 34.8%; }
+ .row .offset-by-five { margin-left: 43.5%; }
+ .row .offset-by-six { margin-left: 52.2%; }
+ .row .offset-by-seven { margin-left: 60.9%; }
+ .row .offset-by-eight { margin-left: 69.6%; }
+ .row .offset-by-nine { margin-left: 78.3%; }
+ .row .offset-by-ten { margin-left: 87%; }
+ .row .offset-by-eleven { margin-left: 95.7%; }
+
+ img, object, embed { max-width: 100%; }
+ img { -ms-interpolation-mode: bicubic; }
+
+
+ /* Clear the columns automagically */
+ .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+ .row:last-child:after { content: ""; }
+ * html .row, * html .clearfix { height: 1%; }
+ .row, .clearfix { display: inline-block; }
+ .row, .clearfix { display: block; }
+
Oops, something went wrong.

0 comments on commit acc6aec

Please sign in to comment.