guff-compass 0.7.0

data/docs/public/stylesheets/normalize.css

@@ -0,0 +1,375 @@
+/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Sets default font family to sans-serif.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Removes default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
+ * Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+}
+
+/*
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+
+/*
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Sets consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/*
+ * Prevents `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;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * Removes border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/*
+ * Addresses 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. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes 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;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves 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;
+}

data/guff.gemspec

@@ -0,0 +1,16 @@
+Gem::Specification.new do |spec|
+  spec.name          = "guff-compass"
+  spec.version       = "0.7.0"
+  spec.authors       = ["Ken Wheeler"]
+  spec.email         = ["ken@outlook.com"]
+  spec.summary       = %q{ All the Sass framework you need. }
+  spec.description   = %q{ All the Sass framework you need.}
+  spec.homepage      = "http://kenwheeler.github.io/guff/"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency('sass', ">= 3.2")
+  spec.add_dependency("compass", [">= 0.11"])
+end

data/guff.scss

@@ -0,0 +1,514 @@
+// ###Reset
+
+// Mixin Reset
+@mixin reset(){
+
+  // Reset all browser styles & set font-size to 100%
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  // Set HTML5 elements to block
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, main, menu, nav, section {
+    display: block;
+  }
+
+  // Remove built in list styling
+  ol, ul {
+    list-style: none;
+  }
+
+  // Remove link underlining
+  a {
+    text-decoration: none;
+  }
+
+  // Normalize block quotes
+  blockquote, q {
+    quotes: none;
+  }
+
+  // Remove pseudo elements
+  blockquote:before, blockquote:after,
+  q:before, q:after {
+    content: '';
+    content: none;
+  }
+
+  // Normalize tables
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  // Global border-box
+  * {
+    @include box-sizing(border-box);
+  }
+
+}
+// ###Settings
+
+// Set base font size
+$rem-base: 16px !default;
+// Set line height ratio base
+$line-height-base: 26px !default;
+// Vertical rhythm ratio
+$type-rhythm-ratio: 1.14 !default;
+// Desktop Media Query
+$desktop: "(min-width: 1024px)" !default;
+// Tablet Media Query
+$tablet: "(min-width: 768px) and (max-width: 1023px)" !default;
+// Mobile Media Query
+$mobile: "(max-width: 767px)" !default;
+// Set Grid Column Count
+$grid-columns: 12 !default;
+// Set Grid Gutter (as px)
+$grid-gutter: 20px !default;
+// Set Grid Padding (as px)
+$grid-padding: 20px !default;
+// Set Grid Max Width (as px)
+$grid-max-width: 1024px !default;
+// ###Functions
+
+// Strips unit suffix from value
+@function _strip-unit($num) {
+  @if type-of($num) != "number" {
+    @warn "num: #{$num} is not a number";
+    @return null;
+  }
+  @return $num / ($num * 0 + 1);
+}
+
+// Converts to rem, utility for rem-calc
+@function _convert-to-rem($value, $base-value: $rem-base)  {
+  @if type-of($value) != "number" {
+    @warn "value: #{$value} is not a number";
+    @return null;
+  }
+  @if type-of($base-value) != "number" {
+    @warn "base-value: #{$base-value} is not a number";
+    @return null;
+  }
+  $value: _strip-unit($value) / _strip-unit($base-value) * 1rem;
+  @if (_strip-unit($value) == 0) { $value: 0; } // Turn 0rem into 0
+  @return $value;
+}
+
+// Calculates rem value from number
+@function rem-calc($values, $base-value: $rem-base) {
+  @if type-of($values) != "number" {
+    @warn "values: #{$values} is not a number";
+    @return null;
+  }
+  @if type-of($base-value) != "number" {
+    @warn "base-value: #{$base-value} is not a number";
+    @return null;
+  }
+  $max: length($values);
+  @if $max == 1 { @return _convert-to-rem(nth($values, 1), $base-value); }
+  $remValues: ();
+  @for $i from 1 through $max {
+    $remValues: append($remValues, _convert-to-rem(nth($values, $i), $base-value));
+  }
+  @return $remValues;
+}
+
+// Gets grid column width
+@function span($cols: 4) {
+  @if type-of($cols) != "number" {
+    @warn "cols: #{$cols} is not a number";
+    @return null;
+  }
+  @if type-of($grid-columns) != "number" {
+    @warn "grid-columns: #{$grid-columns} is not a number";
+    $valid: false;
+  }
+  @return percentage($cols/$grid-columns);
+}
+// ###Mixins
+
+// Sets container styles
+@mixin container {
+  $valid: true;
+  @if type-of($grid-max-width) != "number" {
+    @warn "grid-max-width: #{$grid-max-width} is not a number";
+    $valid: false;
+  }
+  @if type-of($rem-base) != "number" {
+    @warn "rem-base: #{$rem-base} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    width: 100%;
+    max-width: $grid-max-width;
+    @include clear;
+  }
+}
+
+// Sets col container styles
+@mixin col-container {
+  $valid: true;
+  @if type-of($grid-max-width) != "number" {
+    @warn "grid-max-width: #{$grid-max-width} is not a number";
+    $valid: false;
+  }
+  @if type-of($rem-base) != "number" {
+    @warn "rem-base: #{$rem-base} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    width: 100%;
+    text-align: justify !important;
+    text-justify: distribute-all-lines;
+    font-size: 0 !important;
+    max-width: $grid-max-width;
+    & > * {
+      text-align: left;
+      font-sze: rem-calc($rem-base);
+    }
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 100%;
+    }
+  }
+}
+
+// Sets grid column width
+@mixin span($cols: 4, $padding: true) {
+  $valid: true;
+  @if type-of($cols) != "number" {
+    @warn "cols: #{$cols} is not a number";
+    $valid: false;
+  }
+  @if type-of($padding) != "bool" {
+    @warn "padding: #{$padding} is not a boolean";
+    $valid: false;
+  }
+  @if type-of($grid-columns) != "number" {
+    @warn "grid-columns: #{$grid-columns} is not a number";
+    $valid: false;
+  }
+  @if type-of($grid-padding) != "number" {
+    @warn "grid-padding: #{$grid-padding} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    $column-width: $cols / $grid-columns;
+    @if $padding != false {
+    padding-left: $grid-padding;
+    padding-right: $grid-padding;
+    }
+    width: percentage($column-width);
+    float: left;
+  }
+}
+
+// Sets grid column width (with gutter)
+@mixin col($span: 4) {
+  $valid: true;
+  @if type-of($span) != "number" {
+    @warn "span: #{$span} is not a number";
+    $valid: false;
+  }
+  @if type-of($grid-max-width) != "number" {
+    @warn "grid-max-width: #{$grid-max-width} is not a number";
+    $valid: false;
+  }
+  @if type-of($grid-columns) != "number" {
+    @warn "grid-columns: #{$grid-columns} is not a number";
+    $valid: false;
+  }
+  @if type-of($grid-gutter) != "number" {
+    @warn "grid-gutter: #{$grid-columns} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    $column-width: 100% / $grid-columns;
+    $gutter: ($grid-gutter * 0.75) / $grid-max-width * 100;
+    $span-width: $span * $column-width;
+    width: $span-width - $gutter;
+    vertical-align: top;
+    display: inline-block;
+  }
+}
+
+// Sets grid offet margin
+@mixin offset($cols: 4) {
+  $valid: true;
+  @if type-of($cols) != "number" {
+    @warn "cols: #{$cols} is not a number";
+    $valid: false;
+  }
+  @if type-of($grid-columns) != "number" {
+    @warn "grid-columns: #{$grid-columns} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    margin-left: percentage($cols/$grid-columns);
+  }
+}
+
+// Wraps interior content in a media query
+@mixin breakpoint($querystring) {
+  $valid: true;
+  @if type-of($querystring) != "string" {
+    @warn "querystring: #{$querystring} is not a string";
+    $valid: false;
+  }
+  @if $valid == true {
+    @media #{$querystring} {
+      @content;
+    }
+  }
+}
+
+// Renders fully prefixed transistion
+@mixin transition ($property: 0.15s) {
+  $valid: false;
+  @if type-of($property) == "string" {
+    $valid: true;
+  }
+  @if type-of($property) == "list" {
+    $valid: true;
+  }
+  @if type-of($property) == "number" {
+    $valid: true;
+  }
+  @if $valid == true {
+    @include prefixer(transition, $property, webkit moz ms);
+  } @else {
+    @warn "property: #{$property} is not a valid argument";
+  }
+}
+
+// Renders fully prefixed transform
+@mixin transform($property: none) {
+  $valid: false;
+  @if type-of($property) == "string" {
+    $valid: true;
+  }
+  @if type-of($property) == "list" {
+    $valid: true;
+  }
+  @if $valid == true {
+    @include prefixer(transform, $property, webkit moz ms);
+  } @else {
+    @warn "property: #{$property} is not a valid argument";
+  }
+}
+
+// Renders fully prefixed box-sizing
+@mixin box-sizing ($box: border-box) {
+  $valid: true;
+  @if type-of($box) != "string" {
+    @warn "box: #{$box} is not a string";
+    $valid: false;
+  }
+  @if $valid == true {
+    @include prefixer(box-sizing, $box, webkit moz);
+  }
+}
+
+// Utility for prefixing mixins
+@mixin prefixer($property, $value, $prefixes: webkit moz) {
+  $valid: false;
+  @if type-of($property) == "string" {
+    $valid: true;
+  }
+  @if type-of($prefixes) == "list" {
+    $valid: true;
+  }
+  @if type-of($prefixes) == "string" {
+    $valid: true;
+  }
+  @if $valid == true {
+    @each $prefix in $prefixes {
+      #{"-" + $prefix + "-" + $property}: $value;
+    }
+    #{$property}: $value;
+  } @else {
+    @warn "Invalid arguments supplied";
+  }
+}
+
+// Sets ellipsis overflow
+@mixin ellipsis($width: 100%) {
+  $valid: true;
+  @if type-of($width) != "number" {
+    @warn "width: #{$width} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    display: inline-block;
+    max-width: $width;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// Clearfix include
+@mixin clear($extend: true) {
+  $valid: true;
+  @if type-of($extend) != "bool" {
+    @warn "extend: #{$extend} is not a boolean";
+    $valid: false;
+  }
+  @if $valid == true {
+    @if $extend {
+      @extend %clear;
+    }
+    @else {
+      #{'&'}:after {
+      content:"";
+      display:table;
+      clear:both;
+      }
+    }
+  }
+}
+
+// Placeholder for clear
+%clear:after {
+  content:"";
+  display:table;
+  clear:both;
+}
+
+// Text hider
+
+@mixin hide-text($extend: true) {
+  $valid: true;
+  @if type-of($extend) != "bool" {
+    @warn "extend: #{$extend} is not a boolean";
+    $valid: false;
+  }
+  @if $valid == true {
+    @if $extend {
+      @extend %hide-text;
+    }
+    @else {
+    overflow:hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+    }
+  }
+}
+
+// Placeholder for hide-text
+%hide-text {
+  overflow:hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+// Inline List
+
+@mixin inline-list($float: true) {
+  $valid: true;
+  @if type-of($float) != "bool" {
+    @warn "float: #{$float} is not a boolean";
+    $valid: false;
+  }
+  @if $valid == true {
+    list-style-type:none;
+    padding:0;
+    margin:0;
+    overflow:hidden;
+    > li{
+        @if $float == true {
+        display:block;
+        float:left;
+      } @else {
+        display: inline-block;
+      }
+    }
+  }
+}
+// ###Typography
+
+// Typographic Rhythm Mixin
+@mixin type($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){
+  $valid: true;
+  @if type-of($rem-base) != "number" {
+    @warn "#{$rem-base} is not a number";
+    $valid: false;
+  }
+  @if type-of($line-height-base) != "number" {
+    @warn "#{$line-height-base} is not a number";
+    $valid: false;
+  }
+  @if type-of($type-rhythm-ratio) != "number" {
+    @warn "#{$type-rhythm-ratio} is not a number";
+    $valid: false;
+  }
+  @if $valid == true {
+    // Scale type at $type-rhythm-ratio
+    $h6-size: round(_strip-unit($rem-base) * $type-rhythm-ratio);
+    $h5-size: round($h6-size * $type-rhythm-ratio);
+    $h4-size: round($h5-size * $type-rhythm-ratio);
+    $h3-size: round($h4-size * $type-rhythm-ratio);
+    $h2-size: round($h3-size * $type-rhythm-ratio);
+    $h1-size: round($h2-size * $type-rhythm-ratio);
+
+    @if unit($line-height-base) == "px" {
+      // Set line-height
+      body {
+        line-height: _strip-unit($line-height-base) / _strip-unit($rem-base);
+      }
+    } @else {
+      body {
+        line-height: $line-height-base;
+      }
+    }
+
+    // Set heading sizes to size variables
+    h1 {
+      font-size: rem-calc($h1-size);
+    }
+
+    h2 {
+      font-size: rem-calc($h2-size);
+    }
+
+    h3 {
+      font-size: rem-calc($h3-size);
+    }
+
+    h4 {
+      font-size: rem-calc($h4-size);
+    }
+
+    h5 {
+      font-size: rem-calc($h5-size);
+    }
+
+    h6 {
+      font-size: rem-calc($h6-size);
+    }
+
+    p {
+      font-size: $rem-base;
+    }
+  }
+}