redframework 0.0.1.01

data/stylesheets/redframework/general/_mixins.scss

@@ -0,0 +1,281 @@
+/*------------------------------------*\
+	$MIXINS
+\*------------------------------------*/
+/**
+ * Create a fully formed type style (sizing and vertical rhythm) by passing in a
+ * single value, e.g.:
+ *
+   `@include font-size(10px);`
+ *
+ * Thanks to @redclov3r for the `line-height` Sass:
+ * twitter.com/redclov3r/status/250301539321798657
+ */
+@mixin font-size($font-size, $line-height:true){
+	font-size:$font-size;
+	font-size:($font-size / $base-font-size)*1rem;
+	@if $line-height == true{
+		line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+	}
+}
+
+
+
+@mixin headings($from: 1, $to: 6){
+	%base-heading {
+		@content;
+		small, .small { 
+		   color:#bababa
+		}
+	}
+
+	@if $from >= 1 and $to <= 6{
+		@for $i from $from through $to{
+			h#{$i}{
+				@extend %base-heading;
+			}
+		}
+	}
+}
+
+
+/**
+ * Create vendor-prefixed CSS in one go, e.g.
+ *
+   `@include vendor(border-radius, 4px);`
+ *
+ */
+@mixin vendor($property, $value...){
+	-webkit-#{$property}:$value;
+	   -moz-#{$property}:$value;
+		-ms-#{$property}:$value;
+		 -o-#{$property}:$value;
+			#{$property}:$value;
+}
+
+
+/**
+ * Create CSS keyframe animations for all vendors in one go, e.g.:
+ *
+   .foo{
+	   @include vendor(animation, shrink 3s);
+   }
+
+   @include keyframe(shrink){
+	   from{
+		   font-size:5em;
+	   }
+   }
+ *
+ * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
+ */
+@mixin keyframe ($animation-name){
+	@-webkit-keyframes $animation-name{
+		@content;
+	}
+
+	@-moz-keyframes $animation-name{
+		@content;
+	}
+
+	@-ms-keyframes $animation-name{
+		@content;
+	}
+
+	@-o-keyframes $animation-name{
+		@content;
+	}
+
+	@keyframes $animation-name{
+		@content;
+	}
+}
+
+
+/**
+ * Force overly long spans of text to truncate, e.g.:
+ *
+   `@include truncate(100%);`
+ *
+ * Where `$truncation-boundary` is a united measurement.
+ */
+@mixin truncate($truncation-boundary){
+	max-width:$truncation-boundary;
+	white-space:nowrap;
+	overflow:hidden;
+	text-overflow:ellipsis;
+}
+
+
+/**
+ * CSS arrows!!! But... before you read on, you might want to grab a coffee...
+ *
+ * This mixin creates a CSS arrow on a given element. We can have the arrow
+ * appear in one of 12 locations, thus:
+ *
+ *       01    02    03
+ *    +------------------+
+ * 12 |                  | 04
+ *    |                  |
+ * 11 |                  | 05
+ *    |                  |
+ * 10 |                  | 06
+ *    +------------------+
+ *       09    08    07
+ *
+ * You pass this position in along with a desired arrow color and optional
+ * border color, for example:
+ *
+ * `@include arrow(top, left, red)`
+ *
+ * for just a single, red arrow, or:
+ *
+ * `@include arrow(bottom, center, red, black)`
+ *
+ * which will create a red triangle with a black border which sits at the bottom
+ * center of the element. Call the mixin thus:
+ *
+   .foo{
+	   background-color:#BADA55;
+	   border:1px solid #ACE;
+	   @include arrow(top, left, #BADA55, #ACE);
+   }
+ *
+ */
+@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
+
+	@if $arrow-edge == top{
+
+		@extend %arrow--top;
+
+		&:before{
+			border-bottom-color:$border-color!important;
+		}
+
+		&:after{
+			border-bottom-color:$arrow-color!important;
+		}
+
+		@if $arrow-location == left{
+			@extend %arrow--left;
+		}
+
+		@if $arrow-location == center{
+			@extend %arrow--center;
+		}
+
+		@if $arrow-location == right{
+			@extend %arrow--right;
+		}
+
+	}
+
+	@if $arrow-edge == right{
+
+		@extend %arrow--far;
+
+		&:before{
+			border-left-color:$border-color!important;
+		}
+
+		&:after{
+			border-left-color:$arrow-color!important;
+		}
+
+		@if $arrow-location == top{
+			@extend %arrow--upper;
+		}
+
+		@if $arrow-location == center{
+			@extend %arrow--middle;
+		}
+
+		@if $arrow-location == bottom{
+			@extend %arrow--lower;
+		}
+
+	}
+
+	@if $arrow-edge == bottom{
+
+		@extend %arrow--bottom;
+
+		&:before{
+			border-top-color:$border-color!important;
+		}
+
+		&:after{
+			border-top-color:$arrow-color!important;
+		}
+
+		@if $arrow-location == left{
+			@extend %arrow--left;
+		}
+
+		@if $arrow-location == center{
+			@extend %arrow--center;
+		}
+
+		@if $arrow-location == right{
+			@extend %arrow--right;
+		}
+
+	}
+
+	@if $arrow-edge == left{
+
+		@extend %arrow--near;
+
+		&:before{
+			border-right-color:$border-color!important;
+		}
+
+		&:after{
+			border-right-color:$arrow-color!important;
+		}
+
+		@if $arrow-location == top{
+			@extend %arrow--upper;
+		}
+
+		@if $arrow-location == center{
+			@extend %arrow--middle;
+		}
+
+		@if $arrow-location == bottom{
+			@extend %arrow--lower;
+		}
+
+	}
+
+}
+
+
+$mob-end:              $tab-start - 1px;
+$tab-end:              $lap-start - 1px;
+$lap-end:               $desk-start - 1px;
+$desk-end:               $desk-wide-start - 1px;
+
+@mixin media-query($media-query){
+
+@if $media-query == mobile{
+	@media only screen and (max-width:$mob-end) { @content; }
+}
+
+@if $media-query == tab{
+	@media only screen and (min-width:$tab-start) and (max-width:$tab-end) { @content; }
+}
+
+@if $media-query == tab-and-up{
+	@media only screen and (min-width:$tab-start) { @content; }
+}
+
+
+@if $media-query == desk{
+	@media only screen and (min-width:$desk-start) { @content; }
+}
+
+@if $media-query == desk-wide{
+	@media only screen and (min-width: $desk-wide-start) { @content; }
+}
+
+}

