Added a base Foundation install

zurb · Aug 17, 2012 · 924774c · 924774c
1 parent d556e75
commit 924774c
Show file tree

Hide file tree

Showing 31 changed files with 13,274 additions and 0 deletions.
diff --git a/humans.txt b/humans.txt
@@ -0,0 +1,8 @@
+/* Foundation was made by ZURB, an interaction design and design strategy firm in Campbell, CA */
+/* zurb.com */
+/* humanstxt.org */
+
+/* SITE */
+  Standards: HTML5, CSS3
+  Components: jQuery, Orbit, Reveal
+  Software: Coda, Textmate, Git
diff --git a/images/foundation/orbit/bullets.jpg b/images/foundation/orbit/bullets.jpg
diff --git a/images/foundation/orbit/left-arrow-small.png b/images/foundation/orbit/left-arrow-small.png
diff --git a/images/foundation/orbit/left-arrow.png b/images/foundation/orbit/left-arrow.png
diff --git a/images/foundation/orbit/loading.gif b/images/foundation/orbit/loading.gif
diff --git a/images/foundation/orbit/mask-black.png b/images/foundation/orbit/mask-black.png
diff --git a/images/foundation/orbit/pause-black.png b/images/foundation/orbit/pause-black.png
diff --git a/images/foundation/orbit/right-arrow-small.png b/images/foundation/orbit/right-arrow-small.png
diff --git a/images/foundation/orbit/right-arrow.png b/images/foundation/orbit/right-arrow.png
diff --git a/images/foundation/orbit/rotator-black.png b/images/foundation/orbit/rotator-black.png
diff --git a/images/foundation/orbit/timer-black.png b/images/foundation/orbit/timer-black.png
diff --git a/index.html b/index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8" />
+
+  <!-- Set the viewport width to device width for mobile -->
+  <meta name="viewport" content="width=device-width" />
+
+  <title>Welcome to Foundation</title>
+
+  <!-- Included CSS Files (Uncompressed) -->
+  <!--
+  <link rel="stylesheet" href="stylesheets/foundation.css">
+  -->
+
+  <!-- Included CSS Files (Compressed) -->
+  <link rel="stylesheet" href="stylesheets/foundation.min.css">
+  <link rel="stylesheet" href="stylesheets/app.css">
+
+  <script src="javascripts/modernizr.foundation.js"></script>
+
+  <!-- IE Fix for HTML5 Tags -->
+  <!--[if lt IE 9]>
+    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+</head>
+<body>
+
+  <div class="row">
+    <div class="twelve columns">
+      <h2>Welcome to Foundation</h2>
+      <p>This is version <strong>3.0.9</strong> generated on August 15, 2012.</p>
+      <hr />
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="eight columns">
+      <h3>The Grid</h3>
+
+      <!-- Grid Example -->
+      <div class="row">
+        <div class="twelve columns">
+          <div class="panel">
+            <p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="six columns">
+          <div class="panel">
+            <p>Six columns</p>
+          </div>
+        </div>
+        <div class="six columns">
+          <div class="panel">
+            <p>Six columns</p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="four columns">
+          <div class="panel">
+            <p>Four columns</p>
+          </div>
+        </div>
+        <div class="four columns">
+          <div class="panel">
+            <p>Four columns</p>
+          </div>
+        </div>
+        <div class="four columns">
+          <div class="panel">
+            <p>Four columns</p>
+          </div>
+        </div>
+      </div>
+
+
+      <h3>Tabs</h3>
+      <dl class="tabs">
+        <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
+        <dd><a href="#simple2">Simple Tab 2</a></dd>
+        <dd><a href="#simple3">Simple Tab 3</a></dd>
+      </dl>
+
+      <ul class="tabs-content">
+        <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
+        <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
+        <li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
+      </ul>
+
+
+
+      <h3>Buttons</h3>
+
+      <div class="row">
+        <div class="six columns">
+          <p><a href="#" class="small button">Small Button</a></p>
+          <p><a href="#" class="button">Medium Button</a></p>
+          <p><a href="#" class="large button">Large Button</a></p>
+        </div>
+        <div class="six columns">
+          <p><a href="#" class="small alert button">Small Alert Button</a></p>
+          <p><a href="#" class="success button">Medium Success Button</a></p>
+          <p><a href="#" class="large secondary button">Large Secondary Button</a></p>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="four columns">
+      <h4>Getting Started</h4>
+      <p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+
+      <h4>Other Resources</h4>
+      <p>Once you've exhausted the fun in this document, you should check out:</p>
+      <ul class="disc">
+        <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
+        <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
+        <li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
+      </ul>
+    </div>
+  </div>
+
+
+  <div class="row">
+    <div class="twelve columns">
+      <h3>Orbit</h3>
+      <div id="featured">
+        <img src="http://placehold.it/1200x250&text=Slide_1" alt="slide image">
+        <img src="http://placehold.it/1200x250&text=Slide_2" alt="slide image">
+        <img src="http://placehold.it/1200x250&text=Slide_3" alt="slide image">
+      </div>
+    </div>
+  </div>
+
+
+
+  <div class="row">
+    <div class="twelve columns">
+      <h3>Reveal</h3>
+      <p><a href="#" data-reveal-id="exampleModal" class="button">Example modal</a></p>
+    </div>
+  </div>
+
+  <div id="exampleModal" class="reveal-modal">
+    <h2>This is a modal.</h2>
+    <p>
+      Reveal makes these very easy to summon and dismiss. The close button is simple an anchor with a unicode 
+      character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will 
+      also dismiss it.
+    </p>
+    <a class="close-reveal-modal">×</a>
+  </div>
+
+
+  <!-- Included JS Files (Uncompressed) -->
+  <!--
+  
+  <script src="javascripts/modernizr.foundation.js"></script>
+  
+  <script src="javascripts/jquery.js"></script>
+  
+  <script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>
+  
+  <script src="javascripts/jquery.foundation.reveal.js"></script>
+  
+  <script src="javascripts/jquery.foundation.orbit.js"></script>
+  
+  <script src="javascripts/jquery.foundation.navigation.js"></script>
+  
+  <script src="javascripts/jquery.foundation.buttons.js"></script>
+  
+  <script src="javascripts/jquery.foundation.tabs.js"></script>
+  
+  <script src="javascripts/jquery.foundation.forms.js"></script>
+  
+  <script src="javascripts/jquery.foundation.tooltips.js"></script>
+  
+  <script src="javascripts/jquery.foundation.accordion.js"></script>
+  
+  <script src="javascripts/jquery.placeholder.js"></script>
+  
+  <script src="javascripts/jquery.foundation.alerts.js"></script>
+  
+  -->
+
+  <!-- Included JS Files (Compressed) -->
+  <script src="javascripts/foundation.min.js"></script>
+
+  <!-- Initialize JS Plugins -->
+  <script src="javascripts/app.js"></script>
+</body>
+</html>
diff --git a/javascripts/app.js b/javascripts/app.js
@@ -0,0 +1,40 @@
+(function($){  
+  $(function(){
+    $(document).foundationMediaQueryViewer();
+
+    $(document).foundationAlerts();
+    $(document).foundationAccordion();
+    $(document).tooltips();
+    $('input, textarea').placeholder();
+
+
+
+    $(document).foundationButtons();
+
+
+
+    $(document).foundationNavigation();
+
+
+
+    $(document).foundationCustomForms();
+
+
+
+
+      $(document).foundationTabs({callback:$.foundation.customForms.appendCustomMarkup});
+
+
+
+
+    $("#featured").orbit();
+
+
+    // UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
+    // $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'left'});
+    // $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'left'});
+    // $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'left'});
+    // $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'left'});
+  });
+
+})(jQuery);
diff --git a/javascripts/foundation.min.js b/javascripts/foundation.min.js
diff --git a/javascripts/jquery.foundation.accordion.js b/javascripts/jquery.foundation.accordion.js
@@ -0,0 +1,15 @@
+(function ($){
+
+  $.fn.foundationAccordion = function (options) {
+
+    $(document).on('click.fndtn', '.accordion li', function () {
+      var flyout = $(this).children('.content').first();
+      $('.accordion .content').not(flyout).hide().parent('li').removeClass('active');
+      flyout.show(0, function () {
+        flyout.parent('li').addClass('active');
+      });
+    });
+
+  };
+
+})( jQuery );
diff --git a/javascripts/jquery.foundation.alerts.js b/javascripts/jquery.foundation.alerts.js
@@ -0,0 +1,19 @@
+(function ($) {
+
+  $.fn.foundationAlerts = function (options) {
+    var settings = $.extend({
+      callback: $.noop
+    }, options);
+
+    $(document).on("click", ".alert-box a.close", function (event) {
+      event.preventDefault();
+      $(this).closest(".alert-box").fadeOut(function (event) {
+        $(this).remove();
+        // Do something else after the alert closes
+        settings.callback();
+      });
+    });
+
+  };
+
+})(jQuery);
diff --git a/javascripts/jquery.foundation.buttons.js b/javascripts/jquery.foundation.buttons.js
@@ -0,0 +1,49 @@
+(function ($) {
+
+  $.fn.foundationButtons = function(options) {
+    // Prevent event propagation on disabled buttons
+    $(document).on('click.fndtn', '.button.disabled', function (e) {
+      e.preventDefault();
+    });
+
+    $('.button.dropdown > ul', this).addClass('no-hover');
+
+    $(document).on('click.fndtn', '.button.dropdown, .button.dropdown.split span', function (e) {
+      // Stops further propagation of the event up the DOM tree when clicked on the button.
+      // Events fired by its descendants are not being blocked.
+      if (e.target === this) {
+        e.stopPropagation();
+      }
+    });
+    $(document).on('click.fndtn', '.button.dropdown.split span', function (e) {
+      e.preventDefault();
+      $('.button.dropdown', this).not($(this).parent()).children('ul').removeClass('show-dropdown');
+      $(this).siblings('ul').toggleClass('show-dropdown');
+    });
+    $(document).on('click.fndtn', '.button.dropdown:not(.split)', function (e) {
+      $('.button.dropdown', this).not(this).children('ul').removeClass('show-dropdown');
+      $(this).children('ul').toggleClass('show-dropdown');
+    });
+    $(document).on('click.fndtn', 'body, html', function () {
+      $('.button.dropdown ul').removeClass('show-dropdown');
+    });
+
+    // Positioning the Flyout List
+    var normalButtonHeight  = $('.button.dropdown:not(.large):not(.small):not(.tiny)', this).outerHeight() - 1,
+        largeButtonHeight   = $('.button.large.dropdown', this).outerHeight() - 1,
+        smallButtonHeight   = $('.button.small.dropdown', this).outerHeight() - 1,
+        tinyButtonHeight    = $('.button.tiny.dropdown', this).outerHeight() - 1;
+
+    $('.button.dropdown:not(.large):not(.small):not(.tiny) > ul', this).css('top', normalButtonHeight);
+    $('.button.dropdown.large > ul', this).css('top', largeButtonHeight);
+    $('.button.dropdown.small > ul', this).css('top', smallButtonHeight);
+    $('.button.dropdown.tiny > ul', this).css('top', tinyButtonHeight);
+
+    $('.button.dropdown.up:not(.large):not(.small):not(.tiny) > ul', this).css('top', 'auto').css('bottom', normalButtonHeight - 2);
+    $('.button.dropdown.up.large > ul', this).css('top', 'auto').css('bottom', largeButtonHeight - 2);
+    $('.button.dropdown.up.small > ul', this).css('top', 'auto').css('bottom', smallButtonHeight - 2);
+    $('.button.dropdown.up.tiny > ul', this).css('top', 'auto').css('bottom', tinyButtonHeight - 2);
+
+  };
+
+})( jQuery );