themepile-abstractio 1.0.4 → 4.1.7

data/docs/faq.html.erb

@@ -0,0 +1,63 @@
+<% @page_title = "faq" %>
+
+<div class="row">
+
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "FAQ" %>
+    <h2><%= @page_title %></h2>
+
+    <h4 class="subheader">We hear a lot of questions from people using Abstractio and realized that a lot of the same ones were being asked. We put together this list of FAQs to help you find answers to common questions.</h4>
+
+    <h4>Why doesn't Abstractio 4 support IE7 or IE8?</h4>
+    <p>Abstractio 4 is mobile-first, meaning it relies on media queries to layer in more complex layouts and components. Browsers or devices that don't support media queries will be restricted to a simple, single-column layout. In some ways, Abstractio 4 better supports IE6-7 inasmuch as it provides a mobile but not broken experience. In IE8 Abstractio 4 will provide less than Abstractio 3, but with IE8's market share in such steep decline we thought this was the right time.</p>
+
+    <p>If IE8 support is important for your users / customers, you can use <a href="../files/abstractio-3.2.5.zip">Abstractio 3.2</a>, which supports IE8. It's not mobile first but it's pretty good stuff.</p>
+
+    <h4>Can I use Abstractio for something I'm going to sell?</h4>
+    <p>Yes! Abstractio is licensed under the MIT open source license, meaning you can do almost anything with it. The only thing you can't do is imply that Abstractio itself is what you're selling.</p>
+
+    <h4>Is Abstractio tested on [some other device or browser]?</h4>
+    <p>We try and be comprehensive in our testing, but there are thousands of devices so it's often just not feasible. We'd love to hear about Abstractio's behaviour on other devices, but the list above is what we test each release on. If your browser or device is not listed your results may vary.</p>
+
+    <h4>Where can I find the Abstractio 3 docs?</h4>
+    <p>For those of you still working on Abstractio 3 sites, or who need to continue supporting IE8 with Abstractio, we keep the Abstractio 3 docs available. <a href="../old-docs/f3">View the Abstractio 3 Docs &rarr;</a></p>
+
+    <hr>
+
+    <h2>Getting Help</h2>
+    <h5 class="subheader">If the documentation and questions above aren't enough, there are several avenues of support available for you to pursue.</h5>
+
+    <h5><a href="https://groups.google.com/forum/?fromgroups#!forum/abstractio-framework-">Abstractio Framework Google Group</a></h5>
+    <p>This is an active group of Abstractio users who can answer questions about implementation or approach. If you aren't sure how to do something, or something isn't working like you'd expect, reach out here.</p>
+
+    <h5><a href="http://github.com/themepile/abstractio/issues">Github Issues</a></h5>
+    <p>If you've found a bug in the framework (or think you have) you can file it here. We try and address these as part of ongoing development. Please use this only for bugs or things that seem incorrect, support requests will not be addressed quickly here.</p>
+
+    <h5><a href="http://twitter.com/abstractiothemepile">@abstractiothemepile</a></h5>
+    <p><a href="http://twitter.com/abstractiothemepile">Follow us on Twitter</a> to hear about new sites using Abstractio, code examples, playground pieces from ZURB and more. You can also ping us with quick questions or other support issues, we're usually pretty speedy.</p>
+
+    <h5><a href="mailto:abstractio@themepile.co.uk">Get in Touch</a></h5>
+    <p>If you're totally stuck and need some help, shoot us <a href="mailto:abstractio@themepile.co.uk">an email</a> and we'll typically get back within a day or two.</p>
+
+    <hr>
+
+    <div class="panel">
+      <h3>What's Changed Recently?</h3>
+      <h5 class="subheader">Abstractio is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be. Take a look at our changelog to know what's recently been changed or updated.</h5>
+      <a class="button" href="support.html">Browser Support &raquo;</a> <a class="secondary button" href="changelog.html">See the Version Changelog &raquo;</a>
+    </div>
+
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/index.html.erb

