minable 0.0.1

data/app/assets/stylesheets/framework/_typecsset.scss

@@ -0,0 +1,340 @@
+/**
+* Typecsset
+*
+* Typecsset is a small, unopinionated library for creating beautifully set type
+* on the web. Typecsset gives perfect vertical rhythm at any configurable font
+* size, as well as many other typographical niceties.
+*/
+
+
+//------------------------------------\\
+  // SETTINGS
+//------------------------------------\\
+// Typecsset needs some variables setting before it can get started. Some of
+// these variables can be overriden by developers, others need to remain
+// untouched because Typecsset will assign them automatically based on what
+// you’ve told it.
+
+// What would you like your base font-size to be? Define in pixels; the library
+// will convert measurements to the most appropriate units (rems or unitless).
+$typecsset-base-font-size:      16px !default;
+$typecsset-base-line-height:    24px !default;
+
+// Heading sizes
+$typecsset-h1-size:             48px !default;
+$typecsset-h2-size:             36px !default;
+$typecsset-h3-size:             30px !default;
+$typecsset-h4-size:             24px !default;
+$typecsset-h5-size:             20px !default;
+$typecsset-h6-size:             18px !default;
+
+// Would you like indented (rather than spaced) paragraph delimiting?
+$typecsset-indented-paragraphs: false !default;
+
+// Would you like to show a baseline grid? This is handy during development.
+$typecsset-show-baseline:       false !default;
+
+// Do not modify these variables; they are internal settings upon which the
+// library depends.
+$typecsset-magic-number:        $typecsset-base-line-height;
+$typecsset-magic-ratio:         $typecsset-base-line-height / $typecsset-base-font-size;
+
+
+
+
+
+//------------------------------------\\
+  // TOOLS
+//------------------------------------\\
+// Typecsset has a number of its own tools which it uses to generate its CSS
+// more efficiently.
+
+// Quickly generate a font-size in rems, with a pixel fallback, based on the
+// value we pass into the mixin, e.g.:
+//
+// h1 {
+//     @include typecsset-font-size(24px);
+// }
+//
+@mixin typecsset-font-size($font-size, $line-height: true) {
+  font-size: $font-size;
+  font-size: ($font-size / $typecsset-base-font-size) * 1rem;
+
+  @if $line-height == true {
+    line-height: ceil($font-size / $typecsset-base-line-height) * ($typecsset-base-line-height / $font-size);
+  }
+
+}
+
+// Space elements by an amount based on your magic number. Pass in the property
+// to be indented as a paramater, e.g.:
+//
+// pre {
+//     @include typecsset-space(padding-left);
+// }
+//
+@mixin typecsset-space($property) {
+  #{$property}: 2 * $typecsset-magic-number;
+  #{$property}: 2 * $typecsset-magic-ratio + rem;
+}
+
+// A small, internally-used function to remove the units from a given value.
+@function typecsset-strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+
+
+
+
+/*------------------------------------*\
+  #SHARED
+\*------------------------------------*/
+/**
+* A lot of elements in Typecsset need to share some declarations (mainly for
+* vertical rhythm), so we `@extend` some silent classes.
+*/
+%typecsset-reset {
+  margin:  0;
+  padding: 0;
+}
+
+%typecsset-vertical-rhythm {
+  @extend %typecsset-reset;
+  margin-bottom: $typecsset-magic-number;
+  margin-bottom: $typecsset-magic-ratio + rem;
+}
+
+
+
+
+
+/*------------------------------------*\
+  #BASE
+\*------------------------------------*/
+/**
+* 1. Set the base element’s `font-size` to the value of your choosing.
+* 2. Work out the unitless `line-height` for your project based around your
+*    desired `line-height` (defined previously in pixels), and your project’s
+*    base font size.
+*/
+
+@if $typecsset-show-baseline == true {
+/**
+* 3. If you have chosen to display a baseline grid, we turn it on here.
+*/
+}
+
+html {
+  font-size: $typecsset-base-font-size; /* [1] */
+  line-height: $typecsset-base-line-height / $typecsset-base-font-size; /* [2] */
+
+  // If you have chosen to display a baseline grid, we turn it on here.
+  @if $typecsset-show-baseline == true {
+
+    $typecsset-baseline-size: typecsset-strip-units($typecsset-magic-number);
+
+    background-image: url(http://basehold.it/i/#{$typecsset-baseline-size}); /* [3] */
+  }
+
+}
+
+body {
+  margin: 0;
+}
+
+
+
+
+
+/*------------------------------------*\
+  #HEADINGS
+\*------------------------------------*/
+h1 {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-font-size($typecsset-h1-size);
+}
+
+h2 {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-font-size($typecsset-h2-size);
+}
+
+h3 {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-font-size($typecsset-h3-size);
+}
+
+h4 {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-font-size($typecsset-h4-size);
+}
+
+h5 {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-font-size($typecsset-h5-size);
+}
+
+h6 {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-font-size($typecsset-h6-size);
+}
+
+
+
+
+
+/*------------------------------------*\
+  #LISTS
+\*------------------------------------*/
+ul, ol, dd {
+  @extend %typecsset-vertical-rhythm;
+  @include typecsset-space(margin-left);
+}
+
+li > ul,
+li > ol {
+  margin-bottom: 0;
+}
+
+
+
+
+
+/*------------------------------------*\
+  #PARAGRAPHS
+\*------------------------------------*/
+p {
+  @extend %typecsset-vertical-rhythm;
+
+  @if $typecsset-indented-paragraphs == true {
+
+    + p {
+      @include typecsset-space(text-indent);
+      margin-top: -$typecsset-magic-number;
+      margin-top: -$typecsset-magic-ratio + rem;
+    }
+
+  }
+
+}
+
+/**
+* Not strictly a paragraph, but probably doesn’t need its own section.
+*/
+address {
+  @extend %typecsset-vertical-rhythm;
+}
+
+
+
+
+
+/*------------------------------------*\
+  #CODE
+\*------------------------------------*/
+pre {
+  @extend %typecsset-vertical-rhythm;
+}
+
+/**
+* 1. Fix an odd quirk whereby, without this, code blocks are rendered at a
+*    font-size smaller than 1em.
+*/
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* [1] */
+}
+
+
+
+
+
+/*------------------------------------*\
+  #QUOTES
+\*------------------------------------*/
+/**
+* 1. Hang the opening quote of the blockquote.
+*/
+blockquote {
+  text-indent: -0.4em; /* [1] */
+}
+
+/**
+* Set up quote marks on quoting elements. This is very English-based, so we are
+* using “, ”, ‘, and ’ quotes.
+*/
+blockquote {
+  @extend %typecsset-vertical-rhythm;
+  quotes: "“" "”";
+  @include typecsset-space(margin-left);
+
+  p {
+
+    &:before {
+        content: "“";
+        content: open-quote;
+    }
+
+    &:after {
+        content: "";
+        content: no-close-quote;
+    }
+
+    &:last-of-type:after {
+        content: "”";
+        content: close-quote;
+    }
+
+  }
+
+}
+
+q   {
+  quotes: "‘" "’" "“" "”";
+
+  &:before {
+      content: "‘";
+      content: open-quote;
+  }
+
+  &:after {
+      content: "’";
+      content: close-quote;
+  }
+
+  q:before {
+      content: "“";
+      content: open-quote;
+  }
+
+  q:after{
+      content: "”";
+      content: close-quote;
+  }
+
+}
+
+
+
+
+
+/*------------------------------------*\
+  #TABLES
+\*------------------------------------*/
+/**
+* Crude table styles; tables are very difficult to keep on the baseline.
+*/
+table {
+  @extend %typecsset-vertical-rhythm;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th,
+td {
+  padding: $typecsset-base-line-height / 2;
+}

data/app/assets/stylesheets/framework/grid/_all.scss

@@ -0,0 +1,4 @@
+// Import Grid elements
+
+@import "grid-core";
+@import "grid-unit";

data/app/assets/stylesheets/framework/grid/_grid-core.scss

@@ -0,0 +1,58 @@
+// Minable Grid Core
+
+/* =================== Basic usage ===================
+
+<div class="min-container">     Sets outer container (auto centered)
+  <div class="min-g">           Sets responive row container, negative margin to counters outer margin
+    <div class="min-u-1-4">     Sets 1/4 width element
+
+    </div>
+    <div class="min-u-3-4">     Sets 3/4 width element
+
+    </div>
+  </div>
+</div>
+
+*/
+
+.min-g {
+  display: -webkit-flex;
+  -webkit-flex-flow: row wrap;
+  // IE10 uses display: flexbox
+  display: -ms-flexbox;
+  -ms-flex-flow: row wrap;
+
+  font-size: 0;
+}
+
+.min-u {
+  display: inline-block;
+  *display: inline;
+}
+
+// Requried variables - leaves these be.
+$breakpoints: false !default; // Required for the grid extender
+$site-usable-gutter: strip-unit($site-gutter) / 2; // Cuts the defined gutter in half for use as padding
+
+// This element would wrap any outer most elements to restrict them to the $site-width
+.min-container {
+    max-width: $site-width;
+    margin: 0 auto;
+}
+
+// Set a negative offset for gutter padding
+.min-g .min-g {
+  margin-right: -#{$site-usable-gutter}px;
+  margin-left: -#{$site-usable-gutter}px;
+}
+
+// We want this guff to apply to our custom grids as well.
+[class *= "min-u"] {
+  display: inline-block;
+  *display: inline;
+  font-size: $browser-default-font-size;
+  padding-right: #{$site-usable-gutter}px;
+  padding-left: #{$site-usable-gutter}px;
+  vertical-align: top;
+  zoom: 1;
+}

data/app/assets/stylesheets/framework/grid/_grid-unit.scss

@@ -0,0 +1,195 @@
+// Minable Grid Units
+
+// Sets default grid classes
+.min-u-1 {
+  width: 100%;
+}
+
+.min-u-1-2 {
+  width: 50%;
+  *width: 49.969%;
+}
+
+.min-u-1-3 {
+  width: 33.3333%;
+  *width: 33.3023%;
+}
+
+.min-u-2-3 {
+  width: 66.6667%;
+  *width: 66.6357%;
+}
+
+.min-u-1-4 {
+  width: 25%;
+  *width: 24.969%;
+}
+
+.min-u-3-4 {
+  width: 75%;
+  *width: 74.969%;
+}
+
+.min-u-1-5 {
+  width: 20%;
+  *width: 19.969%;
+}
+
+.min-u-2-5 {
+  width: 40%;
+  *width: 39.969%;
+}
+
+.min-u-3-5 {
+  width: 60%;
+  *width: 59.969%;
+}
+
+.min-u-4-5 {
+  width: 80%;
+  *width: 79.969%;
+}
+
+.min-u-1-6 {
+  width: 16.6667%;
+  *width: 16.6357%;
+}
+
+.min-u-5-6 {
+  width: 83.3333%;
+  *width: 83.3023%;
+}
+
+.min-u-1-8 {
+  width: 12.5%;
+  *width: 12.469%;
+}
+
+.min-u-3-8 {
+  width: 37.5%;
+  *width: 37.469%;
+}
+
+.min-u-5-8 {
+  width: 62.5%;
+  *width: 62.469%;
+}
+
+.min-u-7-8 {
+  width: 87.5%;
+  *width: 87.469%;
+}
+
+.min-u-1-12 {
+  width: 8.3333%;
+  *width: 8.3023%;
+}
+
+.min-u-5-12 {
+  width: 41.6667%;
+  *width: 41.6357%;
+}
+
+.min-u-7-12 {
+  width: 58.3333%;
+  *width: 58.3023%;
+}
+
+.min-u-11-12 {
+  width: 91.6667%;
+  *width: 91.6357%;
+}
+
+// GRID EXTENDER
+// Loop through each defined breakpoint to generate our grids (Set in settings.scss).
+@if $breakpoints {
+  @each $breakpoint in $breakpoints {
+
+    // Get the breakpoint details.
+    $breakpoint-name: nth($breakpoint,1);
+    $breakpoint-value: strip-unit(nth($breakpoint,2)) / strip-unit($browser-default-font-size);
+
+    // Define your grid.
+    @media (max-width: #{$breakpoint-value}em) {
+      .min-u-#{$breakpoint-name}-1 {
+        width: 100%;
+      }
+      .min-u-#{$breakpoint-name}-1-2 {
+        width: 50%;
+        *width: 49.969%;
+      }
+      .min-u-#{$breakpoint-name}-1-3 {
+        width: 33.33333%;
+        *width: 33.3023%;
+      }
+      .min-u-#{$breakpoint-name}-2-3 {
+        width: 66.66666%;
+        *width: 66.6357%;
+      }
+      .min-u-#{$breakpoint-name}-1-4 {
+        width: 25%;
+        *width: 24.969%;
+      }
+      .min-u-#{$breakpoint-name}-3-4 {
+        width: 75%;
+        *width: 74.969%;
+      }
+      .min-u-#{$breakpoint-name}-1-5 {
+        width: 20%;
+        *width: 19.969%;
+      }
+      .min-u-#{$breakpoint-name}-2-5 {
+        width: 40%;
+        *width: 39.969%;
+      }
+      .min-u-#{$breakpoint-name}-3-5 {
+        width: 60%;
+        *width: 59.969%;
+      }
+      .min-u-#{$breakpoint-name}-4-5 {
+        width: 80%;
+        *width: 79.969%;
+      }
+      .min-u-#{$breakpoint-name}-1-6 {
+        width: 16.666%;
+        *width: 16.6357%;
+      }
+      .min-u-#{$breakpoint-name}-5-6 {
+        width: 83.33%;
+        *width: 83.3023%;
+      }
+      .min-u-#{$breakpoint-name}-1-8 {
+        width: 12.5%;
+        *width: 12.469%;
+      }
+      .min-u-#{$breakpoint-name}-3-8 {
+        width: 37.5%;
+        *width: 37.469%;
+      }
+      .min-u-#{$breakpoint-name}-5-8 {
+        width: 62.5%;
+        *width: 62.469%;
+      }
+      .min-u-#{$breakpoint-name}-7-8 {
+        width: 87.5%;
+        *width: 87.469%;
+      }
+      .min-u-#{$breakpoint-name}-1-12 {
+        width: 8.3333%;
+        *width: 8.3023%;
+      }
+      .min-u-#{$breakpoint-name}-5-12 {
+        width: 41.6666%;
+        *width: 41.6357%;
+      }
+      .min-u-#{$breakpoint-name}-7-12 {
+        width: 58.3333%;
+        *width: 58.3023%;
+      }
+      .min-u-#{$breakpoint-name}-11-12 {
+        width: 91.6666%;
+        *width: 91.6357%;
+      }
+    }
+  };
+}

