redframework 0.0.1.01

data/stylesheets/redframework/animate/_easings.scss

@@ -0,0 +1,37 @@
+@mixin timing-function($namespace, $bezier){
+	.animate--#{$namespace} {
+		-webkit-animation-timing-function: $bezier;
+	}
+}
+
+@include timing-function("easeInSine", cubic-bezier(0.47, 0, 0.745, 0.715));
+@include timing-function("easeInOutSine", cubic-bezier(0.445, 0.05, 0.55, 0.95));
+@include timing-function("easeOutSine", cubic-bezier(0.39, 0.575, 0.565, 1));
+
+@include timing-function("easeInQuad", cubic-bezier(0.55, 0.085, 0.68, 0.53));
+@include timing-function("easeInOutQuad", cubic-bezier(0.455, 0.03, 0.515, 0.955));
+@include timing-function("easeOutQuad", cubic-bezier(0.25, 0.46, 0.45, 0.94));
+
+@include timing-function("easeInCubic", cubic-bezier(0.55, 0.055, 0.675, 0.19));
+@include timing-function("easeInOutCubic", cubic-bezier(0.645, 0.045, 0.355, 1));
+@include timing-function("easeOutCubic", cubic-bezier(0.215, 0.61, 0.355, 1));
+
+@include timing-function("easeInQuart", cubic-bezier(0.895, 0.03, 0.685, 0.22));
+@include timing-function("easeInOutQuart", cubic-bezier(0.77, 0, 0.175, 1));
+@include timing-function("easeOutQuart", cubic-bezier(0.165, 0.84, 0.44, 1));
+
+@include timing-function("easeInQuint", cubic-bezier(0.755, 0.05, 0.855, 0.06));
+@include timing-function("easeInOutQuint", cubic-bezier(0.86, 0, 0.07, 1));
+@include timing-function("easeOutQuint", cubic-bezier(0.23, 1, 0.32, 1));
+
+@include timing-function("easeInExpo", cubic-bezier(0.95, 0.05, 0.795, 0.035));
+@include timing-function("easeInOutExpo", cubic-bezier(1, 0, 0, 1));
+@include timing-function("easeOutExpo", cubic-bezier(0.19, 1, 0.22, 1));
+
+@include timing-function("easeInCirc", cubic-bezier(0.6, 0.04, 0.98, 0.335));
+@include timing-function("easeInOutCirc", cubic-bezier(0.785, 0.135, 0.15, 0.86));
+@include timing-function("easeOutCirc", cubic-bezier(0.075, 0.82, 0.165, 1));
+
+@include timing-function("easeInBack", cubic-bezier(0.6, -0.28, 0.735, 0.045));
+@include timing-function("easeInOutBack", cubic-bezier(0.68, -0.55, 0.265, 1.55));
+@include timing-function("easeOutBack", cubic-bezier(0.175, 0.885, 0.42, 1.275));

data/stylesheets/redframework/animate/fades/_in.scss

@@ -0,0 +1,9 @@
+.animate--fade-in {
+	opacity:0;
+	-webkit-animation-name: animate-fade-in;
+}
+
+@-webkit-keyframes animate-fade-in {
+	0% { opacity:0;  }
+	100% { opacity:1; }
+}

data/stylesheets/redframework/animate/fades/_out.scss

@@ -0,0 +1,9 @@
+.animate--fade-out {
+	opacity:1;
+	-webkit-animation-name: animate-fade-out;
+}
+
+@-webkit-keyframes animate-fade-out {
+	0% { opacity:1;  }
+	100% { opacity:0; }
+}

data/stylesheets/redframework/animate/scales/_in.scss

@@ -0,0 +1,19 @@
+.animate--scale-in-big {
+	@include transform(scale3d(1.5, 1.5, 0));
+	-webkit-animation-name: animate-scale-in-big;
+}
+
+.animate--scale-in-small {
+	@include transform(scale3d(0, 0, 0));
+	-webkit-animation-name: animate-scale-in-small;
+}
+
+@-webkit-keyframes animate-scale-in-big {
+	0% { @include transform(scale3d(1.5, 1.5, 0));  }
+	100% { @include transform(scale3d(1, 1, 0));  }
+}
+
+@-webkit-keyframes animate-scale-in-small {
+	0% { @include transform(scale3d(0, 0, 0));  }
+	100% { @include transform(scale3d(1, 1, 0));  }
+}