data/stylesheets/redframework/general/_reset.scss

@@ -0,0 +1,80 @@
+/*------------------------------------*\
+    $RESET
+\*------------------------------------*/
+/**
+ * A more considered reset; more of a restart...
+ * As per: csswizardry.com/2011/10/reset-restarted
+ */
+
+@if $global-border-box == true{
+    /**
+    * Let’s make the box model all nice, shall we...?
+    */
+    *{
+        &,
+        &:before,
+        &:after{
+            @include box-sizing(border-box);
+        }
+    }
+}
+
+/**
+ * The usual...
+ */
+h1,h2,h3,h4,h5,h6,
+p,blockquote,pre,
+dl,dd,ol,ul,
+form,fieldset,legend,
+table,th,td,caption,
+hr{
+    margin:0;
+    padding:0;
+}
+
+/**
+ * Give a help cursor to elements that give extra info on `:hover`.
+ */
+abbr[title],dfn[title]{
+    cursor:help;
+}
+
+/**
+ * Remove underlines from potentially troublesome elements.
+ */
+u,ins{
+    text-decoration:none;
+}
+
+/**
+ * Apply faux underline via `border-bottom`.
+ */
+ins{
+    border-bottom:1px solid;
+}
+
+/**
+ * So that `alt` text is visually offset if images don’t load.
+ */
+img{
+    font-style:italic;
+}
+
+/**
+ * Give form elements some cursor interactions...
+ */
+label,
+input,
+textarea,
+button,
+select,
+option{
+    cursor:pointer;
+}
+    .text-input:active,
+    .text-input:focus,
+    textarea:active,
+    textarea:focus{
+        cursor:text;
+        outline:none;
+    }

data/stylesheets/redframework/general/_shared.scss

