ratchet_design 0.1.0

data/app/assets/javascripts/ratchet/utility/load_script.js

@@ -0,0 +1,34 @@
+/**
+ * LoadScript 0.0.1
+ * Load external JavaScript function
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Public API function
+var loadScript = function( url, callback ) {
+
+  // Create a <script> element
+  var script   = document.createElement( 'script' );
+
+  // Make it async
+  script.async = true;
+
+  // Set source to passed URL
+  script.src   = url;
+
+  // Append it to document head
+  document.head.appendChild( script );
+
+  // Add load event listener
+  script.addEventListener( 'load', function() {
+
+    // And if a callback is passed, run it
+    if ( callback ) callback();
+
+  }, false );
+
+};
+
+// Public API
+module.exports = loadScript;

data/app/assets/javascripts/ratchet/utility/matches.js

@@ -0,0 +1,15 @@
+/**
+ * Matches 0.0.1
+ * Matches selector function
+ * @author Kyle Foster (@hkfoster)
+ * @reference https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+ * @license MIT
+ **/
+
+// Public API function
+var matches = function ( el, selector ) {
+  return ( el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector ).call( el, selector );
+};
+
+// Public API
+module.exports = matches;

data/app/assets/javascripts/ratchet/utility/scroll_to.js

@@ -0,0 +1,74 @@
+/**
+ * ScrollTo 0.0.1
+ * Scroll to element function
+ * @author James Doyle (@james2doyle) & Kyle Foster (@hkfoster)
+ * @source https://goo.gl/CeY8fY
+ * @license MIT
+ **/
+
+// Public API function
+var scrollTo = function( to, callback, duration ) {
+
+  // Scoped variables
+  var start     = position(),
+      change    = to - start,
+      currTime  = 0,
+      increment = 20;
+      duration  = ( typeof( duration ) === 'undefined' ) ? 500 : duration;
+
+  // Kick off scroll animation
+  animateScroll();
+
+  // Easing function -  http://goo.gl/5HLl8
+  function easeInOutQuad( t, b, c, d ) {
+    t /= d / 2;
+    if ( t < 1 ) {
+      return c / 2 * t * t + b;
+    }
+    t--;
+    return -c / 2 * ( t * ( t - 2 ) - 1 ) + b;
+  }
+
+  // Get current scroll position
+  function position() {
+    return document.documentElement.scrollTop ||
+           document.body.parentNode.scrollTop ||
+           document.body.scrollTop;
+  }
+
+  // Move scroll position
+  function move( amount ) {
+    document.documentElement.scrollTop = amount;
+    document.body.parentNode.scrollTop = amount;
+    document.body.scrollTop = amount;
+  }
+
+  // Scroll animation function
+  function animateScroll() {
+
+    // Increment the time
+    currTime += increment;
+
+    // Find the value with the quadratic in-out easing function
+    var val = easeInOutQuad( currTime, start, change, duration );
+
+    // Move the document.body
+    move( val );
+
+    // Do the animation unless its over
+    if ( currTime < duration ) {
+      requestAnimationFrame( animateScroll );
+    }
+
+    // The animation is done so let’s callback
+    else {
+      if ( callback && typeof( callback ) === 'function' ) {
+        callback();
+      }
+    }
+  }
+
+};
+
+// Public API
+module.exports = scrollTo;

data/app/assets/javascripts/ratchet/utility/throttle.js

@@ -0,0 +1,25 @@
+/**
+ * Throttle 0.0.1
+ * Event throttle function
+ * @author Kyle Foster (@hkfoster)
+ * @reference http://www.html5rocks.com/en/tutorials/speed/animations/
+ * @license MIT
+ **/
+
+// Public API function
+var throttle = function ( type, name, obj ) {
+  obj = obj || window;
+  var running = false;
+  var func = function () {
+    if ( running ) { return; }
+    running = true;
+    requestAnimationFrame( function () {
+      obj.dispatchEvent( new CustomEvent( name ) );
+      running = false;
+    });
+  };
+  obj.addEventListener( type, func );
+};
+
+// Public API
+module.exports = throttle;