data/stylesheets/redframework/animate/scales/_out.scss

@@ -0,0 +1,9 @@
+.animate--scale-out {
+	@include transform(scale3d(1, 1, 0));
+	-webkit-animation-name: animate-scale-out;
+}
+
+@-webkit-keyframes animate-scale-out {
+	0% { @include transform(scale3d(1, 1, 0));  }
+	100% { @include transform(scale3d(0, 0, 0));  }
+}

data/stylesheets/redframework/animate/slide-fades/_in.scss

@@ -0,0 +1,15 @@
+.animate--slide-fade-in-top {
+	-webkit-animation-name: animate-slide-in-top, animate-fade-in;
+}
+
+.animate--slide-fade-in-bottom {
+	-webkit-animation-name: animate-slide-in-bottom, animate-fade-in;
+}
+
+.animate--slide-fade-in-left {
+	-webkit-animation-name: animate-slide-in-left, animate-fade-in;
+}
+
+.animate--slide-fade-in-right {
+	-webkit-animation-name: animate-slide-in-right, animate-fade-in;
+}

data/stylesheets/redframework/animate/slide-fades/_out.scss

@@ -0,0 +1,15 @@
+.animate--slide-fade-out-top {
+	-webkit-animation-name: animate-slide-out-top, animate-fade-out;
+}
+
+.animate--slide-fade-out-bottom {
+	-webkit-animation-name: animate-slide-out-bottom, animate-fade-out;
+}
+
+.animate--slide-fade-out-left {
+	-webkit-animation-name: animate-slide-out-left, animate-fade-out;
+}
+
+.animate--slide-fade-out-right {
+	-webkit-animation-name: animate-slide-out-right, animate-fade-out;
+}

data/stylesheets/redframework/animate/slides/_in.scss

@@ -0,0 +1,39 @@
+.animate--slide-in-top {
+	@include transform(translate3d(0,-100%,0));
+	-webkit-animation-name: animate-slide-in-top;
+}
+
+.animate--slide-in-bottom {
+	@include transform(translate3d(0%,100%,0));
+	-webkit-animation-name: animate-slide-in-bottom;
+}
+
+.animate--slide-in-left {
+	@include transform(translate3d(-100%,0%,0));
+	-webkit-animation-name: animate-slide-in-left;
+}
+
+.animate--slide-in-right {
+	@include transform(translate3d(100%,0%,0));
+	-webkit-animation-name: animate-slide-in-right;
+}
+
+@-webkit-keyframes animate-slide-in-top {
+	0% { @include transform(translate3d(0,-100%,0));  }
+	100% { @include transform(translate3d(0,0%,0));  }
+}
+
+@-webkit-keyframes animate-slide-in-bottom {
+	0% { @include transform(translate3d(0%,100%,0));  }
+	100% { @include transform(translate3d(0%,0%,0));  }
+}
+
+@-webkit-keyframes animate-slide-in-left {
+	0% { @include transform(translate3d(-100%, 0%, 0));  }
+	100% { @include transform(translate3d(0%,0%,0));  }
+}
+
+@-webkit-keyframes animate-slide-in-right {
+	0% { @include transform(translate3d(100%, 0%, 0));  }
+	100% { @include transform(translate3d(0%,0%,0));  }
+}

data/stylesheets/redframework/animate/slides/_out.scss

@@ -0,0 +1,39 @@
+.animate--slide-out-top {
+	@include transform(translate3d(0%,0%,0));
+	-webkit-animation-name: animate-slide-out-top;
+}
+
+.animate--slide-out-bottom {
+	@include transform(translate3d(0%,0%,0));
+	-webkit-animation-name: animate-slide-out-bottom;
+}
+
+.animate--slide-out-left {
+	@include transform(translate3d(0%,0%,0));
+	-webkit-animation-name: animate-slide-out-left;
+}
+
+.animate--slide-out-right {
+	@include transform(translate3d(0%,0%,0));
+	-webkit-animation-name: animate-slide-out-right;
+}
+
+@-webkit-keyframes animate-slide-out-top {
+	0% { @include transform(translate3d(0,0%,0));  }
+	100% { @include transform(translate3d(0,-100%,0));  }
+}
+
+@-webkit-keyframes animate-slide-out-bottom {
+	0% { @include transform(translate3d(0%,0%,0));  }
+	100% { @include transform(translate3d(0%,100%,0));  }
+}
+
+@-webkit-keyframes animate-slide-out-left {
+	0% { @include transform(translate3d(0%,0%,0));  }
+	100% { @include transform(translate3d(-100%, 0%, 0));  }
+}
+
+@-webkit-keyframes animate-slide-out-right {
+	0% { @include transform(translate3d(0%,0%,0));  }
+	100% { @include transform(translate3d(100%, 0%, 0));  }
+}