@@ -0,0 +1,61 @@
+/*------------------------------------*\
+    $SHARED
+\*------------------------------------*/
+/**
+ * Where `margin-bottom` is concerned, this value will be the same as the
+ * base line-height. This allows us to keep a consistent vertical rhythm.
+ * As per: csswizardry.com/2012/06/single-direction-margin-declarations
+ */
+/**
+ * Base elements
+ */
+h1,h2,h3,h4,h5,h6,hgroup,
+ul,ol,dl,
+blockquote,p,address,
+table,
+fieldset,figure,
+pre,
+/**
+ * Objects and abstractions
+ */
+%sass-margin-bottom,
+.media,
+.island,
+.islet{
+    margin-bottom:$base-spacing-unit;
+    margin-bottom:($base-spacing-unit / $base-font-size)*1rem;
+
+    .islet &{
+        margin-bottom:$base-spacing-unit / 2;
+        margin-bottom:(($base-spacing-unit / $base-font-size) / 2)*1rem;
+    }
+}
+
+
+/**
+ * Doubled up `margin-bottom` helper class.
+ */
+.landmark{
+    margin-bottom:2 * $base-spacing-unit;
+    margin-bottom:(2 * $base-spacing-unit / $base-font-size)*1rem;
+}
+
+
+/**
+ * `hr` elements only take up a few pixels, so we need to give them special
+ * treatment regarding vertical rhythm.
+ */
+hr{
+    margin-bottom:$base-spacing-unit - 2px;
+    margin-bottom:(($base-spacing-unit - 2px) / $base-font-size)*1rem;
+}
+
+
+/**
+ * Where `margin-left` is concerned we want to try and indent certain elements
+ * by a consistent amount. Define that amount once, here.
+ */
+ul,ol,dd{
+    margin-left:2 * $base-spacing-unit;
+    margin-left:(2 * $base-spacing-unit / $base-font-size)*1rem;
+}

data/stylesheets/redframework/general/_widths.scss

@@ -0,0 +1,162 @@
+/*------------------------------------*\
+    $WIDTHS
+\*------------------------------------*/
+/**
+ * Sizes in human readable format. These are used in conjunction with other
+ * objects and abstractions found in inuit.css, most commonly the grid system
+ * and faux flexbox.
+ *
+ * We have a mixin to generate our widths and their breakpoint-specific
+ * variations.
+ */
+
+@mixin grid-setup($namespace: "") {
+    /**
+    * Whole
+    */
+    .#{$namespace}one-whole         { width:100%; }
+
+
+    /**
+    * Halves
+    */
+    .#{$namespace}one-half          { width:50%; }
+
+
+    /**
+    * Thirds
+    */
+    .#{$namespace}one-third         { width:33.333%; }
+    .#{$namespace}two-thirds        { width:66.666%; }
+
+
+    /**
+    * Quarters
+    */
+    .#{$namespace}one-quarter       { width:25%; }
+    .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
+    .#{$namespace}three-quarters    { width:75%; }
+
+
+    /**
+    * Fifths
+    */
+    .#{$namespace}one-fifth         { width:20%; }
+    .#{$namespace}two-fifths        { width:40%; }
+    .#{$namespace}three-fifths      { width:60%; }
+    .#{$namespace}four-fifths       { width:80%; }
+
+
+    /**
+    * Sixths
+    */
+    .#{$namespace}one-sixth         { width:16.666%; }
+    .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
+    .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
+    .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
+    .#{$namespace}five-sixths       { width:83.333%; }
+
+
+    /**
+    * Eighths
+    */
+    .#{$namespace}one-eighth        { width:12.5%; }
+    .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
+    .#{$namespace}three-eighths     { width:37.5%; }
+    .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
+    .#{$namespace}five-eighths      { width:62.5%; }
+    .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
+    .#{$namespace}seven-eighths     { width:87.5%; }
+
+
+    /**
+    * Tenths
+    */
+    .#{$namespace}one-tenth         { width:10%; }
+    .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
+    .#{$namespace}three-tenths      { width:30%; }
+    .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
+    .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
+    .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
+    .#{$namespace}seven-tenths      { width:70%; }
+    .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
+    .#{$namespace}nine-tenths       { width:90%; }
+
+
+    /**
+    * Twelfths
+    */
+    .#{$namespace}one-twelfth       { width:8.333%; }
+    .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
+    .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
+    .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
+    .#{$namespace}five-twelfths     { width:41.666% }
+    .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
+    .#{$namespace}seven-twelfths    { width:58.333%; }
+    .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
+    .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
+    .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
+    .#{$namespace}eleven-twelfths   { width:91.666%; }
+}
+
+@include grid-setup();
+
+
+
+/**
+ * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
+ * access to these classes. You can define at which breakpoint you’d like an
+ * element to be a certain size, e.g.:
+ *
+ * `<div class="g  one-quarter  lap-one-half  palm-one-whole"> ... </div>`
+ *
+ * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
+ * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
+ * at ‘mobile’ sizes.
+ *
+ * Demo: jsfiddle.net/inuitcss/WS4Ge
+ *
+ */
+
+@if $responsive == true{
+
+@include media-query(mobile){
+        @include grid-setup("mobile-");
+    }
+
+    @include media-query(tab){
+        @include grid-setup("tab-");
+    }
+
+    @include media-query(tab-and-up){
+        @include grid-setup("tab-and-up-");
+    }
+
+    @include media-query(lap){
+        @include grid-setup("lap-");
+    }
+
+    @include media-query(lap-and-up){
+        @include grid-setup("lap-and-up-");
+    }
+
+    @include media-query(desk){
+        @include grid-setup("desk-");
+    }
+
+
+/**
+ * If you have set the additional `$responsive-extra` variable to ‘true’ in
+ * `_vars.scss` then you now have access to the following class available to
+ * accomodate much larger screen resolutions.
+ */
+
+@if $responsive-extra == true{
+
+@include media-query(desk-wide){
+    @include grid-setup("desk-wide-");
+}
+
+}
+
+} /* endif */

