charcoalcms 0.0.2 → 0.0.3

data/Rakefile

@@ -0,0 +1,8 @@
+require 'rake/testtask'
+
+Rake::TestTask.new do |t|
+  t.libs << 'test'
+end
+
+desc "Run tests"
+task :default => :test

data/scss/_charcoal.scss

@@ -0,0 +1,23 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+
+/**
+* @tags: sass mixins library | Compass | http://compass-style.org
+* @use in: _var-project.scss
+*/
+
+@import "compass/css3";
+@import "compass/reset";
+
+/*****************/
+
+/**
+* @tags: responsive grid || _resonsive-grid.scss || Skeleton 960 | Skeleton 1200 | Responsify
+*/
+@import "charcoal/_responsive-grid";
+
+/*****************/
+
+/**
+* @tags:	core mixins library
+*/
+@import "charcoal/_core.functions";

data/scss/charcoal/_core.functions.scss

@@ -0,0 +1,560 @@
+@include responsive($responsive);
+
+/*****************/
+
+/**
+* @file _core.functions.scss
+*
+* @copyright (c) Locomotive 2013
+* @author Nicolas Poliquin <nic@locomotive.ca>
+* @version @Wed Mar  6 11:45:56 EST 2013
+* @since Version 2013-01-07
+* @license (c) Locomotive 2013
+*/
+
+/*****************/
+
+/*  =========
+  MIXIN
+=========
+*/
+
+/**
+* @tags: media queries
+* @mixin: @include media-querie(value) { attribut }
+* @usage:
+* .selector @include media-querie(320px) { width: 60%; }; }
+*/
+
+@mixin media-querie($value, $operator: 'min-width', $query: 'screen') {
+	@media #{$query} and (#{$operator}: #{$value}px) {
+		@content;
+	}
+}
+
+@mixin media-querie-max($value, $operator: 'max-width', $query: 'screen') {
+	@media #{$query} and (#{$operator}: #{$value}px) {
+		@content;
+	}
+}
+
+@mixin media-querie-minmax($value-min, $value-max, $operator: 'min-width', $operator2: 'max-width', $query: 'screen') {
+	@media #{$query} and (#{$operator}: #{$value-min}px) and (#{$operator2}: #{$value-max}px) {
+		@content;
+	}
+}
+
+/**
+* @tags: position
+* @mixin: @include position();
+* @usage:
+* .selector { @include position(absolute, 0, 0, 0, 0); }
+*/
+
+@mixin position ($type, $top, $right, $bottom, $left) {
+	position: 	$type;
+    top: 		$top;
+    right: 		$right;
+    bottom: 	$bottom;
+    left: 		$left;
+}
+
+
+/**
+* @tags: custom size
+* @mixin: @include size();
+* @usage:
+* .selector { @include size(104, 104); }
+*/
+@mixin size($height, $width) {
+	height: #{$height}px;
+	width:	#{$width}px;
+}
+
+/*****************/
+
+/**
+* @tags: backgroundimage
+* @for: Load background image
+* @mixin: @include backgroundimage();
+* @usage:
+* .selector { @include backgroundimage(bckg-btn-dwlmenu, png); }
+*/
+
+@mixin backgroundimage($name, $ext, $pos:top left, $repeat: no-repeat, $bgcolor:transparent) {
+  background: url('get-asset-images?a=#{$name}.#{$ext}') $pos $repeat $bgcolor;
+  //background: image-url('#{$name}.#{$ext}') $pos $repeat $bgcolor;
+}
+
+
+/*****************/
+
+/**
+* @tags: image height
+* @for: Grab the height of the image in your CSS
+* @library: Compass Image Helper || http://compass-style.org/reference/compass/helpers/urls/
+* @mixin: @include image-height();
+* @usage:
+* .selector { @include image-height(img-name, png); }
+*/
+
+@mixin image-height($name, $ext) {
+	height: 	image-height('#{$name}.#{$ext}');
+}
+
+/*****************/
+
+/**
+* @tags: image width
+* @for: Grab the width of the image in your CSS
+* @library: Compass Image Helper || http://compass-style.org/reference/compass/helpers/urls/
+* @mixin: @include image-width();
+* @usage:
+* .selector { @include image-width(img-name, png); }
+*/
+
+@mixin image-width($name, $ext) {
+	width: 	image-width('#{$name}.#{$ext}');
+}
+
+/*****************/
+
+/**
+* @tags: image size
+* @for: Grab the height/width of the image in your CSS
+* @library: Compass Image Helper || http://compass-style.org/reference/compass/helpers/urls/
+* @mixin: @include image-size();
+* @usage:
+* .selector { @include image-size(img-name, png); }
+*/
+
+@mixin image-size($name, $ext) {
+	height: image-height('#{$name}.#{$ext}');
+	width: 	image-width('#{$name}.#{$ext}');
+}
+
+/*****************/
+
+/**
+* @tags: center element horizontally in absolute position
+* @for: Grab the height/width of the image and add a value to the margin-left (half of the width)
+* @library: Compass Image Helper || http://compass-style.org/reference/compass/helpers/urls/
+* @mixin: @include center-absolute();
+* @usage:
+* .selector { @include center-absolute(img-name, png); }
+*/
+
+@mixin center-absolute($name, $ext, $repeat: no-repeat) {
+	position:	absolute;
+	left:		50%;
+	
+	margin-left: - image-width('#{$name}.#{$ext}') / 2;
+	height: image-height('#{$name}.#{$ext}');
+	width: 	image-width('#{$name}.#{$ext}');
+	
+	background:	image-url('#{$name}.#{$ext}') #{$repeat};
+}
+
+/*****************/
+
+/**
+* @tags: prefix
+* @for: add prefix to your attribut
+* @mixin: @include prefixer();
+* @usage:
+* .selector { @include prefixer(attribut, value, webkit ms moz o spec); } || @include prefixer(background-size, 100%, webkit ms moz o spec);
+*/
+
+@mixin prefixer ($property, $value, $prefixes) {
+
+  @each $prefix in $prefixes {
+
+    @if $prefix == webkit {
+      -webkit-#{$property}: $value;
+    }
+    @else if $prefix == moz {
+      -moz-#{$property}: $value;
+    }
+    @else if $prefix == ms {
+      -ms-#{$property}: $value;
+    }
+    @else if $prefix == o {
+      -o-#{$property}: $value;
+    }
+    @else if $prefix == spec {
+      #{$property}: $value;
+    }
+    @else {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+/*****************/
+
+/**
+* @tags: prefix & suffix
+* @for: add prefix to your attribut
+* @mixin: @include prefix-suffix();
+* @usage:
+* .selector { @include prefix-suffix(attribut, value, webkit ms moz o spec); } || @include prefixer(background-size, 100%, webkit ms moz o spec);
+*/
+
+@mixin prefix-suffix ($property, $value, $prefixes) {
+
+  @each $prefix in $prefixes {
+
+    @if $prefix == webkit {
+      -webkit-#{$property}: -webkit-#{$value};
+    }
+    @else if $prefix == moz {
+      -moz-#{$property}: -moz-#{$value};
+    }
+    @else if $prefix == ms {
+      -ms-#{$property}: -ms-#{$value};
+    }
+    @else if $prefix == o {
+      -o-#{$property}: -o-#{$value};
+    }
+    @else if $prefix == spec {
+      #{$property}: #{$value};
+    }
+    @else {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+/*****************/
+
+/**
+* @tags: suffix
+* @for: add suffix to your attribut
+* @mixin: @include suffix();
+* @usage:
+* .selector { @include suffix(attribut, value, webkit ms moz o spec); } || @include suffix(background-size, 100%, webkit ms moz o spec);
+*/
+
+@mixin suffix ($property, $value, $prefixes) {
+
+  @each $prefix in $prefixes {
+
+    @if $prefix == webkit {
+      #{$property}: -webkit-#{$value};
+    }
+    @else if $prefix == moz {
+      #{$property}: -moz-#{$value};
+    }
+    @else if $prefix == ms {
+      #{$property}: -ms-#{$value};
+    }
+    @else if $prefix == o {
+      #{$property}: -o-#{$value};
+    }
+    @else if $prefix == spec {
+      #{$property}: #{$value};
+    }
+    @else {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+/*****************/
+
+/**
+* @tags: keyframes
+* @for: add suffix to your keyframes animation
+* @mixin: @include keyframe(animationName, webkit moz o ms spec);
+* @usage:
+* .selector { @include keyframes(block1-visible, webkit ms moz o spec) {
+*		from, 0% {  }
+*		to { }
+*	}
+*/
+
+@mixin keyframes ($property, $prefixes) {
+
+  @each $prefix in $prefixes {
+
+    @if $prefix == webkit {
+      @-webkit-keyframes #{$property} { @content; }
+    }
+    @else if $prefix == moz {
+      @-moz-keyframes #{$property} { @content; }
+    }
+    @else if $prefix == ms {
+      @-ms-keyframes #{$property} { @content; }
+    }
+    @else if $prefix == o {
+      @-o-keyframes #{$property} { @content; }
+    }
+    @else if $prefix == spec {
+      @keyframes #{$property} { @content; }
+    }
+    @else {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+@-webkit-keyframes opacityValue {
+}
+
+/*****************/
+
+/**
+* @tags: debug
+* @for: add red border to element
+* @mixin: @include debug();
+* @usage:
+* .selector { @include debug(); }
+*/
+
+//Help for debugging
+%debug {
+	border:	1px red dotted;
+}
+
+/*****************/
+
+/**
+* @tags: css3 border radius
+* @mixin: @include rounded();
+* @usage:
+* .selector { @include rounded(10px); }
+*/
+
+@mixin rounded($value) {
+  border-radius: $value;
+  -moz-border-radius: $value;
+  -webkit-border-radius: $value;
+}
+
+/*****************/
+
+/**
+* @tags: css3 basic transition
+* @mixin: @include transition();
+* @usage:
+* .selector { @include transition(0.3s); }
+*/
+
+@mixin transition ($value) {
+	-webkit-transition: all $value ease;
+	-moz-transition: 	all $value ease;
+	-moz-transition:	all $value ease;
+	-ms-transition:		all $value ease;
+	-o-transition:		all $value ease;
+	transition:			all $value ease;
+}
+
+/*****************/
+
+/**
+* @tags: css3 basic animation
+* @mixin: @include animation();
+* @usage:
+* .selector { @include animation(0.3s); }
+*/
+
+@mixin animation ($value) {
+	-webkit-animation-duration: $value;
+	-moz-animation-duration: 	$value;
+	-ms-animation-duration: 	$value;
+	-o-animation-duration: 		$value;
+	animation-duration: 		$value;
+}
+
+/*****************/
+
+/**
+* @tags: css3 custom transition
+* @mixin: @include animation();
+* @usage:
+* .selector { @include custom-transition(0.3s); }
+*/
+
+@mixin custom-transition {
+	-webkit-transition: all 800ms cubic-bezier(1.000, 0, 0.170, 0.995); /* older webkit */
+	-webkit-transition: all 800ms cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	   -moz-transition: all 800ms cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	    -ms-transition: all 800ms cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	     -o-transition: all 800ms cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	        transition: all 800ms cubic-bezier(1.000, -0.005, 0.170, 0.995); /* custom */
+
+	-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.170, 0.995); /* older webkit */
+	-webkit-transition-timing-function: cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	   -moz-transition-timing-function: cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	    -ms-transition-timing-function: cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	     -o-transition-timing-function: cubic-bezier(1.000, -0.005, 0.170, 0.995);
+	        transition-timing-function: cubic-bezier(1.000, -0.005, 0.170, 0.995); /* custom */
+}
+
+@mixin easeOutQuad ($value) {
+	-webkit-transition: all $value cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	   -moz-transition: all $value cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	    -ms-transition: all $value cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	     -o-transition: all $value cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	        transition: all $value cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
+
+	-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	   -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	    -ms-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	     -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+	        transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
+}
+
+/*****************/
+
+/**
+* @tags: css3 transition delay
+* @mixin: @include delay();
+* @usage:
+* .selector { @include delay(0.3s); }
+*/
+
+@mixin delay ($value) {
+	transition-delay: $value;
+	-moz-transition-delay: $value; /* Firefox 4 */
+	-webkit-transition-delay: $value; /* Safari and Chrome */
+	-o-transition-delay: $value; /* Opera */
+}
+
+@mixin animation_delay ($value) {
+	animation-delay: $value;
+	-moz-animation-delay: $value; /* Firefox 4 */
+	-webkit-animation-delay: $value; /* Safari and Chrome */
+	-o-animation-delay: $value; /* Opera */
+}
+
+/*****************/
+
+/**
+* @tags: include padding into the width & height of your element
+* @mixin: @include borderbox();
+* @usage:
+* .selector { @include borderbox(); }
+*/
+
+@mixin borderbox {
+	box-sizing: 		border-box;
+	-webkit-box-sizing:	border-box;
+	-moz-box-sizing: 	border-box;
+}
+
+/*****************/
+
+/**
+* @tags: background opacity
+* @mixin: @include background-opacity();
+* @usage:
+* .selector { @include background-opacity(#fff); } || .selector { @include background-opacity(#fff, 0.8); }
+*/
+
+@mixin background-opacity($color, $opacity: 0.3) {
+    background: $color; /* The Fallback */
+    background: rgba($color, $opacity);
+}
+
+
+/*****************/
+
+/*  =========
+  FONT FACE
+=========
+*/
+
+/**
+* @tags: grab every font-face file
+* @mixin: @include font-face();
+* @usage:
+* .selector { @include font-face(font-custom-name, '../dir/font-file-name'); } | @include font-face(avenir, '../fonts/avenir-next-lt-pro');
+*/
+
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    src: url('#{$file-path}.eot#iefix');
+    	src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+           url('#{$file-path}.woff') format('woff'),
+           url('#{$file-path}.ttf') format('truetype'),
+           url('#{$file-path}.svg##{$font-family}') format('svg');
+  }
+}
+
+/*  =========
+  TRIANGLE
+=========
+*/
+
+@mixin triangle-up($value, $color) {
+	width: 		0; 
+	height: 	0; 
+	
+	border-left: 	$value solid transparent;
+	border-right: 	$value solid transparent;
+	border-bottom: 	$value solid $color;
+}
+
+@mixin triangle-right($value, $color) {
+	width: 		0; 
+	height: 	0; 
+	
+	border-left: 	$value solid transparent;
+	border-top: 	$value solid transparent;
+	border-bottom: 	$value solid $color;
+}
+
+@mixin triangle-down($value, $color) {
+	width: 		0; 
+	height: 	0; 
+	
+	border-left: 	$value solid transparent;
+	border-right: 	$value solid transparent;
+	border-top: 	$value solid $color;
+}
+
+@mixin triangle-left($value, $color) {
+	width: 		0; 
+	height: 	0; 
+	
+	border-top: 	$value solid transparent;
+	border-right: 	$value solid transparent;
+	border-bottom: 	$value solid $color;
+}
+
+/**
+* @tags: ie js breakpoint fix
+* @format:
+* .selector(@mixin ie-grid(width:60%;));
+*/
+
+@mixin ie-grid {
+	.is960 &,
+	.is1024 &,
+	.is1140 & {
+		@content;
+	}
+}
+
+/*****************/
+
+
+/**
+* @tags: css3 circle
+* @extend: pager button
+* @format:
+* @include circle(width value, height value, background-color);
+*/
+
+@mixin circle($circle-width, $circle-height, $color) {
+	width: 		$circle-width; 
+	height: 	$circle-height; 
+	background:	$color;
+	
+	@include border-radius($circle-width/2);
+}

data/scss/charcoal/_responsive-grid.scss

@@ -0,0 +1,92 @@
+/*
+* Skeleton V1.1
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 8/17/2011
+*/
+
+/**
+* @tags: 	getskeleton variable
+* @extend: 	swap between 960 or 1200
+* @format:	$layout: 960;
+*/
+
+@mixin grid($grid) {
+	@if $grid == 960 {
+		/*
+		* Skeleton V1.1
+		* Copyright 2011, Dave Gamache
+		* www.getskeleton.com
+		* Free to use under the MIT license.
+		* http://www.opensource.org/licenses/mit-license.php
+		* 8/17/2011
+		*/
+
+		.columns,.column{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}.container{position:relative;width:960px;margin:0 auto;padding:0;}.container .column,.container .columns{float:left;display:inline;margin-left:10px;margin-right:10px;line-height:normal;}.row{margin-bottom:20px;}.column.alpha,.columns.alpha{margin-left:0;}.column.omega,.columns.omega{margin-right:0;}.container .one.column,.container .one.columns{width:40px;}.container .two.columns{width:100px;}.container .three.columns{width:160px;}.container .four.columns{width:220px;}.container .five.columns{width:280px;}.container .six.columns{width:340px;}.container .seven.columns{width:400px;}.container .eight.columns{width:460px;}.container .nine.columns{width:520px;}.container .ten.columns{width:580px;}.container .eleven.columns{width:640px;}.container .twelve.columns{width:700px;}.container .thirteen.columns{width:760px;}.container .fourteen.columns{width:820px;}.container .fifteen.columns{width:880px;}.container .sixteen.columns{width:940px;}.container .one-third.column{width:300px;}.container .two-thirds.column{width:620px;}.container .offset-by-one{padding-left:60px;}.container .offset-by-two{padding-left:120px;}.container .offset-by-three{padding-left:180px;}.container .offset-by-four{padding-left:240px;}.container .offset-by-five{padding-left:300px;}.container .offset-by-six{padding-left:360px;}.container .offset-by-seven{padding-left:420px;}.container .offset-by-eight{padding-left:480px;}.container .offset-by-nine{padding-left:540px;}.container .offset-by-ten{padding-left:600px;}.container .offset-by-eleven{padding-left:660px;}.container .offset-by-twelve{padding-left:720px;}.container .offset-by-thirteen{padding-left:780px;}.container .offset-by-fourteen{padding-left:840px;}.container .offset-by-fifteen{padding-left:900px;}@media only screen and(min-width:768px) and(max-width:959px){.container{width:768px;}.container .column,.container .columns{margin-left:10px;margin-right:10px;}.column.alpha,.columns.alpha{margin-left:0;margin-right:10px;}.column.omega,.columns.omega{margin-right:0;margin-left:10px;}.alpha.omega{margin-left:0;margin-right:0;}.container .one.column,.container .one.columns{width:28px;}.container .two.columns{width:76px;}.container .three.columns{width:124px;}.container .four.columns{width:172px;}.container .five.columns{width:220px;}.container .six.columns{width:268px;}.container .seven.columns{width:316px;}.container .eight.columns{width:364px;}.container .nine.columns{width:412px;}.container .ten.columns{width:460px;}.container .eleven.columns{width:508px;}.container .twelve.columns{width:556px;}.container .thirteen.columns{width:604px;}.container .fourteen.columns{width:652px;}.container .fifteen.columns{width:700px;}.container .sixteen.columns{width:748px;}.container .one-third.column{width:236px;}.container .two-thirds.column{width:492px;}.container .offset-by-one{padding-left:48px;}.container .offset-by-two{padding-left:96px;}.container .offset-by-three{padding-left:144px;}.container .offset-by-four{padding-left:192px;}.container .offset-by-five{padding-left:240px;}.container .offset-by-six{padding-left:288px;}.container .offset-by-seven{padding-left:336px;}.container .offset-by-eight{padding-left:384px;}.container .offset-by-nine{padding-left:432px;}.container .offset-by-ten{padding-left:480px;}.container .offset-by-eleven{padding-left:528px;}.container .offset-by-twelve{padding-left:576px;}.container .offset-by-thirteen{padding-left:624px;}.container .offset-by-fourteen{padding-left:672px;}.container .offset-by-fifteen{padding-left:720px;}}@media only screen and(max-width:767px){.container{width:90%;}.container .columns,.container .column{margin:0;}.container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column{width:90%;}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0;}}@media only screen and(min-width:480px) and(max-width:767px){.container{width:90%;}.container .columns,.container .column{margin:0;}.container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column{width:90%;}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.row:after,.clearfix:after{clear:both;}.row,.clearfix{zoom:1;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
+	}
+	@else if $grid == 1200 {
+		/*
+		* Skeleton V1.1
+		* Copyright 2011, Dave Gamache
+		* www.getskeleton.com
+		* Free to use under the MIT license.
+		* http://www.opensource.org/licenses/mit-license.php
+		* 8/17/2011
+		*/
+
+		/*
+		Grid 1200px
+		Nicolas Poliquin
+		polikin.ca
+		*/
+
+		/**
+		* @tags: 	reponsive grid | 1200px width
+		* @plugin: 	using syze plugins to fit into 1024/1140px resolution || https://github.com/rezitech/syze || syze.min.js (1KB)
+		* @format:
+		* syze.sizes(320, 480, 768, 960, 1024, 1140).names({ 320:'320', 480:'480', 768:'768', 960:'960', 1024:'1024', 1140:'1140' });
+		*/
+
+		.columns,.column{-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}.cc .columns{clear:left;}.container{position:relative;width:1200px;margin:0 auto;padding:0;}.container .column,.container .columns{float:left;display:inline;margin-left:10px;margin-right:10px;}.row{margin-bottom:20px;}.column.alpha,.columns.alpha{margin-left:0;}.column.omega,.columns.omega{margin-right:0;}.container .one.column,.container .one.columns{width:55px;}.container .two.columns{width:120px;}.container .three.columns{width:205px;}.container .four.columns{width:280px;}.container .five.columns{width:355px;}.container .six.columns{width:430px;}.container .seven.columns{width:505px;}.container .eight.columns{width:580px;}.container .nine.columns{width:655px;}.container .ten.columns{width:730px;}.container .eleven.columns{width:805px;}.container .twelve.columns{width:880px;}.container .thirteen.columns{width:955px;}.container .fourteen.columns{width:1030px;}.container .fifteen.columns{width:1105px;}.container .sixteen.columns{width:1180px;}.container .one-third.column{width:380px;}.container .two-thirds.column{width:780px;}.container .offset-by-one{padding-left:75px;}.container .offset-by-two{padding-left:140px;}.container .offset-by-three{padding-left:225px;}.container .offset-by-four{padding-left:300px;}.container .offset-by-five{padding-left:375px;}.container .offset-by-six{padding-left:430px;}.container .offset-by-seven{padding-left:525px;}.container .offset-by-eight{padding-left:600px;}.container .offset-by-nine{padding-left:675px;}.container .offset-by-ten{padding-left:750px;}.container .offset-by-eleven{padding-left:825px;}.container .offset-by-twelve{padding-left:900px;}.container .offset-by-thirteen{padding-left:975px;}.container .offset-by-fourteen{padding-left:1050px;}.container .offset-by-fifteen{padding-left:1125px;}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}.is768 .container{width:768px;}.is768 .container .one.column,.is768 .container .one.columns{width:28px;}.is768 .container .two.columns{width:76px;}.is768 .container .three.columns{width:124px;}.is768 .container .four.columns{width:172px;}.is768 .container .five.columns{width:220px;}.is768 .container .six.columns{width:268px;}.is768 .container .seven.columns{width:316px;}.is768 .container .eight.columns{width:364px;}.is768 .container .nine.columns{width:412px;}.is768 .container .ten.columns{width:460px;}.is768 .container .eleven.columns{width:508px;}.is768 .container .twelve.columns{width:556px;}.is768 .container .thirteen.columns{width:604px;}.is768 .container .fourteen.columns{width:652px;}.is768 .container .fifteen.columns{width:700px;}.is768 .container .sixteen.columns{width:748px;}.is768 .container .one-third.column{width:236px;}.is768 .container .two-thirds.column{width:492px;}.is768 .container .offset-by-one{padding-left:48px;}.is768 .container .offset-by-two{padding-left:96px;}.is768 .container .offset-by-three{padding-left:144px;}.is768 .container .offset-by-four{padding-left:192px;}.is768 .container .offset-by-five{padding-left:240px;}.is768 .container .offset-by-six{padding-left:288px;}.is768 .container .offset-by-seven{padding-left:336px;}.is768 .container .offset-by-eight{padding-left:384px;}.is768 .container .offset-by-nine{padding-left:432px;}.is768 .container .offset-by-ten{padding-left:480px;}.is768 .container .offset-by-eleven{padding-left:528px;}.is768 .container .offset-by-twelve{padding-left:576px;}.is768 .container .offset-by-thirteen{padding-left:624px;}.is768 .container .offset-by-fourteen{padding-left:672px;}.is768 .container .offset-by-fifteen{padding-left:720px;}@media only screen and(min-width:768px) and(max-width:959px){.container{width:768px;}.container .one.column,.container .one.columns{width:28px;}.container .two.columns{width:76px;}.container .three.columns{width:124px;}.container .four.columns{width:172px;}.container .five.columns{width:220px;}.container .six.columns{width:268px;}.container .seven.columns{width:316px;}.container .eight.columns{width:364px;}.container .nine.columns{width:412px;}.container .ten.columns{width:460px;}.container .eleven.columns{width:508px;}.container .twelve.columns{width:556px;}.container .thirteen.columns{width:604px;}.container .fourteen.columns{width:652px;}.container .fifteen.columns{width:700px;}.container .sixteen.columns{width:748px;}.container .one-third.column{width:236px;}.container .two-thirds.column{width:492px;}.container .offset-by-one{padding-left:48px;}.container .offset-by-two{padding-left:96px;}.container .offset-by-three{padding-left:144px;}.container .offset-by-four{padding-left:192px;}.container .offset-by-five{padding-left:240px;}.container .offset-by-six{padding-left:288px;}.container .offset-by-seven{padding-left:336px;}.container .offset-by-eight{padding-left:384px;}.container .offset-by-nine{padding-left:432px;}.container .offset-by-ten{padding-left:480px;}.container .offset-by-eleven{padding-left:528px;}.container .offset-by-twelve{padding-left:576px;}.container .offset-by-thirteen{padding-left:624px;}.container .offset-by-fourteen{padding-left:672px;}.container .offset-by-fifteen{padding-left:720px;}}.is960 .container,.is1024 .container{width:960px;}.is960 .container .one.column,.is960 .container .one.columns{width:40px;}.is1024 .container .one.column,.is1024 .container .one.columns{width:40px;}.is960 .container .two.columns,.is1024 .container .two.columns{width:100px;}.is960 .container .three.columns,.is1024 .container .three.columns{width:160px;}.is960 .container .four.columns,.is1024 .container .four.columns{width:220px;}.is960 .container .five.columns,.is1024 .container .five.columns{width:280px;}.is960 .container .six.columns,.is1024 .container .six.columns{width:340px;}.is960 .container .seven.columns,.is1024 .container .seven.columns{width:400px;}.is960 .container .eight.columns,.is1024 .container .eight.columns{width:460px;}.is960 .container .nine.columns,.is1024 .container .nine.columns{width:520px;}.is960 .container .ten.columns,.is1024 .container .ten.columns{width:580px;}.is960 .container .eleven.columns,.is1024 .container .eleven.columns{width:640px;}.is960 .container .twelve.columns,.is1024 .container .twelve.columns{width:700px;}.is960 .container .thirteen.columns,.is1024 .container .thirteen.columns{width:760px;}.is960 .container .fourteen.columns,.is1024 .container .fourteen.columns{width:820px;}.is960 .container .fifteen.columns,.is1024 .container .fifteen.columns{width:880px;}.is960 .container .sixteen.columns,.is1024 .container .sixteen.columns{width:940px;}.is960 .container .one-third.column,.is1024 .container .one-third.column{width:300px;}.is960 .container .two-thirds.column,.is1024 .container .two-thirds.column{width:620px;}.is960 .container .offset-by-one,.is1024 .container .offset-by-one{padding-left:60px;}.is960 .container .offset-by-two,.is1024 .container .offset-by-two{padding-left:120px;}.is960 .container .offset-by-three,.is1024 .container .offset-by-three{padding-left:180px;}.is960 .container .offset-by-four,.is1024 .container .offset-by-four{padding-left:240px;}.is960 .container .offset-by-five,.is1024 .container .offset-by-five{padding-left:300px;}.is960 .container .offset-by-six,.is1024 .container .offset-by-six{padding-left:360px;}.is960 .container .offset-by-seven,.is1024 .container .offset-by-seven{padding-left:420px;}.is960 .container .offset-by-eight,.is1024 .container .offset-by-eight{padding-left:480px;}.is960 .container .offset-by-nine,.is1024 .container .offset-by-nine{padding-left:540px;}.is960 .container .offset-by-ten,.is1024 .container .offset-by-ten{padding-left:600px;}.is960 .container .offset-by-eleven,.is1024 .container .offset-by-eleven{padding-left:660px;}.is960 .container .offset-by-twelve,.is1024 .container .offset-by-twelve{padding-left:720px;}.is960 .container .offset-by-thirteen,.is1024 .container .offset-by-thirteen{padding-left:780px;}.is960 .container .offset-by-fourteen,.is1024 .container .offset-by-fourteen{padding-left:840px;}.is960 .container .offset-by-fifteen,.is1024 .container .offset-by-fifteen{padding-left:900px;}@media only screen and(min-width:960px) and(max-width:1199px){.container{width:960px;}.container .one.column,.container .one.columns{width:40px;}.container .two.columns{width:100px;}.container .three.columns{width:160px;}.container .four.columns{width:220px;}.container .five.columns{width:280px;}.container .six.columns{width:340px;}.container .seven.columns{width:400px;}.container .eight.columns{width:460px;}.container .nine.columns{width:520px;}.container .ten.columns{width:580px;}.container .eleven.columns{width:640px;}.container .twelve.columns{width:700px;}.container .thirteen.columns{width:760px;}.container .fourteen.columns{width:820px;}.container .fifteen.columns{width:880px;}.container .sixteen.columns{width:940px;}.container .one-third.column{width:300px;}.container .two-thirds.column{width:620px;}.container .offset-by-one{padding-left:60px;}.container .offset-by-two{padding-left:120px;}.container .offset-by-three{padding-left:180px;}.container .offset-by-four{padding-left:240px;}.container .offset-by-five{padding-left:300px;}.container .offset-by-six{padding-left:360px;}.container .offset-by-seven{padding-left:420px;}.container .offset-by-eight{padding-left:480px;}.container .offset-by-nine{padding-left:540px;}.container .offset-by-ten{padding-left:600px;}.container .offset-by-eleven{padding-left:660px;}.container .offset-by-twelve{padding-left:720px;}.container .offset-by-thirteen{padding-left:780px;}.container .offset-by-fourteen{padding-left:840px;}.container .offset-by-fifteen{padding-left:900px;}}.is320 .container{width:90%;}.is320 .container .columns,.is320 .container .column{margin:0;}.is320 .container .one.column,.is320 .container .one.columns{width:90%;}.is320 .container .two.columns,.is320 .container .three.columns,.is320 .container .four.columns,.is320 .container .five.columns,.is320 .container .six.columns,.is320 .container .seven.columns,.is320 .container .eight.columns,.is320 .container .nine.columns,.is320 .container .ten.columns,.is320 .container .eleven.columns,.is320 .container .twelve.columns,.is320 .container .thirteen.columns,.is320 .container .fourteen.columns,.is320 .container .fifteen.columns,.is320 .container .sixteen.columns,.is320 .container .one-third.column,.is320 .container .two-thirds.column{width:90%;}.is320 .container .offset-by-one,.is320 .container .offset-by-two,.is320 .container .offset-by-three,.is320 .container .offset-by-four,.is320 .container .offset-by-five,.is320 .container .offset-by-six,.is320 .container .offset-by-seven,.is320 .container .offset-by-eight,.is320 .container .offset-by-nine,.is320 .container .offset-by-ten,.is320 .container .offset-by-eleven,.is320 .container .offset-by-twelve,.is320 .container .offset-by-thirteen,.is320 .container .offset-by-fourteen,.is320 .container .offset-by-fifteen{padding-left:0;}@media only screen and(max-width:767px){.container{width:90%;}.container .columns,.container .column{margin:0;}.container .one.column,.container .one.columns{width:90%;}.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column{width:90%;}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0;}}.is480 .container{width:90%;}.is480 .container .columns,.is480 .container .column{margin:0;}.is480 .container .one.column,.is480 .container .one.columns{width:90%;}.is480 .container .two.columns,.is480 .container .three.columns,.is480 .container .four.columns,.is480 .container .five.columns,.is480 .container .six.columns,.is480 .container .seven.columns,.is480 .container .eight.columns,.is480 .container .nine.columns,.is480 .container .ten.columns,.is480 .container .eleven.columns,.is480 .container .twelve.columns,.is480 .container .thirteen.columns,.is480 .container .fourteen.columns,.is480 .container .fifteen.columns,.is480 .container .sixteen.columns,.is480 .container .one-third.column,.is480 .container .two-thirds.column{width:90%;}@media only screen and(min-width:480px) and(max-width:767px){.container{width:90%;}.container .columns,.container .column{margin:0;}.container .one.column,.container .one.columns{width:90%;}.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .thirteen.columns,.container .fourteen.columns,.container .fifteen.columns,.container .sixteen.columns,.container .one-third.column,.container .two-thirds.column{width:90%;}}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.row:before{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;clear:both;}.clearfix:after{clear:both;}.row,.clearfix{zoom:1;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
+	}@else if $grid == fluid {
+.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve,.thirteen,.fourteen,.fifteen,.sixteen,.one-third{float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.columns{margin-left:.75%}.one-third{width:32.4%}.one{width:4.84375%}.two{width:11.1875%}.three{width:17.53125%}.four{width:23.875%}.five{width:30.21875%}.six{width:36.5625%}.seven{width:42.90625%}.eight{width:49.25%}.nine{width:55.59375%}.ten{width:61.9375%}.eleven{width:68.28125%}.twelve{width:74.625%}.thirteen{width:80.96875%}.fourteen{width:87.3125%}.fifteen{width:93.65625%}.sixteen{width:90%}#container,.inner,.container{margin:0 auto}#container{clear:both;padding-top:20px}@media screen and (max-width:768px){.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve,.thirteen,.fourteen,.fifteen,.sixteen,.one-third{width:100%}#container,.inner,.container{width:100%;padding:0 5% 0 5%}}.cf{*zoom:1}
+	}@else if $grid == none {
+		/* no grid */
+	}
+}
+
+/**
+* @tags: 	fixed grid
+*/
+
+@mixin fixed-grid($grid){
+	@if $grid == 960 {
+				.columns,.column{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}.container{position:relative;width:960px;margin:0 auto;padding:0;}.container .column,.container .columns{float:left;display:inline;margin-left:10px;margin-right:10px;line-height:normal;}.row{margin-bottom:20px;}.column.alpha,.columns.alpha{margin-left:0;}.column.omega,.columns.omega{margin-right:0;}.container .one.column,.container .one.columns{width:40px;}.container .two.columns{width:100px;}.container .three.columns{width:160px;}.container .four.columns{width:220px;}.container .five.columns{width:280px;}.container .six.columns{width:340px;}.container .seven.columns{width:400px;}.container .eight.columns{width:460px;}.container .nine.columns{width:520px;}.container .ten.columns{width:580px;}.container .eleven.columns{width:640px;}.container .twelve.columns{width:700px;}.container .thirteen.columns{width:760px;}.container .fourteen.columns{width:820px;}.container .fifteen.columns{width:880px;}.container .sixteen.columns{width:940px;}.container .one-third.column{width:300px;}.container .two-thirds.column{width:620px;}.container .offset-by-one{padding-left:60px;}.container .offset-by-two{padding-left:120px;}.container .offset-by-three{padding-left:180px;}.container .offset-by-four{padding-left:240px;}.container .offset-by-five{padding-left:300px;}.container .offset-by-six{padding-left:360px;}.container .offset-by-seven{padding-left:420px;}.container .offset-by-eight{padding-left:480px;}.container .offset-by-nine{padding-left:540px;}.container .offset-by-ten{padding-left:600px;}.container .offset-by-eleven{padding-left:660px;}.container .offset-by-twelve{padding-left:720px;}.container .offset-by-thirteen{padding-left:780px;}.container .offset-by-fourteen{padding-left:840px;}.container .offset-by-fifteen{padding-left:900px;}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.row:after,.clearfix:after{clear:both;}.row,.clearfix{zoom:1;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.wrapper { overflow-x: auto; min-width: 960px;}
+	}@elseif $grid == 1200 {
+		.columns,.column{-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}.cc .columns{clear:left;}.container{position:relative;width:1200px;margin:0 auto;padding:0;}.container .column,.container .columns{float:left;display:inline;margin-left:10px;margin-right:10px;}.row{margin-bottom:20px;}.column.alpha,.columns.alpha{margin-left:0;}.column.omega,.columns.omega{margin-right:0;}.container .one.column,.container .one.columns{width:55px;}.container .two.columns{width:120px;}.container .three.columns{width:205px;}.container .four.columns{width:280px;}.container .five.columns{width:355px;}.container .six.columns{width:430px;}.container .seven.columns{width:505px;}.container .eight.columns{width:580px;}.container .nine.columns{width:655px;}.container .ten.columns{width:730px;}.container .eleven.columns{width:805px;}.container .twelve.columns{width:880px;}.container .thirteen.columns{width:955px;}.container .fourteen.columns{width:1030px;}.container .fifteen.columns{width:1105px;}.container .sixteen.columns{width:1180px;}.container .one-third.column{width:380px;}.container .two-thirds.column{width:780px;}.container .offset-by-one{padding-left:75px;}.container .offset-by-two{padding-left:140px;}.container .offset-by-three{padding-left:225px;}.container .offset-by-four{padding-left:300px;}.container .offset-by-five{padding-left:375px;}.container .offset-by-six{padding-left:430px;}.container .offset-by-seven{padding-left:525px;}.container .offset-by-eight{padding-left:600px;}.container .offset-by-nine{padding-left:675px;}.container .offset-by-ten{padding-left:750px;}.container .offset-by-eleven{padding-left:825px;}.container .offset-by-twelve{padding-left:900px;}.container .offset-by-thirteen{padding-left:975px;}.container .offset-by-fourteen{padding-left:1050px;}.container .offset-by-fifteen{padding-left:1125px;}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.row:before{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;clear:both;}.clearfix:after{clear:both;}.row,.clearfix{zoom:1;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.is960 .container,.is1024 .container,.is1140 .container{width:960px;}.is960 .container .one.column,.is960 .container .one.columns,.is1024 .container .one.columns,.is1140 .container .one.columns{width:40px;}.is1024 .container .one.column,.is1024 .container .one.columns{width:40px;}.is960 .container .two.columns,.is1024 .container .two.columns,.is1140 .container .two.columns{width:100px;}.is960 .container .three.columns,.is1024 .container .three.columns,.is1140 .container .three.columns{width:160px;}.is960 .container .four.columns,.is1024 .container .four.columns,.is1140 .container .four.columns{width:220px;}.is960 .container .five.columns,.is1024 .container .five.columns,.is1140 .container .five.columns{width:280px;}.is960 .container .six.columns,.is1024 .container .six.columns,.is1140 .container .six.columns{width:340px;}.is960 .container .seven.columns,.is1024 .container .seven.columns,.is1140 .container .seven.columns{width:400px;}.is960 .container .eight.columns,.is1024 .container .eight.columns,.is1140 .container .eight.columns{width:460px;}.is960 .container .nine.columns,.is1024 .container .nine.columns,.is1140 .container .nine.columns{width:520px;}.is960 .container .ten.columns,.is1024 .container .ten.columns,.is1140 .container .ten.columns{width:580px;}.is960 .container .eleven.columns,.is1024 .container .eleven.columns,.is1140 .container .eleven.columns{width:640px;}.is960 .container .twelve.columns,.is1024 .container .twelve.columns,.is1140 .container .twelve.columns{width:700px;}.is960 .container .thirteen.columns,.is1024 .container .thirteen.columns,.is1140 .container .thirteen.columns{width:760px;}.is960 .container .fourteen.columns,.is1024 .container .fourteen.columns,.is1140 .container .fourteen.columns{width:820px;}.is960 .container .fifteen.columns,.is1024 .container .fifteen.columns,.is1140 .container .fifteen.columns{width:880px;}.is960 .container .sixteen.columns,.is1024 .container .sixteen.columns,.is1140 .container .sixteen.columns{width:940px;}.is960 .container .one-third.column,.is1024 .container .one-third.column,.is1140 .container .one-third.column{width:300px;}.is960 .container .two-thirds.column,.is1024 .container .two-thirds.column,.is1140 .container .two-thirds.column{width:620px;}.is960 .container .offset-by-one,.is1024 .container .offset-by-one,.is1140 .container .offset-by-one{padding-left:60px;}.is960 .container .offset-by-two,.is1024 .container .offset-by-two,.is1140 .container .offset-by-two{padding-left:120px;}.is960 .container .offset-by-three,.is1024 .container .offset-by-three,.is1140 .container .offset-by-three{padding-left:180px;}.is960 .container .offset-by-four,.is1024 .container .offset-by-four,.is1140 .container .offset-by-four{padding-left:240px;}.is960 .container .offset-by-five,.is1024 .container .offset-by-five,.is1140 .container .offset-by-five{padding-left:300px;}.is960 .container .offset-by-six,.is1024 .container .offset-by-six,.is1140 .container .offset-by-six{padding-left:360px;}.is960 .container .offset-by-seven,.is1024 .container .offset-by-seven,.is1140 .container .offset-by-seven{padding-left:420px;}.is960 .container .offset-by-eight,.is1024 .container .offset-by-eight,.is1140 .container .offset-by-eight{padding-left:480px;}.is960 .container .offset-by-nine,.is1024 .container .offset-by-nine,.is1140 .container .offset-by-nine{padding-left:540px;}.is960 .container .offset-by-ten,.is1024 .container .offset-by-ten,.is1140 .container .offset-by-ten{padding-left:600px;}.is960 .container .offset-by-eleven,.is1024 .container .offset-by-eleven,.is1140 .container .offset-by-eleven{padding-left:660px;}.is960 .container .offset-by-twelve,.is1024 .container .offset-by-twelve,.is1140 .container .offset-by-twelve{padding-left:720px;}.is960 .container .offset-by-thirteen,.is1024 .container .offset-by-thirteen,.is1140 .container .offset-by-thirteen{padding-left:780px;}.is960 .container .offset-by-fourteen,.is1024 .container .offset-by-fourteen,.is1140 .container .offset-by-fourteen{padding-left:840px;}.is960 .container .offset-by-fifteen,.is1024 .container .offset-by-fifteen,.is1140 .container .offset-by-fifteen{padding-left:900px;}.is768 .wrapper { min-width: 1200px; overflow-x: auto;}
+	}
+}
+
+/*****************/
+
+
+/**
+* @tags: enable or disable responsive grid
+*/
+
+@mixin responsive($responsive) {
+	@if $responsive == true {
+		@include grid($layout); 
+	}@elseif $responsive == false {
+		@include fixed-grid($layout);
+	}
+	@elseif $responsive == fluid {
+		@include grid($layout);
+	}@elseif $responsive == none {
+		@include grid($layout);
+	}
+}
+
+/*****************/

metadata

@@ -1,16 +1,16 @@
 --- !ruby/object:Gem::Specification 
 name: charcoalcms
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 25
   prerelease: 
   segments: 
   - 0
   - 0
-  - 2
-  version: 0.0.2
+  - 3
+  version: 0.0.3
 platform: ruby
 authors: 
-- Nik
+- Nik | polikin.ca
 autorequire: 
 bindir: bin
 cert_chain: []
@@ -25,24 +25,44 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 3
+        hash: 43
         segments: 
         - 0
-        version: "0"
+        - 12
+        - 2
+        version: 0.12.2
   type: :runtime
   version_requirements: *id001
-description: Custom Sass/Compass mixins & responsive grid
-email: 
-- responsiveness@polikin.ca
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 15
+        segments: 
+        - 3
+        - 2
+        - 0
+        version: 3.2.0
+  type: :runtime
+  version_requirements: *id002
+description: Sass/Compass mixins & Include responsive grid base on getskeleton html/css structure || 960 (http://getskeleton.com/) or 1200 (https://github.com/theresponsiveness/GetSkeleton1200) || Fluid (http://app.responsify.it/)
+email: responsiveness@polikin.ca
 executables: []
 
 extensions: []
 
 extra_rdoc_files: []
 
-files: []
-
-homepage: https://github.com/theresponsiveness/
+files: 
+- Rakefile
+- scss/_charcoal.scss
+- scss/charcoal/_core.functions.scss
+- scss/charcoal/_responsive-grid.scss
+homepage: http://rubygems.org/gems/charcoalcms
 licenses: []
 
 post_install_message: 
@@ -64,16 +84,17 @@ required_rubygems_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 3
+      hash: 11
       segments: 
-      - 0
-      version: "0"
+      - 1
+      - 2
+      version: "1.2"
 requirements: []
 
-rubyforge_project: 
+rubyforge_project: charcoalcms
 rubygems_version: 1.8.25
 signing_key: 
 specification_version: 3
-summary: getskeleton (960 || http://getskeleton.com/, 1200 || https://github.com/theresponsiveness/GetSkeleton1200, Responsify || http://app.responsify.it/
+summary: Sass/Compass mixins & Include responsive grid base on getskeleton
 test_files: []