plinth 0.0.1.beta.1

data/vendor/assets/javascripts/plinth/plugins/tbg-switch.js.coffee

@@ -0,0 +1,121 @@
+# ============================================================
+# TBG switch v0.0.1
+# ============================================================
+# Copyright 2012 The Beans Group
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+plugin = ($)->
+
+  "use strict"  
+
+  # SWITCH CLASS DEFINITION
+  # 
+  # @example How to ensure plugin self initialises on element
+  #     <div data-switch="true"> ... </div>
+  # 
+  # @example How to group switches and allow them to change state of other switches in that group
+  #     <div data-switch-group="[group name]"> ... </div>
+  # 
+  # @example How to toggle switch state
+  #     <div data-switch-toggle="true"> ... </div>
+  #
+  class Switch 
+    
+    # Construct a new Switch instance
+    #
+    # Set this.parent, this.target, this.group and this.container elements for this.el; set this.toggle if attribute present
+    #
+    # @param [Object] el HTMLElement, this.el, that acts as the switch
+    #
+    constructor: ( @el ) ->
+      @parent = if (parent = @el.parent('li')).length then parent else @el.parent()
+      @content = @_getContent @el
+      @toggle = @el.attr('data-switch-toggle')?
+      @group = if ( groupName = @el.attr('data-switch-group') ) then $("[data-switch-group='#{groupName}']")
+      @container = @el.closest 'ul'
+
+    activeClass: "is-active"
+
+    _constructor: Switch
+
+    # Click handler - If this.parent isn't active, close group if this.group defined and change state to true;
+    #   if this.parent is active and this.toggle set then change state to false otherwise return undefined
+    #
+    click: ->
+      if @parent.hasClass(@activeClass)
+        if @toggle then return @changeStateTo false else return
+
+      @_closeGroup() if @group
+
+      @changeStateTo true
+
+    # Change active state of target content - add or remove activeClass from content and parent elements
+    #
+    # @param [Boolean] action true to addClass to elements, false to removeClass from elements
+    # @param [Array] elements array of jQuery wrapped HTMLElements - target content element and parent element
+    #
+    changeStateTo: (action, elements =  [@content, @parent]) ->
+      el["#{if action then "add" else "remove"}Class"] @activeClass for el in elements
+
+    # Close group - if any content is active, get the target for that element's descendant link element and pass false and
+    #   elements array [activeContent, activeEl] to switch group
+    #
+    # @private
+    #
+    _closeGroup: ->
+      if (activeEl = @container.find("li.#{@activeClass}")).length
+        activeContent = @_getContent activeEl.children('a')
+        @changeStateTo false, [activeContent, activeEl]
+
+    # Get target element to do switch on
+    #
+    # @private
+    # @param [Object] el jQuery wrapped HTMLElement to get target element from
+    # @return [Object] jQuery wrapped HTMLElement for el's target element
+    #
+    _getContent: ( el ) ->
+      $(el.attr 'href')
+
+
+
+  # SWITCH PLUGIN DEFINITION
+  # ==========================
+
+  $.fn.switch = ( option ) ->
+    this.each ->
+      $this = $(@)
+      data = $this.data 'switchPlugin'
+      if !data then $this.data 'switchPlugin', (data = new Switch $this)
+      if typeof option is 'string' then data[option]()
+  
+  $.fn.switch.Constructor = Switch
+  
+  
+  # DATA API
+  # ===================================
+  
+  $ ->
+    $('body').on 'click.switch.data-api', '[data-switch]', ( e ) ->
+      $el = if (el =  $(e.target)).is('a') then el else el.closest('a')
+      $el.switch('click')
+      e.preventDefault()
+
+do ( plugin ) ->
+  if typeof define is 'function' and define.amd
+    # AMD. Register as an anonymous module.
+    define(['jquery'], plugin);
+  else
+    # Browser globals
+    plugin(jQuery)

data/vendor/assets/stylesheets/_functions.scss

@@ -0,0 +1,28 @@
+//
+// SASS Functions
+// @author Ad Taylor
+//
+
+
+// ==========================================================================
+// Convert number to word - https://github.com/zurb/foundation/blob/master/scss/foundation/functions/_convert-number-to-word.scss
+// ==========================================================================
+
+@function convert-number-to-word($num) {
+  $count:1;
+  @each $word in one,two,three,four,five,six,seven,eight,nine,ten,eleven,
+  twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,
+  twenty,twentyone,twentytwo,twentythree,twentyfour{
+    @if ($count == $num) { @return $word; }
+    $count: $count + 1;
+  }
+  @return "invalid";
+}
+
+// ========================================================================
+// Grid Calculation for Percentages - https://github.com/zurb/foundation/blob/master/scss/foundation/functions/_grid-calc.scss
+// ========================================================================
+
+@function gridCalc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}

data/vendor/assets/stylesheets/_mixins.css.scss