data/stylesheets/redframework/base/_alignment.scss

@@ -0,0 +1,11 @@
+.text--align-left {
+	text-align:left !important;
+}
+
+.text--align-right {
+	text-align:right !important;
+}
+
+.text--align-center {
+	text-align:center !important;
+}

data/stylesheets/redframework/base/_animate.scss

@@ -0,0 +1,6 @@
+
+
+
+
+
+

data/stylesheets/redframework/base/_body.scss

@@ -0,0 +1,29 @@
+::selection {
+	background: #F36E50; /* Safari */
+	color: #fff;
+	text-shadow:1px 1px 1px rgba(black, .4);
+}
+
+* > :first-child { margin-top: 0 !important; }
+* > :last-child { margin-bottom: 0 !important; }
+
+body, html {
+	font-size: 14px;
+}
+
+
+i {	
+	font-style:normal;
+}
+
+em {
+	font-size:italic;
+}
+
+strong, b {
+	font-weight:bold;
+}
+
+small, .small {
+	font-size:70%;
+}

data/stylesheets/redframework/base/_code.scss

@@ -0,0 +1,63 @@
+/*------------------------------------*\
+    $CODE
+\*------------------------------------*/
+/**
+ * Use an explicit font stack to ensure browsers render correct `line-height`.
+ */
+pre{
+    overflow:auto;
+}
+    pre mark{
+        background:none;
+        border-bottom:1px solid;
+        color:inherit;
+    }
+
+
+/**
+ * Add comments to your code examples, e.g.:
+ *
+   <code>&lt;/div&gt;<span class=code-comment>&lt;!-- /wrapper --&gt;</span></code>
+ *
+ */
+.code-comment{
+    /**
+     * Override this setting in your theme stylesheet
+     */
+    opacity:0.75;
+    filter:alpha(opacity=75);
+}
+
+
+/**
+ * You can add line numbers to your code examples but be warned, it requires
+ * some pretty funky looking markup, e.g.:
+ *
+   <ol class=line-numbers>
+       <li><code>.nav{</code></li>
+       <li><code>    list-style:none;</code></li>
+       <li><code>    margin-left:0;</code></li>
+       <li><code>}</code></li>
+       <li><code>    .nav > li,</code></li>
+       <li><code>        .nav > li > a{</code></li>
+       <li><code>            display:inline-block;</code></li>
+       <li><code>           *display:inline-block;</code></li>
+       <li><code>            zoom:1;</code></li>
+       <li><code>        }</code></li>
+   </ol>
+ *
+ * 1. Make the list look like code.
+ * 2. Give the list flush numbers with a leading zero.
+ * 3. Make sure lines of code don’t wrap.
+ * 4. Give the code form by forcing the `code` to honour white-space.
+ */
+.line-numbers{
+    font-family:monospace, serif;           /* [1] */
+    list-style:decimal-leading-zero inside; /* [2] */
+    white-space:nowrap;                     /* [3] */
+    overflow:auto;                          /* [3] */
+    margin-left:0;
+}
+    .line-numbers code{
+        white-space:pre;                    /* [4] */
+    }

data/stylesheets/redframework/base/_emphasis.scss

@@ -0,0 +1,18 @@
+.text--muted {
+	color: $text--muted-color
+}
+.text--primary {
+	color: $text--primary-color
+}
+.text--success {
+	color: $text--success-color
+}
+.text--info {
+	color: $text--info-color
+}
+.text--warning {
+	color: $text--warning-color
+}
+.text--danger {
+	color: $text--danger-color
+}

data/stylesheets/redframework/base/_forms.scss

