aacinfo-theme 0.2.0 → 2.0.1

data/_sass/motion-ui/docs/installation.md

@@ -0,0 +1,50 @@
+# Getting Started
+
+## Installation
+
+Install Motion UI with npm or Bower.
+
+```bash
+npm install motion-ui --save
+bower install motion-ui --save
+```
+
+## Sass Usage
+
+To import the Sass files into a project, add the load path `[modules_folder]/motion-ui/src` to your Sass configuration, then `@import` the library:
+
+```scss
+@import 'motion-ui';
+```
+
+**[Autoprefixer](https://github.com/postcss/autoprefixer) is required to use this library.** The library uses unprefixed `transition` and `animation` properties, which are then prefixed by Autoprefixer.
+
+The library includes two mixins which export all of the [default CSS](classes.md) for the framework. This includes:
+
+- Transitions for slide, fade, hinge, scale, and spin
+- Animation classes for spinning, shaking, and wiggling
+- Modifier classes for transition/animation speed, timing, and delay
+
+```scss
+@include motion-ui-transitions;
+@include motion-ui-animations;
+```
+
+## CSS Usage
+
+The package files also include these pre-made classes as a standalone CSS file, in minified and unminified flavors.
+
+- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.css`
+- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.css`
+
+## JavaScript Usage
+
+The package includes a small JavaScript library to help you transition elements in and out using Motion UI classes. It can be referenced as a browser global or a CommonJS/AMD package. Like the CSS, there's uncompressed and compressed versions included.
+
+- **Uncompressed:** `[modules_folder]/motion-ui/dist/motion-ui.js`
+- **Compressed:** `[modules_folder]/motion-ui/dist/motion-ui.min.js`
+
+Refer to the full [JavaScript documentation](javascript.md) to learn more about how the JS library works.
+
+
+

data/_sass/motion-ui/docs/javascript.md

@@ -0,0 +1,36 @@
+# JavaScript
+
+Motion UI includes a small JavaScript library that can play transitions, although this specific library is not required to take advantage of Motion UI's CSS. Animating in reveals a hidden element, while animating out hides a visible element.
+
+The library is available on `window.MotionUI`, or can imported with a module system.
+
+## Usage
+
+The `MotionUI` object has two methods: `animateIn()` and `animateOut()`. Both functions take three parameters:
+
+- `element`: a DOM element to animate.
+- `animation`: a transition class to use.
+- `cb` (optional): a callback to run when the transition finishes. Within the callback, the value of `this` is the DOM element that was transitioned.
+
+Here's an example:
+
+```js
+var $elem = $('[data-animate]');
+
+MotionUI.animateIn($elem, 'slide-in', function() {
+  console.log('Transition finished!');
+});
+```
+
+What about animations? Those can be triggered just by adding the animation class to an element. Here are examples with plain JavaScript and with jQuery:
+
+```js
+// Plain JavaScript (IE10+)
+document.querySelector('.animating-thing').classList.add('wiggle');
+
+// jQuery
+$('.animating-thing').addClass('wiggle');
+```
+
+
+

data/_sass/motion-ui/docs/readme.md

@@ -0,0 +1,32 @@
+# Motion UI Documentation
+
+### [Installation](installation.md)
+
+Installing Motion UI.
+
+### [Transitions](transitions.md)
+
+Using CSS transitions to show and hide components.
+
+### [Animations](animations.md)
+
+Using CSS animations to add effects.
+
+### [CSS Classes](classes.md)
+
+Using the library's pre-made CSS classes.
+
+### [JavaScript](javascript.md)
+
+Using the JavaScript plugin to transition elements in and out.
+
+### [Configuration](configuration.md)
+
+Customizing Motion UI.
+
+### [WOW.js](wow.md)
+
+Using Motion UI with WOW.js.
+
+
+

data/_sass/motion-ui/docs/transitions.md

@@ -0,0 +1,112 @@
+# Transitions
+
+Each transition has its own mixin, with multiple parameters that can customize the details of the effect. To create a transition class, just `@include` the mixin inside a class. Motion UI will create the necessary boilerplate for you.
+
+Here's a basic fade in class. The first parameter of every transition mixin is a *state*, which is either `in` or `out`. In transitions reveal elements, while out transitions hide them.
+
+```scss
+.fade-in {
+  @include mui-fade(in);
+}
+```
+
+Here's what the CSS looks like.
+
+```css
+.fade-in.mui-enter {
+  opacity: 0;
+  transition-property: opacity; }
+
+.fade-in.mui-enter.mui-enter-active {
+  opacity: 1; }
+```
+
+The last three parameters of every transition mixin are the same: `$duration`, which sets the speed of the effect; `$timing`, which adjusts the easing; and `$delay`, which adds a delay before the effect starts.
+
+```scss
+.fade-in {
+  // A long, long fade
+  @include mui-fade(in, $duration: 10s);
+}
+```
+
+
+## Mixins
+
+
+### mui-fade()
+
+Creates a fade transition by adjusting the opacity of the element.
+
+**Parameters:**
+
+- `state` (Keyword) - State to transition to. (**Default:** in)
+- `from` (Number) - Opacity to start at. Must be a number between 0 and 1. (**Default:** 0)
+- `to` (Number) - Opacity to end on. (**Default:** 1)
+- `duration` (Keyword) - Length (speed) of the transition. (**Default:** null)
+- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
+- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null)
+
+
+### mui-hinge()
+
+Creates a hinge transition by rotating the element.
+
+**Parameters:**
+
+- `state` (Keyword) - State to transition to. (**Default:** in)
+- `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left)
+- `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge)
+- `perspective` (Length) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px)
+- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back)
+- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true)
+- `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
+- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
+- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null)
+
+
+### mui-slide()
+
+Creates a sliding transition by translating the element horizontally or vertically.
+
+**Parameters:**
+
+- `state` (Keyword) - State to transition to. (**Default:** in)
+- `direction` (Keyword) - Direction to slide to. Can be `up`, `right`, `down`, or `left`. (**Default:** left)
+- `amount` (Length) - Length of the slide as a percentage value. (**Default:** 100%)
+- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false)
+- `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
+- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
+- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null)
+
+
+### mui-spin()
+
+Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
+
+**Parameters:**
+
+- `state` (Keyword) - State to transition to. (**Default:** in)
+- `direction` (Boolean) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw)
+- `amount` (Number) - Amount to element the element. (**Default:** 0.75turn)
+- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false)
+- `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
+- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
+- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null)
+
+
+### mui-zoom()
+
+Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
+
+**Parameters:**
+
+- `state` (Keyword) - State to transition to. (**Default:** in)
+- `from` (Number) - Size to start at. (**Default:** 1.5)
+- `from` (Number) - Size to end at. (**Default:** 1)
+- `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true)
+- `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
+- `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
+- `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null)
+
+

data/_sass/motion-ui/docs/wow.md

@@ -0,0 +1,35 @@
+# WOW.js Integration
+
+Motion UI can be paired with [WOW.js](http://mynameismatthieu.com/WOW/) to trigger animations as elements scroll into view. **[Here's a CodePen that illustrates the concepts below](http://codepen.io/gakimball/pen/WrKRRy)**.
+
+To start, load the JavaScript for WOW.js. The quickest way to do this is by loading from a CDN:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
+```
+
+Next, in your main JavaScript file, initialize WOW:
+
+```js
+var wow = new WOW();
+wow.init();
+```
+
+Lastly, we need animation classes to add to elements. Because Motion UI is a transition-focused library, there aren't many animation classes that come out of the box. The built-in animation classes are `.wiggle`, `.shake`, `.spin-cw`, and `.spin-ccw`. However, creating out own animation class using any of the transition effects is easy, using Motion UI's Sass mixins.
+
+Here's a basic fade class. Refer to the [documentation on animations](animations.md) to learn more about how animations are built.
+
+```scss
+.animate-fade-in {
+  @include mui-animation(fade);
+}
+```
+
+Now we can apply this class to any element. We also add the class `.wow`, so WOW knows which elements to target as the page scrolls.
+
+```html
+<img class="wow animate-fade-in" src="//placekitten.com/300/300">
+```
+
+
+