data/app/assets/stylesheets/helpers/_all.scss

@@ -0,0 +1,5 @@
+// Import helper files, useful functions such as px to rem mixins and text replacement classes. SVG fallback class coming soon!
+
+@import "classes/all";
+@import "functions/all";
+@import "mixins/all";

data/app/assets/stylesheets/helpers/classes/_all.scss

@@ -0,0 +1,3 @@
+// Display classes such as image replacement
+
+@import "display-classes";

data/app/assets/stylesheets/helpers/classes/_display-classes.scss

@@ -0,0 +1,33 @@
+// Contains any classes used to hide or show elements, these will only be output when used
+
+// Hide text from visually-able users but keep it available for screen readers.
+.screen-reader-text {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(1px 1px 1px 1px); // IE6, IE7 (deprecated syntax)
+  padding:0 !important;
+  border:0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden;
+}
+
+// Hide elements from visual users but not from screen readers
+%visually-hidden
+{
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 (deprecated syntax) */
+    clip: rect(1px, 1px, 1px, 1px);
+    padding:0 !important;
+    border:0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
+}
+
+// Hide elements from 'all the people'
+%fully-hidden
+{
+    display: none;
+    visibility: hidden;
+}

data/app/assets/stylesheets/helpers/functions/_all.scss

@@ -0,0 +1,3 @@
+// Useful functions such as browser fallback generators
+
+@import "strip-unit"; // Used by grid system to generate custom grids!!!