@@ -0,0 +1,174 @@
+/*------------------------------------*\
+    $FORMS
+\*------------------------------------*/
+/**
+ *
+ * Demo: jsfiddle.net/inuitcss/MhHHU
+ *
+ */
+fieldset{
+    padding:$base-spacing-unit;
+}
+
+
+/**
+ * Text inputs
+ *
+ * Instead of a `[type]` selector for each kind of form input, we just use a
+ * class to target any/every one, e.g.:
+   <input type=text class=text-input>
+   <input type=email class=text-input>
+   <input type=password class=text-input>
+ *
+ */
+.text-input,
+textarea{
+    /**
+     * Style these via your theme stylesheet.
+     */
+}
+
+
+/**
+ * Group sets of form fields in a list, e.g.:
+ *
+   <ul class=form-fields>
+       <li>
+           <label />
+           <input />
+       </li>
+       <li>
+           <label />
+           <select />
+       </li>
+       <li>
+           <label />
+           <input />
+       </li>
+   </ul>
+ *
+ */
+.form-fields{
+    list-style:none;
+    margin:0;
+}
+    .form-fields > li{
+        @extend %sass-margin-bottom;
+    }
+    .form-fields > li:last-child{
+        margin-bottom:0;
+    }
+
+
+/**
+ * Labels
+ *
+ * Define a `.label` class as well as a `label` element. This means we can apply
+ * label-like styling to meta-labels for groups of options where a `label`
+ * element is not suitable, e.g.:
+ *
+   <li>
+       <span class=label>Select an option below:</span>
+       <ul class="multi-list  four-cols">
+           <li>
+               <input /> <label />
+           </li>
+           <li>
+               <input /> <label />
+           </li>
+           <li>
+               <input /> <label />
+           </li>
+           <li>
+               <input /> <label />
+           </li>
+       </ul>
+   </li>
+ *
+ */
+label,
+.label{
+    display:block;
+}
+    /**
+     * Extra help text in `label`s, e.g.:
+     *
+       <label>Card number <small class=additional>No spaces</small></label>
+     *
+     */
+    .additional{
+        display:block;
+        font-weight:normal;
+    }
+
+
+/*
+ * Groups of checkboxes and radios, e.g.:
+ *
+   <li>
+       <ul class=check-list>
+           <li>
+               <input /> <label />
+           </li>
+           <li>
+               <input /> <label />
+           </li>
+       </ul>
+   </li>
+ *
+ */
+.check-list{
+    list-style:none;
+    margin:0;
+}
+    /*
+     * Labels in check-lists
+     */
+    .check-label,
+    .check-list label,
+    .check-list .label{
+        display:inline-block;
+    }
+
+
+/**
+ * Spoken forms are for forms that read like spoken word, e.g.:
+ *
+   <li class=spoken-form>
+       Hello, my <label for=spoken-name>name</label> is
+       <input type=text class=text-input id=spoken-name>. My home
+       <label for=country>country</label> is
+       <select id=country>
+           <option>UK</option>
+           <option>US</option>
+           <option>Other</option>
+       </select>
+   </li>
+ *
+ */
+.spoken-form label{
+    display:inline-block;
+    font:inherit;
+}
+
+
+/**
+ * Extra help text displayed after a field when that field is in focus, e.g.:
+ *
+   <label for=email>Email:</label>
+   <input type=email class=text-input id=email>
+   <small class=extra-help>.edu emails only</small>
+ *
+ * We leave the help text in the document flow and merely set it to
+ * `visibility:hidden;`. This means that it won’t interfere with anything once
+ * it reappears.
+ *
+ */
+/*small*/.extra-help{
+    display:inline-block;
+    visibility:hidden;
+}
+.text-input:active + .extra-help,
+.text-input:focus + .extra-help{
+    visibility:visible;
+}

data/stylesheets/redframework/base/_headings.scss

