shoulders 0.0.1

data/lib/shoulders.rb

@@ -0,0 +1,11 @@
+require 'compass'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('shoulders', :path => extension_path)
+
+module Sass::Script::Functions
+  def str_replace(needle, replace, haystack)
+    result = haystack.value.gsub(needle.value, replace.value)
+    Sass::Script::String.new(result)
+  end
+end

data/stylesheets/_shoulders.scss

@@ -0,0 +1,9 @@
+@import "compass";
+
+@import "shoulders/border-box";
+@import "shoulders/fluid-media";
+@import "shoulders/progressive-enhancement";
+@import "shoulders/selectors";
+@import "shoulders/triangle";
+@import "shoulders/units";
+@import "shoulders/vertical-center";

data/stylesheets/shoulders/_border-box.scss

@@ -0,0 +1,9 @@
+// Applies a natural box layout model to all elements.
+// @see From http://paulirish.com/2012/box-sizing-border-box-ftw/
+@import "compass/css3/box-sizing";
+
+*,
+*:after,
+*:before {
+  @include box-sizing(border-box);
+}

data/stylesheets/shoulders/_fluid-media.scss

@@ -0,0 +1,49 @@
+// Fluid Embeds and whatever WITH NO JAVASCIPT!
+$intrinsic-ratio: 16/9 !default;
+$intrinsic-ratio-width: 100% !default;
+$intrinsic-ratio-elements: '*' !default;
+$intrinsic-ratio-extend: true !default;
+
+@mixin intrinsic-ratio-parent {
+  position: relative;
+  height: 0;
+}
+
+@mixin intrinsic-ratio-child {
+  display: block;
+  position: absolute;
+  width: 100% !important; // Nuke the external styles
+  height: 100% !important; // Nuke the external styles
+  top: 0;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
+  @if not $extend {
+    @include intrinsic-ratio-parent;
+  }
+  @else {
+    @extend %intrinsic-ratio-parent;
+  }
+  padding-top: (1 / $ratio) * $width;
+  width: $width;
+  @each $element in $elements {
+    > #{$element} {
+      @if not $extend {
+        @include intrinsic-ratio-child;
+      }
+      @else {
+        @extend %intrinsic-ratio-child;
+      }
+    }
+  }
+}
+
+%intrinsic-ratio-parent {
+  @include intrinsic-ratio-parent;
+}
+
+%intrinsic-ratio-child {
+  @include intrinsic-ratio-child;
+}

data/stylesheets/shoulders/_progressive-enhancement.scss

@@ -0,0 +1,48 @@
+/**
+ * Enhance From.
+ * Modernizr feature (base CSS class name)
+ */
+@mixin enhance-with($feature) {
+  .#{$feature} & {
+    @content;
+  }
+}
+
+/**
+ * Degrade From.
+ * Modernizr feature (base CSS class name)
+ */
+@mixin degrade-from($feature, $no-js: true) {
+  @if $feature == 'js' or not $no-js {
+    .no-#{$feature} & {
+      @content;
+    }
+  }
+  @else {
+    .no-#{$feature} &,
+    .no-js & {
+      @content;
+    }
+  }
+}
+
+/**
+ * Completely remove from the flow and screen readers.
+ */
+@mixin hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+/**
+ * Completely remove from the flow but leave available to screen readers.
+ */
+@mixin visible-hidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}

data/stylesheets/shoulders/_selectors.scss

