modularis 0.0.1

data/docs/components/type.html.erb

@@ -0,0 +1,396 @@
+<% @side_nav = "type" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Typography" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Modularis 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.</h4>
+
+        <p>We're no longer depending on modular scale in the core of Modularis. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Modularis. We'll still use <a href="http://compass-style.org">Compass</a>.</p>
+
+        <hr>
+
+      </div>
+    </div>
+
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h1>h1. This is a very large header.</h1>
+        <h2>h2. This is a large header.</h2>
+        <h3>h3. This is a medium header.</h3>
+        <h4>h4. This is a moderate header.</h4>
+        <h5>h5. This is a small header. h1.</h5>
+        <h6>h6. This is a tiny header. h1.</h6>
+
+<%= code_example '
+<h1>h1. This is a very large header.</h1>
+<h2>h2. This is a large header.</h2>
+<h3>h3. This is a medium header.</h3>
+<h4>h4. This is a moderate header.</h4>
+<h5>h5. This is a small header. h1.</h5>
+<h6>h6. This is a tiny header. h1.</h6>
+', :html %>
+
+        <hr>
+
+        <h1 class="subheader">h1.subheader</h1>
+        <h2 class="subheader">h2.subheader</h2>
+        <h3 class="subheader">h3.subheader</h3>
+        <h4 class="subheader">h4.subheader</h4>
+        <h5 class="subheader">h5.subheader</h5>
+        <h6 class="subheader">h6.subheader</h6>
+
+<%= code_example '
+<h1 class="subheader">h1.subheader</h1>
+<h2 class="subheader">h2.subheader</h2>
+<h3 class="subheader">h3.subheader</h3>
+<h4 class="subheader">h4.subheader</h4>
+<h5 class="subheader">h5.subheader</h5>
+<h6 class="subheader">h6.subheader</h6>
+', :html %>
+
+        <hr>
+
+        <h1>h1. <small>Small segment header.</small></h1>
+        <h2>h2. <small>Small segment header.</small></h2>
+        <h3>h3. <small>Small segment header.</small></h3>
+        <h4>h4. <small>Small segment header.</small></h4>
+        <h5>h5. <small>Small segment header.</small></h5>
+        <h6>h6. <small>Small segment header.</small></h6>
+
+<%= code_example '
+<h1>h1. <small>Small segment header.</small></h1>
+<h2>h2. <small>Small segment header.</small></h2>
+<h3>h3. <small>Small segment header.</small></h3>
+<h4>h4. <small>Small segment header.</small></h4>
+<h5>h5. <small>Small segment header.</small></h5>
+<h6>h6. <small>Small segment header.</small></h6>
+', :html %>
+
+
+        <hr>
+
+        <p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <code>&lt;strong&gt;</code> around type to <strong>make it bold!</strong>. You can also you <code>&lt;em&gt;</code> to <em>italicize your words</em>.</p>
+
+<%= code_example '
+<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to <strong>make it bold!</strong>. You can also you <em> to <em>italicize your words</em>.</p>
+', :html %>
+
+        <hr>
+
+        <h3>Links</h3>
+        <p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">color is preset</a> to the Modularis primary color.</p>
+
+<%= code_example '
+<p>Links are very standard, and the <a href="#">color is preset</a> to the Modularis primary color.</p>
+', :html %>
+
+        <hr>
+
+        <h3>Lists</h3>
+        <p>Lists are helpful for, well, lists of things.</p>
+
+        <div class="row">
+          <div class="large-4 columns">
+            <h6>ul.disc</h6>
+            <ul class="disc">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+              <li>List item</li>
+              <li>List item</li>
+            </ul>
+          </div>
+
+          <div class="large-4 columns">
+            <h6>ul.circle</h6>
+            <ul class="circle">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+              <li>List item</li>
+              <li>List item</li>
+            </ul>
+          </div>
+
+          <div class="large-4 columns">
+            <h6>ul.square</h6>
+            <ul class="square">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+              <li>List item</li>
+              <li>List item</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="large-4 columns">
+            <h6>ul.no-bullet</h6>
+            <ul class="no-bullet">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+            </ul>
+          </div>
+          <div class="large-4 columns">
+            <h6>Ordered Lists</h6>
+            <ol>
+              <li>List Item 1</li>
+              <li>List Item 2
+                <ol>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ol>
+              </li>
+              <li>List Item 3</li>
+            </ol>
+          </div>
+          <div class="large-4 columns">
+            <h6>Defition Lists</h6>
+            <dl>
+              <dt>Definition Title</dt>
+              <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
+            </dl>
+          </div>
+        </div>
+
+<%= code_example '
+<!-- Use .circle or .square to change the style of the bullets -->
+<ul class="disc">
+  <li>List item with a much longer description or more content.</li>
+  <li>List item</li>
+  <li>List item
+    <ul>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+    </ul>
+  </li>
+  <li>List item</li>
+  <li>List item</li>
+  <li>List item</li>
+</ul>
+
+<!-- Sometimes you don\'t want bullets at all -->
+<ul class="no-bullet">
+  <li>List item with a much longer description or more content.</li>
+  <li>List item</li>
+  <li>List item
+    <ul>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+    </ul>
+  </li>
+  <li>List item</li>
+</ul>
+
+<!-- Ordered lists are great for lists that need order, duh -->
+<ol>
+  <li>List Item 1</li>
+  <li>List Item 2</li>
+  <li>List Item 3</li>
+</ol>
+
+<!-- Definition lists are great for small block of copy that describe the header -->
+<dl>
+  <dt>Definition List</dt>
+  <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
+</dl>
+', :html %>
+
+        <hr>
+
+        <a name="blockquotes"></a>
+        <h3>Blockquotes</h3>
+        <p>Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.</p>
+
+        <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
+
+<%= code_example '
+<blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
+', :html %>
+
+        <hr>
+
+        <h3>V-Cards</h3>
+        <p>Here's a handy microformat-friendly list to <em>address</em> all your needs.</p>
+
+        <ul class="vcard">
+          <li class="fn">Gaius Baltar</li>
+          <li class="street-address">123 Colonial Ave.</li>
+          <li class="locality">Caprica City</li>
+          <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
+          <li class="email"><a href="#">g.baltar@cmail.com</a></li>
+        </ul>
+
+<%= code_example '
+<ul class="vcard">
+  <li class="fn">Gaius Baltar</li>
+  <li class="street-address">123 Colonial Ave.</li>
+  <li class="locality">Caprica City</li>
+  <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
+  <li class="email"><a href="#">g.baltar@cmail.com</a></li>
+</ul>
+', :html %>
+
+        <hr>
+
+        <h3>Print Styles</h3>
+        <p>Modularis includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:</p>
+
+        <ul class="disc">
+          <li>Clearing out backgrounds, box shadows, and text shadows</li>
+          <li>Appending link URLs after the anchor text</li>
+          <li>Bordering blockquotes and pre elements</li>
+          <li>Page cleanup and window minimization</li>
+        </ul>
+
+        <p>On top of that, Modularis includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach <code>.print-only</code> to an element to only show when printing, and <code>.hide-on-print</code> to hide something when printing.</p>
+
+        <hr>
+
+        <h3>Available SCSS Variables</h3>
+        <p>We've got a ton of variables for you to use to customize your typography.</p>
+
+<%= code_example '
+/* We use these to control header font styles */
+$header-font-family:                   "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$header-font-weight:                   bold;
+$header-font-style:                    normal;
+$header-font-color:                    #222;
+$header-line-height:                   1.4;
+$header-top-margin:                    .2em;
+$header-bottom-margin:                 .5em;
+$header-text-rendering:                optimizeLegibility;
+
+/* We use these to control header font sizes */
+$h1-font-size:                         emCalc(44px);
+$h2-font-size:                         emCalc(37px);
+$h3-font-size:                         emCalc(27px);
+$h4-font-size:                         emCalc(23px);
+$h5-font-size:                         emCalc(18px);
+$h6-font-size:                         1em;
+
+/* These control how subheaders are styled. */
+$subheader-line-height:                1.4;
+$subheader-font-color:                 lighten($header-font-color, 30%);
+$subheader-font-weight:                300;
+$subheader-top-margin:                 .2em;
+$subheader-bottom-margin:              .5em;
+
+/* A general <small> styling */
+$small-font-size:                      60%;
+$small-font-color:                     lighten($header-font-color, 30%);
+
+/* We use these to style paragraphs */
+$paragraph-font-family:                inherit;
+$paragraph-font-weight:                normal;
+$paragraph-font-size:                  1em;
+$paragraph-line-height:                1.6;
+$paragraph-margin-bottom:              emCalc(20px);
+$paragraph-aside-font-size:            emCalc(14px);
+$paragraph-aside-line-height:          1.35;
+$paragraph-aside-font-style:           italic;
+$paragraph-text-rendering:             optimizeLegibility;
+
+/* We use these to style <code> tags */
+$code-color:                           darken($alert-color, 15%);
+$code-font-family:                     Consolas, "Liberation Mono", Courier, monospace;
+$code-font-weight:                     bold;
+
+/* We use these to style anchors */
+$anchor-text-decoration:               none;
+$anchor-font-color:                    $primary-color;
+$anchor-font-color-hover:              darken($primary-color, 5%);
+
+/* We use these to style the <hr> element */
+$hr-border-width:                      1px;
+$hr-border-style:                      solid;
+$hr-border-color:                      #ddd;
+$hr-margin:                            emCalc(20px);
+
+/* We use these to style lists */
+$list-style-position:                  outside;
+$list-side-margin:                     emCalc(18px);
+$definition-list-header-weight:        bold;
+$definition-list-header-margin-bottom: .3em;
+$definition-list-margin-bottom:        emCalc(12px);
+
+/* We use these to style blockquotes */
+$blockquote-font-color:                lighten($header-font-color, 30%);
+$blockquote-padding:                   emCalc(9px) emCalc(20px) 0 emCalc(19px);
+$blockquote-border:                    1px solid #ddd;
+$blockquote-cite-font-size:            emCalc(13px);
+$blockquote-cite-font-color:           lighten($header-font-color, 20%);
+$blockquote-cite-link-color:           $blockquote-cite-font-color;
+
+/* Acronym styles */
+$acronym-underline:                    1px dotted #ddd;
+
+/* We use these to control padding and margin */
+$microformat-padding:                  emCalc(10px) emCalc(12px);
+$microformat-margin:                    0 0 emCalc(20px) 0;
+
+/* We use these to control the border styles */
+$microformat-border-width:             1px;
+$microformat-border-style:             solid;
+$microformat-border-color:             #ddd;
+
+/* We use these to control full name font styles */
+$microformat-fullname-font-weight:     bold;
+$microformat-fullname-font-size:       emCalc(15px);
+
+/* We use this to control the summary font styles */
+$microformat-summary-font-weight:      bold;
+
+/* We use this to control abbr padding */
+$microformat-abbr-padding:             0 emCalc(1px);
+
+/* We use this to control abbr font styles */
+$microformat-abbr-font-weight:         bold;
+$microformat-abbr-font-decoration:     none;
+', :css %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/visibility.html.erb