@@ -0,0 +1,298 @@
+<% @side_nav = "using" %>
+<% @page_title = "Getting Started" %>
+<div class="row">
+   <div class="large-9 push-3 columns">
+
+    <h2>Getting Started</h2>
+    <h5 class="subheader">Whether you are using Scss or CSS, we've made it easy to start a project so that you can help take over the world one responsive site at a time.</h5>
+    <p>Abstractio is developed in <a href="http://www.sass-lang.com">Sass</a>, which is powerful CSS pre-processor that helps you write cleaner, more organized, CSS that you can more easily maintain over time without the typical headaches of vanilla CSS. On top of our minimal styling, we've written powerful Javascript plugins that will make useful interactions easier to implement across screen sizes.</p>
+
+    <div class="" style="font-size: 14px;">
+      <p><strong>Looking for Abstractio 3?</strong><br>
+      We're still supporting Abstractio 3 for those who don't want to take the leap into the future with us. You can view the docs, download a package or visit the Github page.</p>
+      <ul class="button-group">
+        <li><a class="small button secondary" style="margin-bottom: 0;" href="../download-f3.php">Download</a></li>
+        <li><a class="small button secondary" style="margin-bottom: 0;" href="../old-docs/f3">Docs</a></li>
+        <li><a class="small button secondary" style="margin-bottom: 0;" href="https://github.com/themepile/abstractio/tree/3-2-stable">Github</a></li>
+      </ul>
+
+      <hr>
+
+      <p><strong>Ready to Move to 4?</strong><br>
+      We've got you covered with a migration guide that explains the differences.</p>
+
+      <a class="small button secondary" href="../migration.php">Migration Guide</a>
+    </div>
+
+    <hr>
+
+    <h3>What comes with Abstractio?</h3>
+    <h5 class="subheader">We've got you covered when it comes to useful features and we've made it easy to take out what you don't need. Here's what you'll get when you create a project using our Sass version or the default CSS version:</h5>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/grid.html">The Grid</a></h5></dt>
+          <dd>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/type.html">Typography</a></h5></dt>
+          <dd>Our type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/buttons.html">Buttons</a></h5></dt>
+          <dd>Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/top-bar.html">Navigation</a></h5></dt>
+          <dd>People have to get around. Navigation styles in Abstractio include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/forms.html">Forms</a></h5></dt>
+          <dd>Built with the Abstractio Grid, you can create simple or complicated forms quickly and easily&mdash; validation states, custom select, radio buttons and more.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/panels.html">UI Elements</a></h5></dt>
+          <dd>We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/section.html">Section</a></h5></dt>
+          <dd>Whether it's entire pages or simple tabbed content, Abstractio's tabs get the job done. Not only stylish, but interactive out of the box.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/orbit.html">Orbit</a></h5></dt>
+          <dd>A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/reveal.html">Reveal</a></h5></dt>
+          <dd>You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/clearing.html">Clearing</a></h5></dt>
+          <dd>Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/magellan.html">Magellan</a></h5></dt>
+          <dd>A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/joyride.html">Joyride</a></h5></dt>
+          <dd>This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our Scss variables.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/tooltips.html">Tooltips</a></h5></dt>
+          <dd>Tooltips lets you add quick hover or tap tooltips to elements.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns end">
+        <dl>
+          <dt><h5><a href="components/dropdown.html">Dropdown</a></h5></dt>
+          <dd>We've made a dropdown plugin that makes it easy to attach a popover dropdown to any element on the page.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <hr>
+
+    <h3>How is a project structured?</h3>
+    <h5 class="subheader">We follow common patterns for directory structure that are logical and easily maintained. Below is an explanation of each file you'll get when you create a project using our gem or download via our <a href="http://abstractio.themepile.co.uk/migration.php">customizer</a>.</h5>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>css</h5></dt>
+          <dd>Includes <code>abstractio.css</code> and <code>abstractio.min.css</code> so you can choose which to use. You can add <code>app.css</code> or any other stylesheet to use for custom styles that will sit on top of the Abstractio core as overrides.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>js</h5></dt>
+          <dd>All of our plugins and the necessary JavaScript to make Abstractio work properly. <strong>All JS is initiated by default</strong>.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>img</h5></dt>
+          <dd>This directory actually comes empty in Abstractio 4! We no longer have any images included in the core of Abstractio.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>index.html</h5></dt>
+          <dd>A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>humans.txt</h5></dt>
+          <dd>A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>robots.txt</h5></dt>
+          <dd>Give instructions to web robots so search engines know what to do when they crawl your site for content.</dd>
+        </dl>
+      </div>
+    </div>
+    <br>
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="panel">
+          <h6 class="subheader"><strong>Using the Gem?</strong> You'll see a couple extra pieces in your project upon creation. These are:</h6>
+          <dl>
+            <dt>scss/</dt>
+            <dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the abstractio gem import and commented portions you can pick and choose). Override the Abstractio styles within your <code>app.scss</code> file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Abstractio.</dd>
+            <dt></i>config.rb</dt>
+            <dd>This file is used by <a href="http://compass-style.org">Compass</a> to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.</dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <hr>
+
+    <h3 id="basicHTMLMarkup">HTML Page Markup</h3>
+    <h5 class="subheader">Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:</h5>
+
+<%= code_example '
+<!DOCTYPE html>
+<!--[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" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Abstractio 4</title>
+
+  <link rel="stylesheet" href="css/normalize.css" />
+  <!-- If you are using CSS version, add this -->
+  <link rel="stylesheet" href="css/abstractio.css" />
+  <link rel="stylesheet" href="css/app.css" />
+
+  <script src="js/vendor/custom.modernizr.js"></script>
+
+</head>
+<body>
+
+  <!-- body content here -->
+
+  <script>
+  document.write(\'<script src=\' +
+  (\'__proto__\' in {} ? \'js/vendor/zepto\' : \'js/vendor/jquery\') +
+  \'.js><\/script>\')
+  </script>
+  <script src="js/abstractio/abstractio.js"></script>
+  <script src="js/abstractio/abstractio.alerts.js"></script>
+  <script src="js/abstractio/abstractio.clearing.js"></script>
+  <script src="js/abstractio/abstractio.cookie.js"></script>
+  <script src="js/abstractio/abstractio.dropdown.js"></script>
+  <script src="js/abstractio/abstractio.forms.js"></script>
+  <script src="js/abstractio/abstractio.joyride.js"></script>
+  <script src="js/abstractio/abstractio.magellan.js"></script>
+  <script src="js/abstractio/abstractio.orbit.js"></script>
+  <script src="js/abstractio/abstractio.placeholder.js"></script>
+  <script src="js/abstractio/abstractio.reveal.js"></script>
+  <script src="js/abstractio/abstractio.section.js"></script>
+  <script src="js/abstractio/abstractio.tooltips.js"></script>
+  <script src="js/abstractio/abstractio.topbar.js"></script>
+  <script>
+  $(document).abstractio();
+  </script>
+</body>
+</html>
+
+', :html %>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>Doctype &amp; Head</h5></dt>
+          <dd>We use the HTML doctype declaration to tell the browser what to expect. From there we've used a <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">technique by Paul Irish</a> that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.</dd>
+          <dt>Meta Viewport tag</dt>
+          <dd>This is used to make sure smaller devices use the device width as the viewport width.</dd>
+          <dt>Title Tag</dt>
+          <dd>This one is pretty self-explanatory. You're setting the name of the current page with this value.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>CSS &amp; Modernizr</h5></dt>
+          <dd>The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.</dd>
+          <dt>CSS</dt>
+          <dd>We include <code>abstractio.min.css</code> and <code>abstractio.css</code>. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt>Modernizr</dt>
+          <dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Abstractio.</dd>
+          <dt><h5>Javascripts</h5></dt>
+          <dd>Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="panel">
+      <h3>Get going!</h3>
+      <h5 class="subheader">Now that you understand the gist of what Abstractio is and how it works, it's time to start a project! We've got two different ways for you to build projects with Abstractio, a Compass Gem using Scss or a with plain CSS.</h5>
+      <a href="./sass.html" class="button">Using the Gem</a></li>
+      <a href="http://abstractio.themepile.co.uk/migration.php" class="button secondary">Quickstart with CSS</a></li>
+    </div>
+
+
+
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/javascript.html.erb

@@ -0,0 +1,138 @@
+<% @side_nav = "using" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+    <% @page_title = "Javascript" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Abstractio 4 streamlines the implementation of the Abstractio plugins by combining them all into a single plugin under the <code>$.fn.abstractio()</code> Zepto/jQuery namespace.</h4>
+        <hr>
+
+        <h2>Installation</h2>
+        <p>Abstractio JavaScript was designed to work with <a href="http://zeptojs.com/" title="Zepto Docs">Zepto</a> and <a href="http://jquery.com/" title="jQuery Docs">jQuery</a> right out of the gate. Zepto is not supported by all browsers, so as suggested in the Zepto documentation, you should test for compatibility and load Zepto or jQuery as necessary.</p>
+
+        <h5>Include Libraries</h5>
+        <p>In the <code>head</code> section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements for older browsers as well as detection for mobile devices.</p>
+
+<%= code_example '
+<script src="/js/custom.modernizr.js"></script>
+', :html %>
+
+        <p>Before the closing <code>body</code> tag, insert the following JavaScript.</p>
+
+<%= code_example "
+<!-- Check for Zepto support, load jQuery if necessary -->
+<script>
+  document.write('<script src=/js/vendor/'
+    + ('__proto__' in {} ? 'zepto' : 'jquery')
+    + '.js><\\\/script>');
+</script>
+", :html %>
+
+        <p>Then include either <code>abstractio.min.js</code>, which includes Abstractio Core and all JavaScript plugins or you can load them individually. The minified version is not available in the Compass version.</p>
+
+<%= code_example '
+<script src="/js/abstractio.min.js"></script>
+
+<!-- or individually -->
+
+<script src="/js/abstractio.js"></script>
+<script src="/js/abstractio.alerts.js"></script>
+<!-- ... -->
+<script src="/js/abstractio.dropdown.js"></script>
+<script src="/js/abstractio.section.js"></script>
+', :html %>
+
+        <h5>Initialize Abstractio</h5>
+        <p>After you have included the Abstractio JavaScript, just add a simple call to initialize all plugins on your page.</p>
+        <p>It is recommended that you initialize on document ready</p>
+
+<%= code_example '
+<script>
+  $(function(){
+    $(document).abstractio();
+  })
+</script>
+', :html %>
+
+        <p><strong>Note:</strong> We include tested versions of jQuery and Zepto in the Abstractio repo to get you started quickly. If you want to build your own version of Zepto, Abstractio employs the <i>event</i>, <i>fx_methods</i>, <i>assets</i>, <i>data</i>, <i>selector</i>, and <i>stack</i> modules.</p>
+
+        <hr>
+
+        <h2>Configuration</h2>
+
+        <p>Abstractio accepts a myriad of options for initialization. By default, calling <code>$('#scope').abstractio();</code> will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This will allow you to select specific plugins to start on your page, even if their source is included. You can take a look at the call here:</p>
+
+<%= code_example "
+$(document).abstractio('section', {deep_linking: true}, function (response) {
+  console.log(response.errors);
+});
+", :js %>
+
+        <p>The call will initialize the Section plugin on the page with deep linking enabled and pass back a response object with any errors that may have occurred.</p>
+
+        <p>You can initialize multiple libraries within the same call as well. Here are a few ways this can be done:</p>
+
+<%= code_example "
+$(document).abstractio('section dropdown alerts', {callback: myCallbackFunction}, function (response) {
+  console.log(response.errors);
+});
+
+// alternative, no configuration
+
+$(document).abstractio('section dropdown alerts', function (response) {
+  console.log(response.errors);
+});
+
+// alternative, all plugins, only callback
+
+$(document).abstractio(function (response) {
+  console.log(response.errors);
+});
+
+// alternative, only plugin, no config or callback
+
+$(document).abstractio('section');
+", :js %>
+
+        <p>Keep in mind, if you initialize multiple plugins at one time and pass a configuration object that object will get passed to all plugins that were initialized. So in the first example: section, dropdown, and alerts will all get passed the <code>myCallbackFunction</code> on initialization.</p>
+
+        <p>What if you wanted to pass the <code>myCallbackFunction</code> only to Section and still initialize the other plugins as well? You could do the following.</p>
+
+<%= code_example "
+$(document)
+  .abstractio('dropdown alerts')
+  .abstractio('section', {callback: myCallbackFunction});
+", :js %>
+
+        <hr>
+
+        <h2>Calling Internal Methods</h2>
+
+        <p>Abstractio 4 JavaScript allows you call call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, since they are not initialized on page load by default.</p>
+
+        <p>This will fire the <code>start</code> method on Joyride:</p>
+
+<%= code_example "
+$(document).abstractio('joyride', 'start');
+", :js %>
+
+        <h5>Unbind Events</h5>
+
+        <p>All plugins can be unbound from the DOM by firing the <code>off</code> event either on that plugin or globally to unbind all Abstractio events.</p>
+
+<%= code_example "
+$(document).abstractio('tooltips', 'off');
+
+// or globally
+
+$(document).abstractio('off');
+", :js %>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>