@@ -0,0 +1,273 @@
+//
+// Mixins to help reduce verbose repeating markup
+// @author Ad Taylor
+//
+
+// ==========================================================================
+// Column helper
+// For each grid, output conditional display classes, within media queries if appropriate
+// ==========================================================================
+
+@mixin create-conditional-classes($grids) {
+  @each $grid in $grids {
+    $grid-name: nth($grid, 1);
+
+    @each $nested-grid in $grids {
+      $nested-grid-name: nth($nested-grid, 1);
+
+      @include is-responsive($nested-grid){
+        @include conditional-display($grid-name, $nested-grid-name);
+      }      
+    }
+  }
+}
+
+// ==========================================================================
+// Column helper
+// Abstract the conditional display classes from @mixin create-conditional-classes
+// ==========================================================================
+
+@mixin conditional-display($grid-name, $nested-grid-name){  
+  @if($grid-name == $nested-grid-name) {
+    .#{$grid-name}hide{display:none !important}
+    .#{$grid-name}only{display:block !important}
+  }
+  @else {
+    .#{$grid-name}hide{display:block !important}
+    .#{$grid-name}only{display:none !important}
+  }
+}
+
+// ==========================================================================
+// Create column sizes
+// ==========================================================================
+
+@mixin create-column-sizes($grids) {
+  $query-pos: 4;
+  @each $grid in $grids {
+    // If there is a media query
+    @if(length($grid) == 1){}
+    @else if(length($grid) >= $query-pos) {
+      @include media-query($grid) {
+        @include build-column-size($grid);
+      }
+    }
+    @else {
+      @include build-column-size($grid);
+    }
+  }
+  @include create-conditional-classes($grids);
+}
+
+// ==========================================================================
+// Build column size
+// ==========================================================================
+
+@mixin build-column-size($grid) {
+  $padding-pos: 3;
+  $total-columns: nth($grid,2);
+
+  @if(length($grid) >= $padding-pos ) {
+    .column {
+      padding: 0 (0.5 * nth($grid,$padding-pos));
+      @if($total-columns > 1){
+        float: left;
+        width: 100%;
+        & + &:last-child {
+          float: right;
+        }
+      }
+    }
+  }
+
+  @if($total-columns > 1) {
+    @for $i from 1 through $total-columns {
+      .#{nth($grid,1)}#{convert-number-to-word($i)} {
+        width: gridCalc($i, $total-columns);
+      }
+      .#{nth($grid,1)}push-#{convert-number-to-word($i)} {
+        left: gridCalc($i, $total-columns);
+      }
+      .#{nth($grid,1)}pull-#{convert-number-to-word($i)} {
+        right: gridCalc($i, $total-columns);
+      }
+    }
+    .#{nth($grid,1)}push-none {
+      left: 0;
+    }
+    .#{nth($grid,1)}pull-none {
+      right: 0;
+    }
+  }
+}
+
+// ==========================================================================
+// Conditional CSS - JS Detection
+// ==========================================================================
+
+@mixin conditional-CSS($grids) {
+  $query-pos: 5;
+
+  @each $grid in $grids {
+    @if(length($grid) < $query-pos){
+      body:after {
+        content: nth($grid,1);
+        display: none;
+      }
+    }
+    @else {
+      @include media-query($grid) {
+        body:after {
+          content:nth($grid, 1);
+          display:none;
+        }
+      }
+    }
+  }
+}
+
+// ==========================================================================
+// Simple Media Query Generator
+// ==========================================================================
+
+@mixin media-query($gridObj) {
+  @if length($gridObj) > 3 {
+    $queryType: nth($gridObj, 4);
+    $querySize: nth($gridObj, 5);
+
+    @include respond-to($queryType, $querySize) {
+      @content;
+    }
+  }
+}
+
+// ==========================================================================
+// Micro Clearfix - Nicolas Gallagher
+// ==========================================================================
+
+@mixin clearfix() { *zoom:1;
+  &:before, &:after { content: ""; display: table; }
+  &:after { clear: both; }
+}
+
+// ==========================================================================
+// Internet Explorer Fixes
+// ==========================================================================
+
+// IE7 inline-block ~ twitter bootstrap
+
+@mixin ie7-inline-block {
+  *display: inline;
+  *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.  ~ twitter bootstrap
+
+@mixin ie7-restore-left-whitespace {
+  *margin-left: .3em;
+
+  &:first-child {
+    *margin-left: 0;
+  }
+}
+
+// ==========================================================================
+// Accessibility
+// ==========================================================================
+
+@mixin set-focus {
+  outline: 3px solid yellow;
+}
+
+
+// ==========================================================================
+// Uncle Dave's Ol' Padded Box
+// ==========================================================================
+
+@mixin ol-padded-box($ratioW, $ratioH) {
+  background-size: cover;
+  height: 0;
+  display: block;
+  padding-bottom: 0% + ($ratioH/$ratioW)*100;
+}
+
+
+// ==========================================================================
+// Smallest query
+// Output within a media query for the smallest breakpoint
+// @param [Boolean] $ie-override - if true and $old-ie true, output regularly
+// ==========================================================================
+
+@mixin smallest-query($ie-override: false) {
+  @if length($grids) > 1 {
+    $length: length($grids);
+    $mobile: nth($grids, 2);
+
+    @include media-query($mobile) {
+      @content;
+    }
+  }
+  // If old IE and override both set,
+  // output without query
+  @if $old-ie and $ie-override {
+    @content;
+  }
+}
+
+// ==========================================================================
+// Is Responsive? - helper
+// Pass in content to be conditionally output either in a media query or by default
+// ==========================================================================
+
+@mixin is-responsive($grid){
+  @if length($grid) > 3 {
+    @include media-query($grid){
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
+// ==========================================================================
+// Respond to - helper
+// If IE has a fixed query ($fixed-mqs) set, output it by default, otherwise output media query
+// ==========================================================================
+
+@mixin respond-to($query, $size) {  
+  @if $fixed-mqs {
+    @if $query == "max" {
+      @if $container-width == $size {
+        @content;
+      }
+    }
+    @else if $query == "min" {
+      @if $container-width == $size {
+        @content;
+      }
+    }
+  }
+  @else {
+    // output normally
+    @media ("#{$query}-width: #{$size}") {
+      @content;
+    }
+  }
+}
+
+// ==========================================================================
+// Old IE
+// If old IE version (7,8) output IE only styles
+// ==========================================================================
+
+@mixin old-ie {
+  @if $old-ie {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/_settings.css.scss

@@ -0,0 +1,120 @@
+//
+// Site wide settings
+// $author Ad Taylor
+//
+
+// ==========================================================================
+// Grids
+// ==========================================================================
+
+$setBoxSizing: true !default;
+$container-width: 960px !default;
+$container-max-width: 100% !default;
+$container-min-width: 320px !default;
+
+$columns: 12 !default;
+$column-gutter: 20px !default;
+
+
+$mob: 'mobile-', 1, 20px;
+$desk: '', $columns, $column-gutter, "min", $container-width;
+
+$grids : $mob, $desk !default;
+
+$fixed-mqs: false !default;
+$old-ie: false !default;
+
+// ==========================================================================
+// Colour Functions
+// ==========================================================================
+
+// Can be extended to add more shades:
+//      $blue-shades: join($blue-shades, rgb(13, 89, 224) );
+
+$mono-shades: #201b21, #4d4d4d, #999999, #dcdde0, #f6f7fb !default;
+@function mono($shade:1) {
+  @return nth($mono-shades, $shade);
+}
+
+
+$blue-shades: #137795, #2ba6cb, #b1e5f5 !default;
+@function blue($shade:1) {
+  @return nth($blue-shades, $shade);
+}
+
+$orange-shades: #ff6633, #a32900 !default;
+@function orange($shade:1) {
+  @return nth($orange-shades, $shade);
+}
+
+$green-shades: #6b9b20, #557821 !default;
+@function green($shade:1) {
+  @return nth($green-shades, $shade);
+}
+
+
+// ==========================================================================
+// Colours
+// ==========================================================================
+
+$main-color: mono() !default;
+$main-color-hover: mono(3) !default;
+$secondary-color: blue() !default;
+$alert-color: #c60f13 !default;
+$success-color: green() !default;
+$txt-color: mono(2) !default;
+$body-color: #fff !default;
+$bg-cover: mono(3) !default;
+$black: mono() !default;
+$white: #fff !default;
+$shiny-edge: rgba(#fff, .8) !default;
+$dark-edge: rgba(#000, .2) !default;
+
+// icons
+$facebook-color: #3c5994 !default;
+$twitter-color: #2ca7c8 !default;
+$email-color: #f70015 !default;
+
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
+
+// Module scale
+$baseFontSize: 16px !default;
+$importantModNum: 145px !default;
+$base-size: $baseFontSize $importantModNum;
+$ratio: fifth() !default;
+
+$base-font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
+$base-line-height: 1.5;
+$base-line-height-px: 24px;
+
+
+$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$header-font-weight: bold !default;
+$header-font-color: #222 !default;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-weight: normal !default;
+$body-font-color: $txt-color !default;
+
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+$btn-radius: 4px !default;
+$btn-base: 10px !default;
+
+$small-btn-base: $btn-base - 2 !default;
+$large-btn-base: $btn-base + 4 !default;
+
+
+
+
+// ==========================================================================
+// Media Queries
+// ==========================================================================
+
+$screen-small: 768px !default;
+$screen-medium: 1279px !default;
+$screen-xlarge: 1441px !default;

data/vendor/assets/stylesheets/plinth/base/_all.css.scss

@@ -0,0 +1,7 @@
+@import "reset";
+@import "type";
+@import "lists";
+@import "labels";
+@import "form";
+@import "buttons";
+