@@ -0,0 +1,110 @@
+<% @side_nav = "using" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Visibility Classes" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Modularis allows you to easily turn elements on and off based on certain device criteria, like screen size, touch or orientation.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <h5>Screen Size Visibility Control (Show)</h5>
+        <p>The following text should describe the screen size you're using:</p>
+        <p class="panel">
+          <strong class="show-for-small">You are on a small screen.</strong>
+          <strong class="show-for-medium">You are on a medium screen.</strong>
+          <strong class="show-for-medium-up">You are on a medium, large or xlarge screen.</strong>
+          <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
+          <strong class="show-for-large">You are on a large screen.</strong>
+          <strong class="show-for-large-up">You are on a large or xlarge screen.</strong>
+          <strong class="show-for-large-down">You are on a large, medium or small screen.</strong>
+          <strong class="show-for-xlarge">You are on a xlarge screen.</strong>
+        </p>
+
+        <h5>Screen Size Visibility Control (Hide)</h5>
+        <p>The following text should describe the screen size you aren't using:</p>
+        <p class="panel">
+          <strong class="hide-for-small">You are <em>not</em> on a small screen.</strong>
+          <strong class="hide-for-medium">You are <em>not</em> on a medium screen.</strong>
+          <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large or xlarge screen.</strong>
+          <strong class="hide-for-medium-down">You are <em>not</em> on a medium or small screen.</strong>
+          <strong class="hide-for-large">You are <em>not</em> on a large screen.</strong>
+          <strong class="hide-for-large-up">You are <em>not</em> on a large or xlarge screen.</strong>
+          <strong class="hide-for-large-down">You are <em>not</em> on a large, medium or small screen.</strong>
+          <strong class="hide-for-xlarge">You are <em>not</em> on a xlarge screen.</strong>
+        </p>
+
+        <h5>Orientation Detection</h5>
+        <p>The following text should describe the device orientation you're using:</p>
+        <p class="panel">
+          <strong class="show-for-landscape">You are in landscape orientation.</strong>
+          <strong class="show-for-portrait">You are in portrait orientation.</strong>
+        </p>
+
+        <h5>Touch Detection</h5>
+        <p>The following text should describe if you're using a touch device:</p>
+        <p class="panel">
+          <strong class="show-for-touch">You are on a touch-enabled device.</strong>
+          <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
+        </p>
+
+        <hr>
+
+        <h3>Using our HTML Classes With CSS</h3>
+        <p>The standard way of working with the Modularis visibility control is to use the predefined HTML classes. Yes, this adds classes to your markup, but they are semantic to the function they provide rather than from a presentational point of view.</p>
+
+<%= code_example '
+/* The show classes */
+.show-for-small       /* Visible up to 768px */
+.show-for-medium-down /* Visible from 1280px down */
+.show-for-medium      /* Visible between 768px and 1280px */
+.show-for-medium-up   /* Visible from 1280px up */
+.show-for-large-down  /* Visible from 1440px down */
+.show-for-large       /* Visible between 1280px and 1440px */
+.show-for-large-up    /* Visible from 1440px up */
+.show-for-xlarge      /* Visible above 1440px only */
+
+/* The hide classes */
+.hide-for-small       /* Hidden up to 768px */
+.hide-for-medium-down /* Hidden from 1280px down */
+.hide-for-medium      /* Hidden between 768px and 1280px */
+.hide-for-medium-up   /* Hidden from 1280px up */
+.hide-for-large-down  /* Hidden from 1440px down */
+.hide-for-large       /* Hidden between 1280px and 1440px */
+.hide-for-large-up    /* Hidden from 1440px up */
+.hide-for-xlarge      /* Hidden above 1440px only */
+
+/* The orientation classes */
+.show-for-landscape   /* Visible for landscape orientation */
+.show-for-portrait    /* Visible for portrait orientation */
+.hide-for-landscape   /* Hidden for landscape orientation */
+.hide-for-portrait    /* Hidden for portrait orientation */
+
+/* The touch detection classes */
+.show-for-touch       /* Visible for touch enabled devices */
+.hide-for-touch       /* Hidden for touch enabled devices */
+', :css %>
+
+        <p><strong>Note:</strong> We've also included specific table hide/show visibility classes that follow the same structure, just prepended with table, thead, th, tbody, tr or td. The display property will go from 'none' to whatever its default display should be.</p>
+
+        <hr>
+
+        <h3>Using SCSS?</h3>
+        <p>So, you hate the idea of including these classes in your markup? Well, we thought of that too! You can easily <code>@extend</code> these classes to whatever element you want. Extending a visibility class looks like this:</p>
+
+<%= code_example '
+.your-class-name { @extend .hide-for-small; }
+', :css %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/config/deploy.rb

