modularis 0.0.1

data/docs/css/qunit.css

@@ -0,0 +1,235 @@
+/**
+ * QUnit v1.10.0 - A JavaScript Unit Testing Framework
+ *
+ * http://qunitjs.com
+ *
+ * Copyright 2012 jQuery Modularis and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+	padding: 0.5em 0 0.5em 1em;
+
+	color: #8699a4;
+	background-color: #0d3349;
+
+	font-size: 1.5em;
+	line-height: 1em;
+	font-weight: normal;
+
+	border-radius: 5px 5px 0 0;
+	-moz-border-radius: 5px 5px 0 0;
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #c2ccd1;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: #fff;
+}
+
+#qunit-testrunner-toolbar label {
+	display: inline-block;
+	padding: 0 .5em 0 .1em;
+}
+
+#qunit-banner {
+	height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+	padding: 0.5em 0 0.5em 2em;
+	color: #5E740B;
+	background-color: #eee;
+	overflow: hidden;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 0 0.5em 2.5em;
+	background-color: #2b81af;
+	color: #fff;
+	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+#qunit-modulefilter-container {
+	float: right;
+}
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-position: inside;
+}
+
+#qunit-tests li {
+	padding: 0.4em 0.5em 0.4em 2.5em;
+	border-bottom: 1px solid #fff;
+	list-style-position: inside;
+}
+
+#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
+	display: none;
+}
+
+#qunit-tests li strong {
+	cursor: pointer;
+}
+
+#qunit-tests li a {
+	padding: 0.5em;
+	color: #c2ccd1;
+	text-decoration: none;
+}
+#qunit-tests li a:hover,
+#qunit-tests li a:focus {
+	color: #000;
+}
+
+#qunit-tests ol {
+	margin-top: 0.5em;
+	padding: 0.5em;
+
+	background-color: #fff;
+
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: .2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.counts                       { color: black; }
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed                       { color: #710909; }
+
+#qunit-tests li li {
+	padding: 5px;
+	background-color: #fff;
+	border-bottom: none;
+	list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #3c510c;
+	background-color: #fff;
+	border-left: 10px solid #C6E746;
+}
+
+#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests .pass .test-name               { color: #366097; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #fff;
+	border-left: 10px solid #EE5757;
+	white-space: pre;
+}
+
+#qunit-tests > li:last-child {
+	border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+#qunit-tests .fail                          { color: #000000; background-color: #EE5757; }
+#qunit-tests .fail .test-name,
+#qunit-tests .fail .module-name             { color: #000000; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: green;   }
+
+#qunit-banner.qunit-fail                    { background-color: #EE5757; }
+
+
+/** Result */
+
+#qunit-testresult {
+	padding: 0.5em 0.5em 0.5em 2.5em;
+
+	color: #2b81af;
+	background-color: #D2E0E6;
+
+	border-bottom: 1px solid white;
+}
+#qunit-testresult .module-name {
+	font-weight: bold;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+	width: 1000px;
+	height: 1000px;
+}

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 Modularis 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 Modularis 4 support IE7 or IE8?</h4>
+    <p>Modularis 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, Modularis 4 better supports IE6-7 inasmuch as it provides a mobile but not broken experience. In IE8 Modularis 4 will provide less than Modularis 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/modularis-3.2.5.zip">Modularis 3.2</a>, which supports IE8. It's not mobile first but it's pretty good stuff.</p>
+
+    <h4>Can I use Modularis for something I'm going to sell?</h4>
+    <p>Yes! Modularis 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 Modularis itself is what you're selling.</p>
+
+    <h4>Is Modularis 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 Modularis'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 Modularis 3 docs?</h4>
+    <p>For those of you still working on Modularis 3 sites, or who need to continue supporting IE8 with Modularis, we keep the Modularis 3 docs available. <a href="../old-docs/f3">View the Modularis 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/modularis-framework-">Modularis Framework Google Group</a></h5>
+    <p>This is an active group of Modularis 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/modularis/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/modularisthemepile">@modularisthemepile</a></h5>
+    <p><a href="http://twitter.com/modularisthemepile">Follow us on Twitter</a> to hear about new sites using Modularis, 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:modularis@themepile.com">Get in Touch</a></h5>
+    <p>If you're totally stuck and need some help, shoot us <a href="mailto:modularis@themepile.com">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">Modularis 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,285 @@
+<% @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>Modularis 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 Modularis 3?</strong><br>
+      We're still supporting Modularis 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/modularis/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 Modularis?</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 Modularis 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 Modularis 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, Modularis'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://modularis.themepile.com/migration.php">customizer</a>.</h5>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>css</h5></dt>
+          <dd>Includes <code>modularis.css</code> and <code>modularis.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 Modularis 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 Modularis 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 Modularis 4! We no longer have any images included in the core of Modularis.</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 modularis gem import and commented portions you can pick and choose.) and <code>normalize.scss</code>. Override the Modularis styles within your app.scss 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 Modularis.</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>Modularis 4</title>
+
+  <link rel="stylesheet" href="css/normalize.css" />
+  <!-- If you are using CSS version, add this -->
+  <link rel="stylesheet" href="css/modularis.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/modularis/modularis.js"></script>
+  <script>
+  $(document).modularis();
+  </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>modularis.min.css</code> and <code>modularis.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 Modularis.</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 Modularis is and how it works, it's time to start a project! We've got two different ways for you to build projects with Modularis, 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://modularis.themepile.com/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>
+
+
+
+
+
+
+
+