data/app/assets/javascripts/ratchet/utility/timeout.js

@@ -0,0 +1,45 @@
+/**
+ * Timeout 0.0.1
+ * Just like setTimeout & clearTimeout, but with requestAnimationFrame()
+ * @author Joe Lambert (@joelambert) & Kyle Foster (@hkfoster)
+ * @source https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+ * @license MIT
+ **/
+
+// Public API object
+var timeout = {
+
+  // Set timeout function
+  set : function( fn, delay, args ) {
+
+    var start  = Date.now(),
+        handle = {};
+
+    function loop() {
+
+      var current = Date.now(),
+          delta   = current - start;
+
+      if ( delta >= delay ) {
+        if ( args !== undefined ) {
+          fn.call( fn, args );
+        } else {
+          fn.call( fn );
+        }
+      } else {
+        handle.value = requestAnimationFrame( loop );
+      }
+    }
+
+    handle.value = requestAnimationFrame( loop );
+    return handle;
+  },
+
+  // Clear timeout function
+  clear : function( handle ) {
+    window.cancelAnimationFrame( handle.value );
+  }
+};
+
+// Public API
+module.exports = timeout;

data/app/assets/javascripts/ratchet/utility/unhover.js

@@ -0,0 +1,56 @@
+/**
+ * Unhover 0.0.1
+ * Disable hover events on scroll
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var throttle = require( '../utility/throttle' ),
+    timeout  = require( '../utility/timeout' );
+
+// Public API function
+var unhover = function( settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    scrollDelay : 150
+  };
+
+  // Scoped variables
+  var options = Object.assign( {}, defaults, settings ),
+      docElem = document.documentElement,
+      scrollTimer;
+
+  // Scroll handler function
+  function scrollHandler() {
+
+    // Clear timer (if it exists)
+    if ( scrollTimer ) timeout.clear( scrollTimer );
+
+    // Turn off pointer events
+    if ( !docElem.style.pointerEvents ) {
+      docElem.style.pointerEvents = 'none';
+    }
+
+    // Check to see if scroll is over
+    scrollTimer = timeout.set( function() {
+
+      // And reset pointer events upon completion
+      docElem.style.pointerEvents = '';
+
+    // Delay firing function based on argument passed
+    }, options.scrollDelay );
+
+  }
+
+  // Scroll throttle function init
+  throttle( 'scroll', 'optimizedscroll' );
+
+  // Scroll function listener
+  window.addEventListener( 'optimizedscroll', scrollHandler, false );
+
+};
+
+// Public API
+module.exports = unhover;

data/app/assets/javascripts/ratchet/utility/word_count.js

@@ -0,0 +1,15 @@
+/**
+ * WordCount 0.0.1
+ * Word counter function
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Public API function
+var wordCount = function( str ) {
+  var matches = str.match( /\S+/g );
+  return matches ? matches.length : 0;
+};
+
+// Public API
+module.exports = wordCount;

data/app/assets/stylesheets/ratchet/_core.scss

@@ -0,0 +1,20 @@
+// Utility modules
+@import 'utility/global';
+@import 'utility/grid';
+
+// Base modules
+@import 'base/text';
+@import 'base/list';
+@import 'base/button';
+@import 'base/media';
+@import 'base/form';
+@import 'base/table';
+@import 'base/document';
+
+// Enhancement modules
+@import 'enhancement/loader';
+@import 'enhancement/feature';
+@import 'enhancement/sticky-sidebar';
+@import 'enhancement/notice';
+@import 'enhancement/hero';
+@import 'enhancement/contrast-section';

data/app/assets/stylesheets/ratchet/base/_button.scss

@@ -0,0 +1,101 @@
+/* ========================================================================== *
+ * c. Button module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Resizable / colorable buttons
+@mixin button($color: $cerulean, $size: normal, $fill: on, $bevel: off) {
+
+  // Define default variables
+  $font-size: 16px;
+  $color: $color;
+  $padding: 6px 20px;
+  $margin-top: 15px;
+  $margin-bottom: 31px;
+  $border-radius: if($bevel == on, 100px, $radius);
+
+  // Define color-based variables
+  @if $color == primary {
+    $color: $cerulean;
+  } @else if $color == secondary {
+    $color: $flush;
+  } @else if $color == success {
+    $color: $lima;
+  } @else if $color == failure {
+    $color: $punch;
+  }
+
+  // Define size-based variables
+  @if $size == small {
+    $font-size: 13px;
+    $padding: 3px 14px 0;
+    $margin-top: 15px;
+    $margin-bottom: 20px;
+  } @else if $size == large {
+    $padding: 10px 24px;
+    $margin-top: 15px;
+    $margin-bottom: 23px;
+  } @else if $size == x-large {
+    $font-size: 17px;
+    $padding: 14px 26px;
+    $margin-top: 15px;
+    $margin-bottom: 30px;
+  }
+
+  // Declarations
+  display: inline-flex;
+  width: auto;
+  text-align: center;
+  font-size: $font-size;
+  line-height: vr(2); // 30px
+  font-weight: 700;
+  cursor: pointer;
+  padding: $padding;
+  margin-top: $margin-top;
+  margin-bottom: $margin-bottom;
+  transition: $duration;
+  border-radius: $border-radius;
+
+  // Default
+  &,
+  &:visited {
+    @if $fill == on {
+      color: $white;
+      background: $color;
+      border: 1px solid darken($color, 3);
+    } @else {
+      color: $color;
+      background: transparent;
+      border: 1px solid $color;
+    }
+  }
+
+  // Active
+  &:hover,
+  &:focus,
+  &:active {
+    @if $fill == on {
+      color: $white;
+      background: darken($color, 3);
+      border: 1px solid darken($color, 3);
+    } @else if $fill == off and $color == $white {
+      color: $cerulean;
+      background: $color;
+    } @else {
+      color: $white;
+      background: $color;
+    }
+  }
+
+  // Disabled
+  &[disabled] {
+    color: $nobel;
+    background: $iron;
+    border-color: $alto;
+    text-shadow: none;
+    pointer-events: none;
+  }
+}

data/app/assets/stylesheets/ratchet/base/_document.scss

@@ -0,0 +1,306 @@
+/* ========================================================================== *
+ * g. Document module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * i. Utility
+ * ------------------------------------- */
+
+// Point at which mobile menu is visible
+$breakpoint: 800px;
+
+// Transparent headers (for use with hero banners)
+@mixin transparent-header {
+  margin-bottom: -$header-height;
+  z-index: 2;
+
+  &,
+  &:before {
+    background: transparent;
+  }
+
+  + main {
+    padding-top: 0;
+  }
+}
+
+// Transparent header extendable placeholder
+%transparent-header {
+  @include transparent-header;
+}
+
+// Header link styles
+%header-link {
+  cursor: pointer;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+// Logo home link styles
+%logo {
+  height: $header-height;
+  z-index: 4;
+
+  // SVG inherits structure & color
+  svg {
+    height: inherit;
+    fill: currentColor;
+  }
+}
+
+// Header button styles
+%header-button {
+  @include button($size: small, $color: $white, $fill: off, $bevel: on);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+// Mobile menu button styles
+%mobile-menu-button {
+
+  // Hidden on larger screens
+  @extend %hidden;
+
+  // Shown on smaller screens
+  @media (max-width: $breakpoint) {
+    @include shown;
+    z-index: 4;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    padding: 12px 10px;
+    box-shadow: 0 0 0 1px $white;
+    margin-left: auto;
+
+    span {
+      display: block;
+      width: 16px;
+      height: 2px;
+      background: $white;
+      transition: .5s opacity,
+                  .5s transform;
+    }
+
+    span:nth-child(2) {
+      margin: 3px 0;
+    }
+
+    // Fancy animation when menu open
+    .menu-open & span {
+      &:nth-child(1) { transform: translateY(5px)  rotate(-45deg);  }
+      &:nth-child(2) { transform: rotate(-45deg);  opacity: 0;      }
+      &:nth-child(3) { transform: translateY(-5px) rotate(-135deg); }
+    }
+  }
+}
+
+/* ===================================== *
+ * ii. Common
+ * ------------------------------------- */
+
+*,
+*:after,
+*:before {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+/* ===================================== *
+ * iii. Document
+ * ------------------------------------- */
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  color: $capecod;
+  font-weight: 300;
+  font-size: $base-size;
+  line-height: $base-height;
+}
+
+/* ===================================== *
+ * iv. Header
+ * ------------------------------------- */
+
+// Main site header
+header[role=banner] {
+  display: flex;
+  align-items: center;
+  height: $header-height;
+  z-index: 12;
+  color: $white;
+  @include padded-module; // 1100px width & 30px padding
+  @include cover-background($cerulean linear-gradient(to bottom right, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat fixed);
+
+  a {
+    @extend %header-link;
+
+    // Larger size on small screens
+    @media (max-width: $breakpoint) {
+      font-size: 16px;
+    }
+  }
+
+  // Logo home link
+  .logo {
+    @extend %logo;
+  }
+
+  // Registration button
+  .registration-button {
+    @extend %header-button;
+  }
+}
+
+/* ===================================== *
+ * v. Navigation
+ * ------------------------------------- */
+
+// Main site navigation
+header[role=banner] > nav[role=navigation] {
+  display: flex;
+  margin-left: auto;
+  align-items: baseline;
+  text-align: center;
+
+  // Give siblings space
+  a {
+    margin-left: 24px;
+  }
+}
+
+// Mobile menu button
+.mobile-menu-button {
+  @extend %mobile-menu-button;
+}
+
+// Smaller screens
+@media (max-width: $breakpoint) {
+
+  header[role=banner] a {
+    font-size: 16px;
+  }
+
+  // Main navigation
+  header[role=banner] > nav[role=navigation] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    opacity: 0;
+    z-index: 3;
+    flex-direction: column;
+    justify-content: center;
+    background: transparent;
+    transform: translateX(-9999px);
+    transition:
+      .5s opacity,
+      .5s background,
+       0s .5s transform;
+
+    a {
+      line-height: 21px;
+      margin: 5px 0;
+    }
+  }
+
+  // Menu open
+  .menu-open {
+
+    // Prevent body from scrolling
+    overflow: hidden;
+
+    // Main navigation
+    header[role=banner] > nav[role=navigation] {
+      left: 0;
+      opacity: 1;
+      transform: translateX(0);
+      background: rgba($shark, .95);
+      transition:
+        .5s opacity,
+        .5s background;
+    }
+  }
+}
+
+/* ===================================== *
+ * vi. Main
+ * ------------------------------------- */
+
+// Main content
+main {
+  flex: 1;
+  padding-top:    $header-height;
+  padding-bottom: $header-height;
+}
+
+/* ===================================== *
+ * vii. Footer
+ * ------------------------------------- */
+
+// Main site footer
+footer[role=contentinfo] {
+  color: $nobel;
+  @include padded-module; // 1100px width & 30px padding
+  @include cover-background($capecod);
+}
+
+ // footer[role="contentinfo"] {
+//   width: 100%;
+//   color: $aluminum;
+//   font-size: .778em;
+
+//   .footer-nav {
+//     // @extend %column-container;
+//   }
+
+//   dl {
+//     // @include one-of-four(false);
+
+//     @media (max-width: 720px) {
+//       // @include one-of-two(false);
+//     }
+//   }
+
+//   dt {
+//     @extend %caps;
+//     color: $white;
+//     margin-bottom: .5rem;
+//   }
+
+//   dd > a {
+//     display: inline;
+//     font-weight: 700;
+//     @include underlined-link(inherit, $white);
+
+//     &:after {
+//       content: '\A';
+//       white-space: pre;
+//     }
+//   }
+
+//   // Social icons
+//   .social-nav {
+//     margin-top: 1.5rem;
+//     @extend %social-icons;
+
+//     a {
+//       margin-bottom: 5px;
+//       @include rounded-btn($aluminum, $cerulean, $white, 30px);
+//     }
+//   }
+
+//   // Copyright
+//   p {
+//     font-size: .857em;
+//     text-align: center;
+//     margin-top: 40px;
+//     margin-bottom: 40px;
+//   }
+// }