data/app/assets/stylesheets/helpers/functions/_strip-unit.scss

@@ -0,0 +1,4 @@
+// Strip the unit from a value.
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}

data/app/assets/stylesheets/helpers/mixins/_all.scss

@@ -0,0 +1,4 @@
+// More usefull mixins! Create reusable mixins where possible!
+
+@import "rem-fallback";
+@import "replace-text";

data/app/assets/stylesheets/helpers/mixins/_rem-fallback.scss

@@ -0,0 +1,33 @@
+// My modified version of Karl Merkli's rem mixin from http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/.
+
+// Pass in a property name and the target pixel values and the mixin will spit out the pixel fallback version and the rem version.
+
+@mixin rem-fallback($property, $values...) {
+  $max: length($values);
+  $pxValues: '';
+  $remValues: '';
+
+  @for $i from 1 through $max {
+    $value: strip-unit(nth($values, $i));
+
+    // If the value is '0' don't output the unit.
+    @if $value == 0 {
+      $pxValues: #{$pxValues + $value*1};
+      $remValues: #{$remValues + $value/16};
+    }
+
+    // Else do output the unit.
+    @else {
+      $pxValues: #{$pxValues + $value*1}px;
+      $remValues: #{$remValues + $value/16}rem;
+    }
+
+    @if $i < $max {
+      $pxValues: #{$pxValues + " "};
+      $remValues: #{$remValues + " "};
+    }
+  }
+
+  #{$property}: $pxValues;
+  #{$property}: $remValues;
+}

data/app/assets/stylesheets/helpers/mixins/_replace-text.scss

@@ -0,0 +1,16 @@
+// Replace text with image
+@mixin replace-text {
+    overflow: hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+
+  .lt-ie8 & {
+    border: 0;
+    color: transparent;
+    font: 0/0 a;
+    overflow: auto;
+    text-indent: 0;
+    text-shadow: none;
+    white-space: normal;
+  }
+}

data/app/assets/stylesheets/modules/_all.scss

@@ -0,0 +1 @@
+// Use this to include styling for specific jQuery plugins etc

data/app/assets/stylesheets/templates/_404.scss

@@ -0,0 +1 @@
+// 404 page styling, make it pretty!