@@ -0,0 +1,59 @@
+/*------------------------------------*\
+    $HEADINGS
+\*------------------------------------*/
+/**
+ * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
+ *
+ * When we define a heading we also define a corresponding class to go with it.
+ * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
+ * heading hierarchy.
+ */
+
+h1,.alpha{
+    @include font-size($h1--font-size);
+    font-weight: $h1--font-weight;
+    font-family: $h1--font-family;
+}
+h2,.beta{
+    @include font-size($h2--font-size);
+    font-weight: $h2--font-weight;
+    font-weight: $h2--font-weight;
+}
+h3,.gamma{
+    @include font-size($h3--font-size);
+    font-weight: $h3--font-weight;
+    font-weight: $h3--font-weight;
+}
+h4,.delta{
+    @include font-size($h4--font-size);
+    font-weight: $h4--font-weight;
+    font-weight: $h4--font-weight;
+}
+h5,.epsilon{
+    @include font-size($h5--font-size);
+    font-weight: $h5--font-weight;
+    font-weight: $h5--font-weight;
+}
+h6,.zeta{
+    @include font-size($h6--font-size);
+    font-weight: $h6--font-weight;
+    font-weight: $h6--font-weight;
+}
+
+
+@include headings(1,6);
+
+
+/**
+ * A series of classes for setting massive type; for use in heroes, mastheads,
+ * promos, etc.
+ */
+.giga{
+    @include font-size($giga-size);
+}
+.mega{
+    @include font-size($mega-size);
+}
+.kilo{
+    @include font-size($kilo-size);
+}

data/stylesheets/redframework/base/_images.scss

@@ -0,0 +1,111 @@
+@mixin img-grid-setup($namespace: "") {
+	.img-grid--#{$namespace}one-whole img { width:100%; }
+	.img-grid--#{$namespace}one-half img { width:50%; }
+	.img-grid--#{$namespace}one-third img { width:33.333%; }
+	.img-grid--#{$namespace}one-quarter img { width:25%; }
+	.img-grid--#{$namespace}one-fifth img { width:20%; }
+	.img-grid--#{$namespace}one-sixth img { width:16.666%; }
+	.img-grid--#{$namespace}one-eighth img { width:12.5%; }
+	.img-grid--#{$namespace}one-tenth img { width:10%; }
+	.img-grid--#{$namespace}one-twelfth img { width:8.333%; }
+}
+
+	.img-grid {
+		letter-spacing:-3px;
+		text-align:left;
+		img { display: inline-block; } 
+	}
+
+
+@include img-grid-setup();
+
+@if $responsive == true{
+
+	@include media-query(mobile){
+	    @include img-grid-setup("mobile-");
+	}
+
+	@include media-query(tab){
+	    @include img-grid-setup("tab-");
+	}
+
+	@include media-query(tab-and-up){
+	    @include img-grid-setup("tab-and-up-");
+	}
+
+	@include media-query(lap){
+	    @include img-grid-setup("lap-");
+	}
+
+	@include media-query(lap-and-up){
+	    @include img-grid-setup("lap-and-up-");
+	}
+
+	@include media-query(desk){
+	    @include img-grid-setup("desk-");
+	}
+	
+	@if $responsive-extra == true{
+		@include media-query(desk-wide){
+		    @include img-grid-setup("desk-wide-");
+		}
+	}
+} 
+
+img{
+	max-width:100%;
+}
+
+img[width],
+img[height]{
+	max-width:none;
+}
+
+
+.img--round { border-radius:$brand-round; }
+
+
+/**
+ * Image placement variations.
+ */
+.img--right{
+	float:right;
+	margin-bottom:$base-spacing-unit;
+	margin-left:$base-spacing-unit;
+}
+.img--left{
+	float:left;
+	margin-right:$base-spacing-unit;
+	margin-bottom:$base-spacing-unit;
+}
+.img--center{
+	display:block;
+	margin-right:auto;
+	margin-bottom:$base-spacing-unit;
+	margin-left:auto;
+}
+
+
+/**
+ * Keep your images on your baseline.
+ *
+ * Please note, these will not work too nicely with fluid images and will
+ * distort when resized below a certain width. Use with caution.
+ */
+.img--short{
+	height:5 * $base-spacing-unit;
+}
+.img--medium{
+	height:10 * $base-spacing-unit;
+}
+.img--tall{
+	height:15 * $base-spacing-unit;
+}
+
+
+/**
+ * Images in `figure` elements.
+ */
+figure > img{
+	display:block;
+}

data/stylesheets/redframework/base/_lists.scss

@@ -0,0 +1,16 @@
+li{
+    > ul,
+    > ol{
+         margin-bottom:0;
+     }
+}
+
+.numbered-list{
+    list-style-type:decimal;
+}
+
+.list--collection-view {
+	padding:0;
+	margin:0 0 1.5rem 0;
+	list-style:none;
+}