RubyGems - modularis - Versions diffs - 0.0.1 - Mend

modularis 0.0.1

Files changed (166) hide show

checksums.yaml +15 -0
data/.gitignore +24 -0
data/.idea/scopes/scope_settings.xml +5 -0
data/.rbenv-version +1 -0
data/CONTRIBUTING.md +53 -0
data/Gemfile +4 -0
data/Gemfile.lock +19 -0
data/Gruntfile.js +27 -0
data/LICENSE +22 -0
data/README.md +27 -0
data/Rakefile +2 -0
data/docs/CHANGELOG.md +260 -0
data/docs/Capfile +4 -0
data/docs/Gemfile +13 -0
data/docs/Gemfile.lock +45 -0
data/docs/Procfile +2 -0
data/docs/README.md +1 -0
data/docs/_sidebar-components.html.erb +115 -0
data/docs/_sidebar.html.erb +115 -0
data/docs/changelog.html.erb +33 -0
data/docs/compile.rb +34 -0
data/docs/components/alert-boxes.html.erb +204 -0
data/docs/components/block-grid.html.erb +132 -0
data/docs/components/breadcrumbs.html.erb +156 -0
data/docs/components/button-groups.html.erb +230 -0
data/docs/components/buttons.html.erb +222 -0
data/docs/components/clearing.html.erb +152 -0
data/docs/components/custom-forms.html.erb +309 -0
data/docs/components/dropdown-buttons.html.erb +235 -0
data/docs/components/dropdown.html.erb +188 -0
data/docs/components/flex-video.html.erb +95 -0
data/docs/components/forms.html.erb +477 -0
data/docs/components/global.html.erb +92 -0
data/docs/components/grid.html.erb +366 -0
data/docs/components/inline-lists.html.erb +91 -0
data/docs/components/joyride.html.erb +183 -0
data/docs/components/keystrokes.html.erb +76 -0
data/docs/components/kitchen-sink.html.erb +870 -0
data/docs/components/labels.html.erb +102 -0
data/docs/components/magellan.html.erb +86 -0
data/docs/components/orbit.html.erb +276 -0
data/docs/components/pagination.html.erb +183 -0
data/docs/components/panels.html.erb +123 -0
data/docs/components/pricing-tables.html.erb +156 -0
data/docs/components/progress-bars.html.erb +123 -0
data/docs/components/reveal.html.erb +162 -0
data/docs/components/section.html.erb +496 -0
data/docs/components/side-nav.html.erb +124 -0
data/docs/components/split-buttons.html.erb +220 -0
data/docs/components/sub-nav.html.erb +122 -0
data/docs/components/switch.html.erb +290 -0
data/docs/components/tables.html.erb +125 -0
data/docs/components/thumbnails.html.erb +89 -0
data/docs/components/tooltips.html.erb +75 -0
data/docs/components/top-bar.html.erb +283 -0
data/docs/components/type.html.erb +396 -0
data/docs/components/visibility.html.erb +110 -0
data/docs/config/deploy.rb +36 -0
data/docs/config.ru +12 -0
data/docs/controller.rb +53 -0
data/docs/css/_coderay.scss +116 -0
data/docs/css/_settings.scss +1 -0
data/docs/css/docs.scss +185 -0
data/docs/css/normalize.scss +396 -0
data/docs/css/qunit-composite.css +13 -0
data/docs/css/qunit.css +235 -0
data/docs/faq.html.erb +63 -0
data/docs/img/demos/demo1-th.jpg +0 -0
data/docs/img/demos/demo1.jpg +0 -0
data/docs/img/demos/demo2-th.jpg +0 -0
data/docs/img/demos/demo2.jpg +0 -0
data/docs/img/demos/demo3-th.jpg +0 -0
data/docs/img/demos/demo3.jpg +0 -0
data/docs/img/demos/demo4-th.jpg +0 -0
data/docs/img/demos/demo4.jpg +0 -0
data/docs/img/demos/demo5-th.jpg +0 -0
data/docs/img/demos/demo5.jpg +0 -0
data/docs/index.html.erb +285 -0
data/docs/javascript.html.erb +134 -0
data/docs/js/docs.js +3 -0
data/docs/js/qunit-composite.js +105 -0
data/docs/js/qunit.js +1977 -0
data/docs/js/tests/tabs/simple_tabs.html +57 -0
data/docs/js/tests/tabs/simple_tabs.js +54 -0
data/docs/js/tests/tooltips/tooltips.html +39 -0
data/docs/js/tests/tooltips/tooltips.js +11 -0
data/docs/layout.html.erb +128 -0
data/docs/media-queries.html.erb +96 -0
data/docs/rails.html.erb +76 -0
data/docs/rtl.html.erb +53 -0
data/docs/sass.html.erb +1295 -0
data/docs/support.html.erb +143 -0
data/docs/test/_test-scripts.html.erb +36 -0
data/docs/test/cards.html.erb +77 -0
data/docs/test/flexbox-grid.html.erb +68 -0
data/docs/test/flip-nav.html.erb +54 -0
data/docs/test/layout.html.erb +15 -0
data/docs/test/off-canvas1.html.erb +64 -0
data/docs/test/off-canvas2.html.erb +75 -0
data/docs/test/off-canvas3.html.erb +65 -0
data/docs/test_layout.html.erb +128 -0
data/js/modularis/index.js +18 -0
data/js/vendor/custom.modernizr.js +4 -0
data/js/vendor/jquery.js +9597 -0
data/js/vendor/zepto.js +1884 -0
data/lib/modularis/engine.rb +18 -0
data/lib/modularis/generators/USAGE +15 -0
data/lib/modularis/generators/install_generator.rb +54 -0
data/lib/modularis/generators/templates/application.html.erb +46 -0
data/lib/modularis/generators/templates/application.html.haml +31 -0
data/lib/modularis/generators/templates/application.html.slim +28 -0
data/lib/modularis/version.rb +3 -0
data/lib/modularis.rb +17 -0
data/modularis.gemspec +20 -0
data/package.json +15 -0
data/scss/compagecss/_variables.scss +1192 -0
data/scss/compagecss/components/_alert-boxes.scss +106 -0
data/scss/compagecss/components/_block-grid.scss +70 -0
data/scss/compagecss/components/_breadcrumbs.scss +124 -0
data/scss/compagecss/components/_button-groups.scss +88 -0
data/scss/compagecss/components/_buttons.scss +226 -0
data/scss/compagecss/components/_clearing.scss +217 -0
data/scss/compagecss/components/_custom-forms.scss +246 -0
data/scss/compagecss/components/_dropdown-buttons.scss +114 -0
data/scss/compagecss/components/_dropdown.scss +149 -0
data/scss/compagecss/components/_flex-video.scss +45 -0
data/scss/compagecss/components/_flexbox-grid.scss +225 -0
data/scss/compagecss/components/_flip.scss +105 -0
data/scss/compagecss/components/_forms.scss +361 -0
data/scss/compagecss/components/_global.scss +289 -0
data/scss/compagecss/components/_grid.scss +184 -0
data/scss/compagecss/components/_inline-lists.scss +52 -0
data/scss/compagecss/components/_joyride.scss +210 -0
data/scss/compagecss/components/_keystrokes.scss +56 -0
data/scss/compagecss/components/_labels.scss +84 -0
data/scss/compagecss/components/_magellan.scss +21 -0
data/scss/compagecss/components/_off-canvas.scss +86 -0
data/scss/compagecss/components/_orbit.scss +209 -0
data/scss/compagecss/components/_pagination.scss +99 -0
data/scss/compagecss/components/_panels.scss +76 -0
data/scss/compagecss/components/_pricing-tables.scss +130 -0
data/scss/compagecss/components/_progress-bars.scss +70 -0
data/scss/compagecss/components/_reveal.scss +131 -0
data/scss/compagecss/components/_section.scss +303 -0
data/scss/compagecss/components/_side-nav.scss +68 -0
data/scss/compagecss/components/_split-buttons.scss +166 -0
data/scss/compagecss/components/_sub-nav.scss +67 -0
data/scss/compagecss/components/_switch.scss +249 -0
data/scss/compagecss/components/_tables.scss +80 -0
data/scss/compagecss/components/_thumbs.scss +47 -0
data/scss/compagecss/components/_tooltips.scss +113 -0
data/scss/compagecss/components/_top-bar.scss +462 -0
data/scss/compagecss/components/_type.scss +422 -0
data/scss/compagecss/components/_visibility.scss +320 -0
data/scss/modularis.scss +49 -0
data/scss/normalize.scss +402 -0
data/templates/project/.gitignore +44 -0
data/templates/project/MIT-LICENSE.txt +20 -0
data/templates/project/config.rb +26 -0
data/templates/project/humans.txt +8 -0
data/templates/project/index.html +124 -0
data/templates/project/manifest.rb +44 -0
data/templates/project/robots.txt +4 -0
data/templates/project/scss/app.scss +48 -0
data/templates/upgrade/manifest.rb +34 -0
metadata +235 -0

