themepile-abstractio 1.0.4 → 4.1.7

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">Abstractio 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 Abstractio 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 768px down */
+.show-for-medium      /* Visible between 768px and 1280px */
+.show-for-medium-up   /* Visible from 768px up */
+.show-for-large-down  /* Visible from 1280px down */
+.show-for-large       /* Visible between 1280px and 1440px */
+.show-for-large-up    /* Visible from 1280px up */
+.show-for-xlarge      /* Visible above 1440px only */
+
+/* The hide classes */
+.hide-for-small       /* Hidden up to 768px */
+.hide-for-medium-down /* Hidden from 768px down */
+.hide-for-medium      /* Hidden between 768px and 1280px */
+.hide-for-medium-up   /* Hidden from 768px up */
+.hide-for-large-down  /* Hidden from 1280px down */
+.hide-for-large       /* Hidden between 1280px and 1440px */
+.hide-for-large-up    /* Hidden from 1280px 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.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/config/deploy.rb

@@ -0,0 +1,36 @@
+# use local key for authentication
+ssh_options[:forward_agent] = true
+default_run_options[:pty] = true
+
+set :application, "abstractio"
+set :repository,  "git@github.com:themepile/#{application}.git"
+set :user, application
+set :deploy_to, "/var/www/abstractio-docs"
+set :deploy_via, :remote_cache
+set :use_sudo, false
+set :branch, "master"
+set :bundle_gemfile, "docs/Gemfile"
+
+set :scm, :git
+
+abstractio1_ip = '166.78.3.108'
+abstractio2_ip = '166.78.18.29'
+
+role :web, abstractio1_ip, abstractio2_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/controller.rb

@@ -0,0 +1,49 @@
+require 'socket'
+layout 'layout.html.erb'
+
+ignore /css\//
+ignore /js\//
+ignore /.+.md/
+ignore /Gemfile.*/
+ignore /Procfile/
+ignore /compile.rb/
+
+helpers do
+  def asset_path
+    if @_stasis.options[:asset_path]
+      @_stasis.options[:asset_path]
+    elsif Socket.gethostname == "abstractio"
+      "http://abstractio.themepile.co.uk/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 abstractio_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

data/docs/css/_coderay.scss