@@ -0,0 +1,22 @@
+// nth-child() support for IE 7 and 8
+@function nth-child($n) {
+
+  // If a single number for nth.
+  @if type-of($n) == number {
+    $nth-child: first-child;
+    @for $i from 2 through $n {
+      $nth-child: append($nth-child, #{"+*"});
+    }
+    @return #{":"}$nth-child;
+  }
+
+  // If a nth-child string, need to parse the string.
+  @else {
+    $n: nth(children-of-ie-nth($n), 1);
+    $nth-child: first-child;
+    @for $i from 2 through $n {
+      $nth-child: append($nth-child, #{"~*"});
+    }
+    @return #{":"}$nth-child;
+  }
+}

data/stylesheets/shoulders/_triangle.scss

@@ -0,0 +1,43 @@
+// Draw triangles
+@mixin triangle($color: #000, $height: 1em, $width: 1em, $angle: 0) {
+
+  // Offset 45deg to make each side start at 0
+  $deg: $angle + 45;
+  // If units, remove units
+  @if unit($deg) == deg {
+    $deg: $deg / 1deg;
+  }
+  // Shift to be on a scale from 0 to 90.
+  @while $deg > 90 {
+    $deg: $deg - 90;
+  }
+  @while $deg < 0 {
+    $deg: $deg + 90;
+  }
+  // Get a ratio of 90 to multiply by.
+  $deg: $deg / 90;
+
+  // Make sure metrics are reset
+  display: block;
+  width: 0;
+  height: 0;
+  border: 0 solid transparent;
+
+  // Run through sides
+  @if $angle <= 45 or $angle > 315 {
+    border-bottom-color: $color;
+    border-width: 0 ($width * abs($deg - 1)) $height ($width * $deg);
+  }
+  @if $angle > 45 and $angle <= 135 {
+    border-left-color: $color;
+    border-width: ($height * $deg) 0 ($height * abs($deg - 1)) $width;
+  }
+  @if $angle > 135 and $angle <= 225 {
+    border-top-color: $color;
+    border-width: $height ($width * $deg) 0 ($width * abs($deg - 1));
+  }
+  @if $angle > 225 and $angle <= 315 {
+    border-right-color: $color;
+    border-width: ($height * abs($deg - 1)) $width ($height * $deg) 0;
+  }
+}

data/stylesheets/shoulders/_units.scss

@@ -0,0 +1,66 @@
+/**
+ * Convert pixel units to em.
+ *
+ * Example: margin-right: pem(16);
+ */
+@function pem($target-px, $context: $base-font-size) {
+  @return ($target-px / $context) * 1em;
+}
+
+/**
+ * Mixin that converts pixel values to em values for whatever property is passed to it.
+ *
+ * Example: @include pem("padding", 10px 0 2px 5px);
+ */
+@mixin pem($property, $px-values, $context: $base-font-size) {
+  // If there is only one (numeric) value, return the property/value line for it.
+  @if type-of($px-values) == "number" {
+    #{$property}: pem($px-values, $context);
+  }
+  @else {
+    // Create an empty list that we can dump values into
+    $pem-values: unquote("");
+    @each $value in $px-values {
+      // If the value is zero, return 0
+      @if $value == 0 {
+        $pem-values: append($pem-values, $value);
+      }
+      @else {
+        $pem-values: append($pem-values, pem($value, $context));
+      }
+    }
+    // Return the property and its list of converted values
+    #{$property}: $pem-values;
+  }
+}
+
+/**
+ * Mixin that converts pixel values to rem values for whatever property is passed to it.
+ *
+ * Example: @include rem("padding", 10px 0 2px 5px);
+ */
+@mixin rem($property, $px-values) {
+  // Convert the baseline into rems
+  $baseline-rem: $base-font-size / 1rem;
+  // Print the first line in pixel values
+  #{$property}: $px-values;
+  // If there is only one (numeric) value, return the property/value line for it.
+  @if type-of($px-values) == "number" {
+    #{$property}: $px-values / $baseline-rem;
+  }
+  @else {
+    // Create an empty list that we can dump values into
+    $rem-values: unquote("");
+    @each $value in $px-values {
+      // If the value is zero, return 0
+      @if $value == 0 {
+        $rem-values: append($rem-values, $value);
+      }
+      @else {
+        $rem-values: append($rem-values, $value / $baseline-rem);
+      }
+    }
+    // Return the property and its list of converted values
+    #{$property}: $rem-values;
+  }
+}

data/stylesheets/shoulders/_vertical-center.scss

@@ -0,0 +1,20 @@
+$legacy-support-for-ie: true !default;
+
+// Vertical Align of content with IE fallback
+// Adapted from http://css-tricks.com/vertically-center-multi-lined-text
+@mixin vertical-center {
+  display: table-cell;
+  vertical-align: middle;
+
+  @if $legacy-support-for-ie {
+    margin-top: inherit;
+    *clear: expression(
+    style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
+    style.clear = "none", 0
+    );
+  }
+}
+
+%vertical-center {
+  @include vertical-center;
+}

data/templates/project/_base-all.scss

@@ -0,0 +1,7 @@
+@import "settings";
+@import "variables";
+@import "functions";
+@import "mixins";
+@import "extendables";
+@import "elements";
+@import "utilities";

data/templates/project/_elements.scss

@@ -0,0 +1,486 @@
+/* normalize.css v2.0.1 | MIT License | git.io/normalize */
+/* normalize.scss v2.0.1+build.2 | MIT/GPLv2 License | bit.ly/normalize-with-compass */
+
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+audio,
+canvas,
+video {
+    display: inline-block;
+    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+        *display: inline;
+        *zoom: 1;
+    }
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ */
+html {
+    font-family: $base-font-family; /* 1 */
+    font-size: 100% * ($base-font-size / 16px); /* 3 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    /* Establish a vertical rhythm unit using $base-line-height. */
+    @include adjust-leading-to(1);
+}
+
+@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    /**
+     * Address `font-family` inconsistency between `textarea` and other form
+     * elements in IE 6/7.
+     */
+    button,
+    input,
+    select,
+    textarea {
+        font-family: $base-font-family;
+    }
+}
+
+/**
+ * Remove default margin.
+ */
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Set 1 unit of vertical rhythm on the top and bottom margin.
+ */
+p,
+pre {
+    margin: rhythm(1) 0;
+}
+
+blockquote {
+    /* Set 1 unit of vertical rhythm on the top and bottom margin. */
+    margin: rhythm(1) $indent-amount;
+}
+
+/**
+ * Address variable `h1` font size within `section` and `article` contexts in
+ * Firefox 4+, Safari 5, and Chrome.
+ */
+h1 {
+    /* Set the font-size and line-height while keeping a proper vertical rhythm. */
+    @include adjust-font-size-to( $h1-font-size );
+
+    /* Set 1 unit of vertical rhythm on the top and bottom margins. */
+    @include leader(1, $h1-font-size);
+    @include trailer(1, $h1-font-size);
+}
+
+h2 {
+    @include adjust-font-size-to( $h2-font-size );
+    @include leader(1, $h2-font-size);
+    @include trailer(1, $h2-font-size);
+}
+
+h3 {
+    @include adjust-font-size-to( $h3-font-size );
+    @include leader(1, $h3-font-size);
+    @include trailer(1, $h3-font-size);
+}
+
+h4 {
+    @include adjust-font-size-to( $h4-font-size );
+    @include leader(1, $h4-font-size);
+    @include trailer(1, $h4-font-size);
+}
+
+h5 {
+    @include adjust-font-size-to( $h5-font-size );
+    @include leader(1, $h5-font-size);
+    @include trailer(1, $h5-font-size);
+}
+
+h6 {
+    @include adjust-font-size-to( $h6-font-size );
+    @include leader(1, $h6-font-size);
+    @include trailer(1, $h6-font-size);
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    @if $legacy-support-for-ie6 {
+        _font-family: 'courier new', monospace;
+    }
+    @include adjust-font-size-to( 1 * $base-font-size );
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/**
+ * Set consistent quote types.
+ */
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+/**
+ * Set 1 unit of vertical rhythm and a consistent indentation.
+ */
+dl,
+menu,
+ol,
+ul {
+    margin: rhythm(1) 0;
+    padding: 0 0 0 $indent-amount;
+}
+
+dl {
+    padding: 0;
+}
+
+dd {
+    margin: 0 0 0 $indent-amount;
+}
+
+@if $legacy-support-for-ie7 {
+    /**
+     * Correct list images handled incorrectly in IE 7.
+     */
+    nav ul,
+    nav ol {
+        list-style: none;
+        list-style-image: none;
+    }
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+img {
+    border: 0;
+    @if $legacy-support-for-ie7 {
+        /* Improve image quality when scaled in IE 7. */
+        -ms-interpolation-mode: bicubic;
+    }
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    /**
+     * Correct margin displayed oddly in IE 6/7.
+     */
+    form {
+        margin: 0;
+    }
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+    border-color: #c0c0c0;
+    margin: 0 2px;
+    /* Apply borders and padding that keep the vertical rhythm. */
+    @include apply-side-rhythm-border(top,    $width: 1px, $lines: 0.35);
+    @include apply-side-rhythm-border(bottom, $width: 1px, $lines: 0.65);
+    @include apply-side-rhythm-border(left,  $width: 1px, $lines: 0.625);
+    @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.625);
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+        *margin-left: -7px; /* 3 */
+    }
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ * 4. Improve appearance and consistency with IE 6/7.
+ */
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+        vertical-align: baseline; /* 4 */
+        *vertical-align: middle; /* 4 */
+    }
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    @if $legacy-support-for-ie7 {
+        *overflow: visible; /* 4 */
+    }
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+    @include box-sizing(border-box); /* 1 */
+    padding: 0; /* 2 */
+    @if $legacy-support-for-ie7 {
+        *height: 13px; /* 3 */
+        *width: 13px; /* 3 */
+    }
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    @include box-sizing(content-box); /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}