@@ -0,0 +1,36 @@
+# use local key for authentication
+ssh_options[:forward_agent] = true
+default_run_options[:pty] = true
+
+set :application, "modularis"
+set :repository,  "git@github.com:themepile/#{application}.git"
+set :user, application
+set :deploy_to, "/var/www/modularis-docs"
+set :deploy_via, :remote_cache
+set :use_sudo, false
+set :branch, "master"
+set :bundle_gemfile, "docs/Gemfile"
+
+set :scm, :git
+
+modularis1_ip = '166.78.3.108'
+modularis2_ip = '166.78.18.29'
+
+role :web, modularis1_ip, modularis2_ip
+
+after "deploy:update_code", "deploy:generate_static_site"
+set :keep_releases, 3
+after "deploy:update", "deploy:cleanup"
+
+namespace :deploy do
+  task :default do
+    update
+  end
+  
+  task :generate_static_site do
+    run "cd #{release_path}/docs && bundle exec ruby #{release_path}/docs/compile.rb"
+  end
+
+end
+
+require "bundler/capistrano"

data/docs/config.ru

@@ -0,0 +1,12 @@
+require 'sprockets'
+require 'sass'
+
+map '/assets' do
+  environment = Sprockets::Environment.new
+  environment.append_path File.expand_path('../../scss', __FILE__)
+  environment.append_path File.expand_path('../css', __FILE__)
+  environment.append_path File.expand_path('../../test/js', __FILE__)
+  environment.append_path File.expand_path('../../js', __FILE__)
+  environment.append_path File.expand_path('../js', __FILE__)
+  run environment
+end