@@ -0,0 +1,116 @@
+
+/* CodeRay Syntax Highlighting Styles to match Github */
+.CodeRay {
+  background-color: #eee;
+  border: 1px solid #CCC;
+  font-family: 'Consolas', 'Liberation Mono', Courier, monospace;
+  color: #000;
+  padding: .8em 0 .8em .8em;
+  margin-bottom: 1.3em;
+  overflow: auto;
+}
+
+.CodeRay pre {
+  margin: 0px;
+  font-size: .9em;
+  line-height: 1.4em;
+  white-space: pre;
+}
+
+table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
+table.CodeRay td {
+  padding: 1em 0.5em;
+  vertical-align: top;
+}
+
+.CodeRay .code { width: 100% }
+
+.CodeRay .debug { color:white !important; background:blue !important; }
+
+.CodeRay .annotation { color:#007 }
+.CodeRay .attribute-name { color:#f08 }
+.CodeRay .attribute-value { color:#700 }
+.CodeRay .binary { color:#509; }
+.CodeRay .comment  { color:#998; font-style: italic;}
+.CodeRay .char { color:#04D }
+.CodeRay .char .content { color:#04D }
+.CodeRay .char .delimiter { color:#039 }
+.CodeRay .class { color:#458; }
+.CodeRay .complex { color:#A08; }
+.CodeRay .constant { color:teal; }
+.CodeRay .color { color:#0A0 }
+.CodeRay .class-variable { color:#369 }
+.CodeRay .decorator { color:#B0B; }
+.CodeRay .definition { color:#099; }
+.CodeRay .directive { color:#088; }
+.CodeRay .delimiter { color:black }
+.CodeRay .doc { color:#970 }
+.CodeRay .doctype { color:#34b }
+.CodeRay .doc-string { color:#D42; }
+.CodeRay .escape  { color:#666; }
+.CodeRay .entity { color:#800; }
+.CodeRay .error { color: #808; }
+.CodeRay .exception { color:#C00; }
+.CodeRay .filename { color:#099; }
+.CodeRay .function { color:#900; }
+.CodeRay .global-variable { color:teal; }
+.CodeRay .hex { color:#058; }
+.CodeRay .integer  { color:#099; }
+.CodeRay .include { color:#B44; }
+.CodeRay .inline { color: black }
+.CodeRay .inline .inline { background: #ccc }
+.CodeRay .inline .inline .inline { background: #bbb }
+.CodeRay .inline .inline-delimiter { color: #D14; }
+.CodeRay .inline-delimiter { color: #D14; }
+.CodeRay .important { color:#f00; }
+.CodeRay .interpreted { color:#B2B; }
+.CodeRay .instance-variable { color:teal }
+.CodeRay .label { color:#970; }
+.CodeRay .local-variable { color:#963 }
+.CodeRay .octal { color:#40E; }
+.CodeRay .predefined { color:#369; }
+.CodeRay .preprocessor { color:#579; }
+.CodeRay .pseudo-class { color:#00C; }
+.CodeRay .predefined-type { color:#074; }
+.CodeRay .reserved, .keyword  { color:#000; }
+
+.CodeRay .key { color: #808; }
+.CodeRay .key .delimiter { color: #606; }
+.CodeRay .key .char { color: #80f; }
+.CodeRay .value { color: #088; }
+
+.CodeRay .regexp { background-color:#fff0ff }
+.CodeRay .regexp .content { color:#808 }
+.CodeRay .regexp .delimiter { color:#404 }
+.CodeRay .regexp .modifier { color:#C2C }
+.CodeRay .regexp .function  { color:#404; font-weight: bold }
+
+.CodeRay .string { color: #D20; }
+.CodeRay .string .string { }
+.CodeRay .string .string .string { background-color:#ffd0d0 }
+.CodeRay .string .content { color: #D14; }
+.CodeRay .string .char { color: #D14; }
+.CodeRay .string .delimiter { color: #D14; }
+
+.CodeRay .shell { color:#D14 }
+.CodeRay .shell .content { }
+.CodeRay .shell .delimiter { color:#D14 }
+
+.CodeRay .symbol { color:#990073 }
+.CodeRay .symbol .content { color:#A60 }
+.CodeRay .symbol .delimiter { color:#630 }
+
+.CodeRay .tag, .CodeRay .attribute-name { color:#070 }
+.CodeRay .tag-special { color:#D70; }
+.CodeRay .type { color:#339; }
+.CodeRay .variable  { color:#036 }
+
+.CodeRay .insert { background: #afa; }
+.CodeRay .delete { background: #faa; }
+.CodeRay .change { color: #aaf; background: #007; }
+.CodeRay .head { color: #f8f; background: #505 }
+
+.CodeRay .insert .insert { color: #080; }
+.CodeRay .delete .delete { color: #800; }
+.CodeRay .change .change { color: #66f; }
+.CodeRay .head .head { color: #f4f; }

data/docs/css/_settings.scss

@@ -0,0 +1 @@
+$row-width: 70em;

data/docs/css/docs.scss

@@ -0,0 +1,239 @@
+@import "settings";
+@import "abstractio";
+@import "coderay";
+
+/* Documentation Overrides */
+
+/* Coderay styles */
+.html, .css, .scss, .js { position: relative; }
+
+ul, ol, dl { list-style-position: inside; }
+
+.CodeRay:before {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: block;
+  color: #ccc;
+  font-size: .75em;
+}
+.html > .CodeRay:before { content: "HTML"; }
+.css > .CodeRay:before { content: "SCSS"; }
+.js > .CodeRay:before { content: "JS"; }
+
+/* Docs Footer Styles */
+.row.full-width {
+  max-width: 100%;
+}
+footer.row.full-width {
+  padding-top: 30px;
+  border-top: solid 1px #ddd;
+  font-size: 14px;
+}
+
+#copyright {
+  background: #3f3f3f;
+  color: #fff;
+  padding: 11px 0;
+  margin-top: 30px;
+
+  a {
+    color: #fff;
+    font-size: 14px;
+  }
+
+  p,
+  ul { margin-bottom: 0; }
+}
+
+.docs.header { margin-bottom: 10px; }
+.docs.subheader {
+  float: $default-float;
+}
+
+.docs.section-container a.active { font-weight: bold; }
+
+
+/* Alert Docs */
+.alert-base {
+  @include alert-base;
+
+  &.bg { @include alert-style; }
+  &.custom-bg { @include alert-style(#ff6c3c); }
+  &.radius { @include radius; }
+  .close { @include alert-close; }
+}
+
+/* Breadcrumb Docs */
+.crumb-container {
+  @include crumb-container;
+  &.radius { @include radius; }
+  &.crumbs li { @include crumbs; }
+}
+
+/* Button Docs */
+.buttony.custom { @include button(1.1em, #FF94CB, 20px); }
+
+.button-base {
+  @include button-base;
+  &.size { @include button-size; }
+  &.style { @include button-style; }
+  &.shine { @include single-transition(background-color); @include radius; @include inset-shadow(); }
+}
+
+/* Button Group Docs */
+.button-group-docs {
+  @include button-group-container;
+  .button-class { @include button; }
+  &.list li { @include button-group-style; }
+  &.extras {
+    li { @include button-group-style(true); }
+    .button-class { @include inset-shadow; @include single-transition(background-color); }
+  }
+}
+
+/* Forms Docs */
+.attached-label {
+  @include prefix-postfix-base;
+  @include grid-column($columns:3,$float:left);
+  &.style { @include prefix; }
+  &.custom { @include prefix(orange); }
+}
+
+input[type="text"].attached-input {
+  @include grid-column($columns:9);
+}
+
+/* Dropdown Buttons Docs */
+.customized-dropdown-docs {
+  @include button;
+  @include dropdown-button;
+  @include radius;
+  @include single-transition;
+  @include inset-shadow;
+}
+
+/* Keystroke Docs */
+.custom-keystroke kbd { @include keystroke(orange);}
+
+/* Label Docs */
+.label-custom {
+  @include label(0 10px,11px,pink,6px);
+}
+
+/* Panels Docs */
+.panel-custom { @include panel(pink,40px); }
+
+/* Progress Bar Docs */
+.progress-custom {
+  @include progress-container;
+  @include radius(6px);
+  & > span {
+    @include progress-meter(pink);
+    @include radius(5px);
+  }
+}
+
+/* Side Nav Docs */
+.side-nav-custom { @include side-nav(darken(orange, 20%),16px,orange); }
+
+/* Sub Nav Docs */
+.sub-nav-custom { @include sub-nav(orange,11px,orange); }
+
+/* Thumbs Docs */
+.th-custom {
+  @include thumb(10px,0 0 0 2px black, 0 0 10px 2px rgba(orange,0.5));
+  @include radius(6);
+  @include single-transition(all,400ms,ease-in);
+}
+
+/* Grid Docs */
+#masthead { @include grid-row; @include panel;
+  & > hgroup { @include grid-column(4, $float:$default-float); }
+  & > section { @include grid-column(8, $float:$default-float); }
+}
+
+/* Switch Docs */
+.switch-custom { @include switch(700ms, ease-in-out, 50px, 18px, 2.6em, #888, lighten(yellow, 30%), lighten(red, 40%)); }
+.switch-custom-base { @include switch-base;
+  &.size { @include switch-size; }
+  &.style { @include switch-style; }
+}
+
+/* ZURBjobs */
+.jobs {
+  border: 1px solid #eee;
+  padding: 10px 20px 20px;
+  font-size: 14px;
+  line-height: 1.1;
+  ul { list-style: none;
+    li { margin-bottom: 10px; }
+  }
+  .location {
+    display: block;
+    color: #555;
+  }
+}
+
+/* Section Docs */
+.section-auto-sample {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+
+  @media #{$small} {
+    @include section-container(false,$section-type:tabs);
+    & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+}
+
+.section-auto-sample-accordion {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+
+.section-auto-sample-tabs {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+
+.section-auto-sample-vtabs,
+.section-auto-sample-vnav,
+.section-auto-sample-hnav {
+  @include section-container($section-type:accordion);
+  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample"); }
+}
+
+@media #{$small} {
+  .section-auto-sample-vtabs {
+    @include section-container($section-type:vertical-tabs);
+    & > section { @include section($section-type:vertical-tabs, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+
+  .nav-container { @include grid-row($behavior:nest);
+    > nav { @include grid-column($columns:4); }
+  }
+
+  .section-auto-sample-vnav {
+    @include section-container($section-type:vertical-nav);
+    & > section { @include section($section-type:vertical-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+
+  .section-auto-sample-hnav {
+    @include section-container($section-type:horizontal-nav);
+    & > section { @include section($section-type:horizontal-nav, $title-selector:".title-sample", $content-selector:".content-sample"); }
+  }
+
+}
+.section-auto-sample-custom {
+  @include section-container($section-type:tabs);
+  & > section { @include section($section-type:tabs, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
+}
+
+@media only screen and (min-width: 800px) {
+  .docs.header { float: $default-float; }
+
+  .docs.subheader {
+    margin-top: 38px;
+    float: $opposite-direction;
+  }
+}