data/_sass/motion-ui/gulpfile.js

@@ -0,0 +1,90 @@
+var $             = require('gulp-load-plugins')();
+var gulp          = require('gulp');
+var rimraf        = require('rimraf').sync;
+var sequence      = require('run-sequence');
+var supercollider = require('supercollider');
+
+var COMPATIBILITY = [
+  'last 2 versions',
+  'ie >= 10',
+  'and_chr >= 2.3'
+];
+
+supercollider
+  .config({
+    template: './docs/src/_template.hbs',
+    extension: 'md',
+    marked: false,
+    handlebars: require('./lib/handlebars')
+  })
+  .adapter('sass');
+
+gulp.task('clean', function(done) {
+  rimraf('./_build');
+  rimraf('./docs/*.md');
+  done();
+});
+
+gulp.task('docs', function() {
+  return gulp.src('./docs/src/*.md')
+    .pipe(supercollider.init())
+    .pipe(gulp.dest('./docs'));
+});
+
+gulp.task('sass', function() {
+  return gulp.src('./motion-ui.scss')
+    .pipe($.sass().on('error', $.sass.logError))
+    .pipe($.autoprefixer({
+      browsers: COMPATIBILITY
+    }))
+    .pipe(gulp.dest('./_build'));
+});
+
+gulp.task('javascript', function() {
+  return gulp.src('./motion-ui.js')
+    .pipe($.umd({
+      dependencies: function(file) {
+        return [{ name: 'jquery', amd: 'jquery', cjs: 'jquery', global: 'jQuery', param: '$' }];
+      },
+      exports: function(file) {
+        return 'MotionUI';
+      },
+      namespace: function(file) {
+        return 'MotionUI';
+      }
+    }))
+    .pipe(gulp.dest('./_build'));
+});
+
+gulp.task('dist', ['dist:sass', 'dist:javascript']);
+
+gulp.task('dist:sass', ['sass'], function() {
+  return gulp.src('./_build/motion-ui.css')
+    .pipe(gulp.dest('./dist'))
+    .pipe($.minifyCss())
+    .pipe($.rename('motion-ui.min.css'))
+    .pipe(gulp.dest('./dist'));
+});
+
+gulp.task('dist:javascript', ['javascript'], function() {
+  return gulp.src('./_build/motion-ui.js')
+    .pipe(gulp.dest('./dist'))
+    .pipe($.uglify())
+    .pipe($.rename('motion-ui.min.js'))
+    .pipe(gulp.dest('./dist'));
+});
+
+gulp.task('build', function(done) {
+  sequence('clean', ['docs', 'sass', 'javascript'], done);
+});
+
+gulp.task('lint', function() {
+  return gulp.src('./src/**/*.scss')
+    .pipe($.scssLint());
+})
+
+gulp.task('default', ['build'], function() {
+  gulp.watch(['./docs/src/*.md', './docs/src/_template.hbs'], ['docs']);
+  gulp.watch(['./src/**/*.scss', './motion-ui.scss'], ['sass']);
+  gulp.watch('./motion-ui.js', ['javascript']);
+});