data/docs/js/tests/tabs/simple_tabs.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[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>Modularis Tabs Testing</title>
+  <!-- Included CSS Files -->
+  <link rel="stylesheet" href="../../../stylesheets/styles.css">
+  <link rel="stylesheet" href="../../../stylesheets/qunit.css">
+  <script src="../../../../lib/assets/javascripts/modularis/modernizr.modularis.js"></script>
+</head>
+<body>
+  <div class="row">
+    <div class="twelve columns">
+      <div id="qunit"></div>
+      <div id="qunit-fixture">
+        <div class="row">
+          <div class="twelve columns">
+            <ul id="tabs1" class="tabs">
+              <li class="active"><a href="#simple1">Simple Tab 1</a></li>
+              <li><a href="#simple2">Simple Tab 2</a></li>
+              <li><a href="#simple3">Simple Tab 3</a></li>
+            </ul>
+            <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 only okay.</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Test Modularis Components Here -->
+  <!-- Included JS Files -->
+  <script src="../../../../lib/assets/javascripts/modularis/jquery.js"></script>
+  <script src="../../../../lib/assets/javascripts/modularis/modularis.js"></script>
+  <script src="../../../../lib/assets/javascripts/modularis/jquery.modularis.tabs.js"></script>
+  <script src="../../../javascripts/qunit.js"></script>
+  <script src="../../../javascripts/tests/tabs/simple_tabs.js"></script>
+</body>
+</html>

data/docs/js/tests/tabs/simple_tabs.js ADDED Viewed

@@ -0,0 +1,54 @@
+module('core', {
+  setup: function () {
+    this.$tabs = $('#tabs1');
+    $(document).modularis('tabs');
+  },
+  teardown: function () {
+  }
+});
+test('setup is correct', function () {
+  ok(this.$tabs.length == 1, 'one one set of tabs should be present');
+  strictEqual(this.$tabs.find('a:last').hasClass('active'), false, 'last tab should not be active');
+});
+test('click tab activates content pane', function () {
+  var $activeTab = this.$tabs.find('.active a'),
+      $activeTabContent = $($activeTab.attr('href') + 'Tab'),
+      $lastTab = this.$tabs.find('a:last'),
+      $lastTabContent = $($lastTab.attr('href') + 'Tab');
+  strictEqual($activeTabContent.hasClass('active'), true, 'active tab content should be active');
+  $lastTab.trigger('click');
+  strictEqual($activeTabContent.hasClass('active'), false, 'previous tab content should no longer be active');
+  strictEqual($lastTabContent.hasClass('active'), true, 'newly clicked tab should be active');
+});
+module('initialize with wrong scope', {
+  setup: function () {
+    this.$tabs = $('#tabs1');
+    $('#tabs2').modularis('tabs');
+  },
+  teardown: function () {
+  }
+});
+test('setup is correct', function () {
+  ok(this.$tabs.length == 1, 'one one set of tabs should be present');
+  strictEqual(this.$tabs.find('a:last').hasClass('active'), false, 'last tab should not be active');
+});
+test('click tab activates content pane', function () {
+  var $activeTab = this.$tabs.find('.active a'),
+      $activeTabContent = $($activeTab.attr('href') + 'Tab'),
+      $lastTab = this.$tabs.find('a:last'),
+      $lastTabContent = $($lastTab.attr('href') + 'Tab');
+  strictEqual($activeTabContent.hasClass('active'), true, 'active tab content should be active');
+  // triggering an event on an uninitialized tabs should have no effect
+  $lastTab.trigger('click');
+  strictEqual($activeTabContent.hasClass('active'), true, 'previous tab should still be active');
+  strictEqual($lastTabContent.hasClass('active'), false, 'newly clicked tab should be NOT active');
+});

data/docs/js/tests/tooltips/tooltips.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[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>Modularis Tooltips Testing</title>
+  <!-- Included CSS Files -->
+  <link rel="stylesheet" href="../../../stylesheets/styles.css">
+  <link rel="stylesheet" href="../../../stylesheets/qunit.css">
+  <script src="../../../../lib/assets/javascripts/modularis/modernizr.modularis.js"></script>
+</head>
+<body>
+  <div class="row">
+    <div class="twelve columns">
+      <div id="qunit"></div>
+      <div id="qunit-fixture">
+        <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">Tooltip</span>
+      </div>
+    </div>
+  </div>
+  <!-- Included JS Files -->
+  <script src="../../../../lib/assets/javascripts/modularis/jquery.js"></script>
+  <script src="../../../../lib/assets/javascripts/modularis/modularis.js"></script>
+  <script src="../../../../lib/assets/javascripts/modularis/jquery.modularis.tooltips.js"></script>
+  <script src="../../../javascripts/qunit.js"></script>
+  <script src="../../../javascripts/tests/tooltips/tooltips.js"></script>
+</body>
+</html>

data/docs/js/tests/tooltips/tooltips.js ADDED Viewed

@@ -0,0 +1,11 @@
+module('core', {
+  setup: function () {
+    $(document).modularis('tooltips');
+  },
+  teardown: function () {
+  }
+});
+test('setup', function () {
+  ok(false, 'please test');
+});

data/docs/layout.html.erb ADDED Viewed

@@ -0,0 +1,128 @@
+<!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, initial-scale=1.0" />
+    <title>Modularis Docs: <%= @page_title %></title>
+    <link rel="stylesheet" href="<%= asset_path %>/normalize.css" />
+    <link rel="stylesheet" href="<%= asset_path %>/docs.css" />
+    <script src="<%= asset_path %>/vendor/custom.modernizr.js"></script>
+  </head>
+  <body class="antialiased">
+    <nav class="top-bar">
+      <ul class="title-area">
+        <!-- Title Area -->
+        <li class="name">
+          <h1><a href="/">Modularis</a></h1>
+        </li>
+        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+      </ul>
+      <section class="top-bar-section">
+        <!-- Right Nav Section -->
+        <ul class="right">
+          <li class="divider"></li>
+          <li><a href="<%= features_path %>">Features</a></li>
+          <li class="divider"></li>
+          <li><a href="<%= add_ons_path %>">Add-ons</a></li>
+          <li class="divider"></li>
+          <li><a href="<%= case_studies_path %>">Case Studies</a></li>
+          <li class="divider"></li>
+          <li><a href="<%= docs_path %>">Docs</a></li>
+          <li class="divider"></li>
+          <li><a href="<%= training_path %>">Training</a></li>
+          <li class="divider"></li>
+          <li class="has-form">
+            <a href="http://modularis.themepile.com/docs" class="button">Getting Started</a>
+          </li>
+        </ul>
+      </section>
+    </nav>
+    <% @page_title = "4 Documentation" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1 class="docs header"><a href="http://modularis.themepile.com/docs/">Modularis <%= @page_title %></a></h1>
+        <h6 class="docs subheader"><a href="http://modularis.themepile.com/old-docs/f3">Want F3 Docs?</a></h6>
+        <hr>
+      </div>
+    </div>
+    <%= yield %>
+    <footer class="row full-width">
+      <div class="large-5 columns">
+        <h6><strong>Made by ZURB</strong></h6>
+        <p>Modularis is made by <a href="http://www.themepile.com/">ZURB</a>, a product design company in Campbell, California. We've put more than 14 years of experience building web products, services and websites into this framework. <a href="http://modularis.themepile.com/about.php">Modularis Info and Goodies &rarr;</a></p>
+      </div>
+      <div class="large-3 columns">
+        <h6><strong>Using Modularis?</strong></h6>
+        <p>Let us know how you're using Modularis and we might feature you as an example! <a href="mailto:modularis@themepile.com?subject=I'm%20using%20Modularis">Get in touch &rarr;</a></p>
+      </div>
+      <div class="large-4 columns">
+        <h6><strong>Need some help?</strong></h6>
+        <p>For answers or help visit the <a href="http://modularis.themepile.com/docs/support.html">Support page</a>.</p>
+      </div>
+    </footer>
+    <div id="copyright">
+      <div class="row full-width">
+        <div class="large-4 columns">
+          <p>Site content &copy; <%= Time.now.year %> ZURB, inc.</p>
+        </div>
+        <div class="large-8 columns">
+          <ul class="inline-list right">
+            <li><a href="http://modularis.themepile.com">Home</a></li>
+            <li><a href="http://modularis.themepile.com/download.php">Download</a></li>
+            <li><a href="http://modularis.themepile.com/docs">Docs</a></li>
+            <li><a href="http://modularis.themepile.com/docs/changelog.html">Changelog</a></li>
+            <li><a href="http://modularis.themepile.com/about.php">About</a></li>
+            <li><a href="http://feeds.feedburner.com/themepile/blog">Subscribe to the ZURBlog</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <script>
+      // Google Analytics
+      var _gaq = _gaq || [];
+      _gaq.push(
+        ['_setAccount', 'UA-2195009-2'],
+        ['_trackPageview'],
+        ['b._setAccount', 'UA-2195009-27'],
+        ['b._trackPageview']
+      );
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+      document.write('<script src="<%= asset_path %>/vendor/'
+        + ('__proto__' in {} ? 'zepto' : 'jquery')
+        + '.js"><\/script>');
+    </script>
+    <script src="<%= asset_path %>/docs.js"></script>
+    <script>
+      $(document)
+      <% if @joyride %>
+        .modularis()
+        .modularis('joyride', 'start');
+      <% else %>
+        .modularis();
+      <% end %>
+      // For Kitchen Sink Page
+      $('#start-jr').on('click', function() {
+        $(document).modularis('joyride','start');
+      });
+    </script>
+  </body>
+</html>

data/docs/media-queries.html.erb ADDED Viewed

@@ -0,0 +1,96 @@
+<% @side_nav = "using" %>
+<% @page_title = "Media Queries" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">We keep media queries fairly simple in Modularis and let the percentage-based grid do the heavy lifting across various screen sizes.</h4>
+        <hr>
+        <h4>Working with Media Queries and CSS</h4>
+        <p>In CSS, media queries are easily written with a specific syntax. We only use one major breakpoint for the grid in Modularis to shift layouts for screens above 768px wide. The rest of the media queries are used for visibility classes. The following snippet shows you each of the media queries used in Modularis:</p>
+<%= code_example '
+/* We use this media query to add styles to any device that supports media queries */
+@media only screen { }
+/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
+@media only screen and (min-width: 768px) {}
+/* Used to alter styles for screens at least 1280px wide. */
+@media only screen and (min-width: 1280px) {}
+/* Used to alter styles for screens at least 1440px wide. */
+@media only screen and (min-width: 1440px) {}
+/* Apply styles to screens in landscape orientation */
+@media only screen and (orientation: landscape) {}
+/* Apply styles to screens in portrait orientation */
+@media only screen and (orientation: portrait) {}
+/* We also use Modernizr to add a .touch class to the body when applicable */
+/* You can prepend this class to anything and it will style only for touch devices */
+.touch .your-element {}
+', :css %>
+        <h4>Working with Media Queries and SCSS</h4>
+        <p>You can go ahead and use any of the CSS media queries in your SCSS files, but we've also made it easier with some handy variables you can use instead! Those variables are:</p>
+<%= code_example '
+/* Available Variables */
+$small-screen: emCalc(768px);
+$medium-screen: emCalc(1280px);
+$large-screen: emCalc(1440px);
+$screen: "only screen";
+$small: "only screen and (min-width:"#{$small-screen}")";
+$medium: "only screen and (min-width:"#{$medium-screen}")";
+$large: "only screen and (min-width:"#{$large-screen}")";
+$landscape: "only screen and (orientation: landscape)";
+$portrait: "only screen and (orientation: portrait)";
+/* We use this media query to add styles to any device that supports media queries */
+@media #{$screen} { }
+/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
+@media #{$small} { }
+/* Used to alter styles for screens at least 1280px wide. */
+@media #{$medium} { }
+/* Used to alter styles for screens at least 1440px wide. */
+@media #{$large} { }
+/* Apply styles to screens in landscape orientation */
+@media #{$landscape} { }
+/* Apply styles to screens in portrait orientation */
+@media #{$portrait} { }
+/* We also use Modernizr to add a .touch class to the body when applicable */
+/* You can prepend this class to anything and it will style only for touch devices */
+.touch .your-element {}
+', :css %>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>

data/docs/rails.html.erb ADDED Viewed

@@ -0,0 +1,76 @@
+<% @side_nav = "using" %>
+<div class="row">
+  <div class="large-9 push-3 columns"
+    <% @page_title = "Rails" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">We use Rails to develop our <a href="http://themepile.com/apps">apps</a> and Modularis makes things so much quicker. Start using Modularis in your Rails projects by following these instructions.</h4>
+        <hr>
+        <h4>Adding Modularis to the Asset Pipeline</h4>
+        <p>First you'll want to add the following gems to the assets group in your <code>Gemfile</code> like so:</p>
+<%= code_example "
+group :assets do
+  gem 'sass-rails',   '~> 3.2.3'
+  gem 'coffee-rails', '~> 3.2.1'
+  gem 'uglifier', '>= 1.0.3'
+  # Add Modularis Here
+  gem 'themepile-modularis', '~> 4.0.0'
+end
+", :ruby %>
+      <p>Then run <code>bundle install</code> to finish installing Modularis.</p>
+      <div class="panel">
+        <p><strong>NOTE:</strong> Make sure that your restart your server after running <code>bundle install</code>. Otherwise the asset pipeline may not recognize the new Modularis files.</p>
+      </div>
+      <h4>Easy Install</h4>
+      <p>Simply run <code>rails g modularis:install</code> to configure your application to use Modularis. That's it!</p>
+      <h4>Manual Installation</h4>
+      <h5 class="subheader">Add Modularis to your CSS</h5>
+      <p>Append the following line to your <code>app/assets/stylesheets/application.css</code> file:</p>
+<%= code_example '
+/*= require modularis */
+', :css %>
+      <p>If you're planning on using <a href="http://sass-lang.com/" rel="nofollow">Sass</a> then you'll want to rename <code>application.css</code> to <code>application.scss</code>. That file should then look like:</p>
+<%= code_example '
+@import "modularis";
+', :css %>
+      <h5 class="subheader">Add Modularis to your JS</h5>
+      <p>Append the following lines to your <code>app/assets/javascripts/application.js</code> file:</p>
+<%= code_example '
+//= require modularis
+$(document).modularis();
+', :js %>
+      <h5 class="subheader">Add Modernizr</h5>
+      <p>Make sure that <a href="http://modernizr.com/" rel="nofollow">Modernizr</a> is included in the <code>&lt;head&gt;</code> of your page:</p>
+<%= code_example '
+javascript_include_tag "vendor/custom.modernizr"
+', :ruby %>
+      <h5 class="subheader">Set Viewport Width</h5>
+      <p>Add the following line to the <kbd>&lt;head&gt;</kbd> of your page layout:</p>
+<%= code_example '
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+', :html %>
+      </div>
+    </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+  </div>
+</div>

data/docs/rtl.html.erb ADDED Viewed

@@ -0,0 +1,53 @@
+<% @side_nav = "using" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+    <% @page_title = "Right-to-Left Support" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Right-to-left text direction support in Modularis allows you to easily switch text direction for all components.<h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="large-12 columns">
+        <h3>Setup</h3>
+        <p>Modularis 4 was built to support right-to-left text direction out of the box, but you'll need to make a couple of adjustments to your markup and SCSS to get everything up and running.</p>
+        <h4>Markup Changes for Right-to-Left Layouts</h4>
+        <p>You'll need to make a few changes to your markup to get the javascript components working nice and smooth. In the <code>html</code> tag, you'll need to add a <code>dir</code> attribute with a value of <code>rtl</code>. Here's what your <code>html</code> tag should look like:</p>
+<%= code_example '
+<!-- This example is for a right-to-left Arabic layout -->
+<html class="no-js" lang="ar" dir="rtl">
+', :html %>
+        <h5>Change the Language Too</h5>
+        <p>You'll need to change your <code>lang</code> attribute value to match your language. Here's a handy list of common right-to-left languages and their html codes:</p>
+        <ul>
+          <li><strong>Arabic:</strong> ar</li>
+          <li><strong>Chinese:</strong> zh</li>
+          <li><strong>Farsi:</strong> fa</li>
+          <li><strong>Hebrew:</strong> he, iw</li>
+          <li><strong>Japanese:</strong> ja</li>
+          <li><strong>Urdu:</strong> ur</li>
+          <li><strong>Yiddish:</strong> yi, ji</li>
+        </ul>
+        <hr>
+        <h4>A Single SCSS Adjustment</h4>
+        <p>We made it really easy to switch the entire Modularis grid to right-to-left by changing the <code>$text-direction</code> SCSS variable. Here's what the variable should look like:</p>
+<%= code_example '
+$text-direction: rtl;
+', :css %>
+        <p>By changing this single variable, the entire grid and all the Modularis components will be switched to right-to-left orientation.</p>
+        <div class="panel">
+          <h6>Using CSS</h6>
+          <p>If you downloaded a static version of Modularis using the customizer to get a right-to-left support, your download should be ready to use without any of the steps mentioned above.</p>
+          <a href="http://modularis.themepile.com/download.php#customizeModularis">Download Right-to-Left Modularis 4 &raquo;</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+</div>