data/stylesheets/redframework/objects/_breadcrumb.scss

@@ -0,0 +1,15 @@
+.breadcrumb > li + li:before{
+    content:"\00BB" "\00A0";
+}
+
+.breadcrumb--path > li + li:before{
+    content:"\002F" "\00A0";
+}
+
+.breadcrumb > li + li[data-breadcrumb]:before{
+    content:attr(data-breadcrumb) "\00A0";
+}
+
+.breadcrumb__root{
+    font-weight:bold;
+}

data/stylesheets/redframework/objects/_buttons.scss

@@ -0,0 +1,94 @@
+@mixin btn-size($font-size, $scale){
+	font-size: ($font-size * $scale);
+	padding:($font-size * $scale) (($font-size * $scale)*1.4);
+}
+
+@mixin btn-colors($color, $background-color, $border-color, $text-shadow-color, $text-shadow){
+	color:$color;
+	background: $background-color;
+	border: $border-color;
+	@if $text-shadow != 0 {
+		text-shadow: $text-shadow $text-shadow-color;
+	}
+}
+
+@mixin NewButton(
+	$name, $primary-color,
+	$default-color: contrast-color($primary-color), 
+	$default-background-color: $primary-color, 
+	$default-border-color: transparent, 
+	$default-text-shadow-color: rgba(darken($default-background-color, 30), 0.8), 
+	$default-text-shadow: 1px 1px 1px,
+	
+	$hover-color: $default-color,
+	$hover-background-color: darken($default-background-color, 10%), 
+	$hover-border-color: $default-border-color, 
+	$hover-text-shadow-color: rgba(contrast-color($hover-color), $text-shadow-transparency), 
+	$hover-text-shadow: 1px 1px 1px) {
+	.btn--#{$name} {
+		@include btn-colors($default-color, $default-background-color, $default-border-color, $default-text-shadow-color, $default-text-shadow);
+		&:hover {
+			@include btn-colors($hover-color, $hover-background-color, $hover-border-color, $hover-text-shadow-color, $hover-text-shadow);
+		}
+	}
+}
+
+.btn {
+	display:inline-block;
+	margin:0 1.5rem 1.5rem 0;
+	font-family: $btn_font-family; 
+	display:inline-block;
+	text-decoration:none;
+	font-weight: normal;
+	@include btn-size($btn-font-size, 1);
+	@include btn-colors($btn-default-color, $btn-default-background-color, $btn-default-border-color, $btn-default-text-shadow-color, $text-shadow-size);
+	&:hover, &:active, &:focus, &.selected {
+		@include btn-colors($btn-default-color--active, $btn-default-background-color--active, $btn-default-border-color--active, $btn-default-text-shadow-color--active, $text-shadow-size);
+	}
+}
+	.btn--icon {
+		width:48px;
+		height:48px;
+		line-height:48px;
+		text-align:center;
+		overflow:hidden;
+		padding:0;
+		text-shadow:none;
+		i {
+			line-height: 48px;
+			font-size: 24px;
+			margin: 0;
+		}
+	}
+
+	.btn--block {
+		display:block;
+		text-align:center;
+		margin: 0;
+		margin-bottom: 1rem;
+	}
+
+	.btn--xsmall {
+		@include btn-size($btn-font-size, .8);
+	}
+
+	.btn--small {
+		@include btn-size($btn-font-size, .9);
+	}	
+
+	.btn--large {
+		@include btn-size($btn-font-size, 1.2);
+	}	
+
+	.btn--xlarge {
+		@include btn-size($btn-font-size, 1.35);
+	}	
+
+	.btn--hard {
+		border-radius: 0px;
+	}
+
+	.btn--soft {
+		border-radius: 20px;
+	}
+