data/docs/controller.rb

@@ -0,0 +1,53 @@
+require 'socket'
+layout 'layout.html.erb'
+
+ignore /css\//
+ignore /js\//
+ignore /.+.md/
+ignore /Gemfile.*/
+ignore /Procfile/
+ignore /compile.rb/
+
+before /test\/.*html\.erb/ do
+  layout 'test/layout.html.erb'
+end
+
+helpers do
+  def asset_path
+    if @_stasis.options[:asset_path]
+      @_stasis.options[:asset_path]
+    elsif Socket.gethostname == "modularis"
+      "http://modularis.themepile.com/docs/assets"
+    else
+      "http://#{Socket.ip_address_list.detect{|intf| intf.ipv4_private?}.getnameinfo[0]}:4001/assets"
+    end
+  end
+
+  def code_example(code, lang=:ruby)
+    "<div class='#{lang}'>" + CodeRay.scan(code, lang).div(:css => :class) + "</div>"
+  end
+
+  def modularis_home_path
+    '/'
+  end
+
+  def features_path
+    '/grid.php'
+  end
+  
+  def training_path
+    '/training.php'
+  end
+
+  def add_ons_path
+    '/templates.php'
+  end
+
+  def case_studies_path
+    '/case-jacquelinewest.php'
+  end
+
+  def docs_path
+    '/docs/'
+  end
+end