data/_sass/motion-ui/lib/handlebars.js

@@ -0,0 +1,8 @@
+var handlebars = require('handlebars');
+
+handlebars.registerHelper('private', function(item, content) {
+  if (item.access === 'public') return content.fn(this);
+  else return content.inverse(this);
+});
+
+module.exports = handlebars;

data/_sass/motion-ui/motion-ui.js

@@ -0,0 +1,105 @@
+'use strict';
+
+// Polyfill for requestAnimationFrame
+(function() {
+  if (!Date.now)
+    Date.now = function() { return new Date().getTime(); };
+
+  var vendors = ['webkit', 'moz'];
+  for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+      var vp = vendors[i];
+      window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
+      window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
+                                 || window[vp+'CancelRequestAnimationFrame']);
+  }
+  if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)
+    || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+    var lastTime = 0;
+    window.requestAnimationFrame = function(callback) {
+        var now = Date.now();
+        var nextTime = Math.max(lastTime + 16, now);
+        return setTimeout(function() { callback(lastTime = nextTime); },
+                          nextTime - now);
+    };
+    window.cancelAnimationFrame = clearTimeout;
+  }
+})();
+
+var initClasses   = ['mui-enter', 'mui-leave'];
+var activeClasses = ['mui-enter-active', 'mui-leave-active'];
+
+// Find the right "transitionend" event for this browser
+var endEvent = (function() {
+  var transitions = {
+    'transition': 'transitionend',
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'transitionend',
+    'OTransition': 'otransitionend'
+  }
+  var elem = window.document.createElement('div');
+
+  for (var t in transitions) {
+    if (typeof elem.style[t] !== 'undefined') {
+      return transitions[t];
+    }
+  }
+
+  return null;
+})();
+
+function animate(isIn, element, animation, cb) {
+  element = $(element).eq(0);
+
+  if (!element.length) return;
+
+  if (endEvent === null) {
+    isIn ? element.show() : element.hide();
+    cb();
+    return;
+  }
+
+  var initClass = isIn ? initClasses[0] : initClasses[1];
+  var activeClass = isIn ? activeClasses[0] : activeClasses[1];
+
+  // Set up the animation
+  reset();
+  element.addClass(animation);
+  element.css('transition', 'none');
+  requestAnimationFrame(function() {
+    element.addClass(initClass);
+    if (isIn) element.show();
+  });
+
+  // Start the animation
+  requestAnimationFrame(function() {
+    element[0].offsetWidth;
+    element.css('transition', '');
+    element.addClass(activeClass);
+  });
+
+  // Clean up the animation when it finishes
+  element.one('transitionend', finish);
+
+  // Hides the element (for out animations), resets the element, and runs a callback
+  function finish() {
+    if (!isIn) element.hide();
+    reset();
+    if (cb) cb.apply(element);
+  }
+
+  // Resets transitions and removes motion-specific classes
+  function reset() {
+    element[0].style.transitionDuration = 0;
+    element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
+  }
+}
+
+var MotionUI = {
+  animateIn: function(element, animation, cb) {
+    animate(true, element, animation, cb);
+  },
+
+  animateOut: function(element, animation, cb) {
+    animate(false, element, animation, cb);
+  }
+}