Sassifaction 0.0.2 → 0.0.3

data/sass/base/_fonts.scss

@@ -0,0 +1,20 @@
+// sans-serif
+
+$arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucidagrande: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$trebuchet: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+$verdana: Verdana, Geneva, sans-serif;
+
+// serif
+
+$baskerville: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
+$georgia: Georgia, Times, "Times New Roman", serif;
+$lucidabright: "Lucida Bright", Georgia, serif;
+$tnr: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
+
+// monospaced
+
+$consolas: Consolas, monaco, monospace;
+$courier: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
+$monaco: Monaco, Consolas, "Lucida Console", monospace;

data/sass/base/_helpers.scss

@@ -0,0 +1,60 @@
+// -------------------------------------
+//   helpers
+// -------------------------------------
+
+%ir {
+	color: transparent;
+	font: 0/0 a;
+	text-shadow: none;
+}
+
+// hide from everything ----------------
+
+%hidden {
+	display: none !important;
+	visibility: hidden;
+}
+
+%visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	&.focusable:active,
+	&.focusable:focus {
+		clip: auto;
+		height: auto;
+		margin: 0;
+		overflow: visible;
+		position: static;
+		width: auto;
+	}
+}
+
+%invisible {
+	visibility: hidden;
+}
+
+// clearfix ----------------------------
+
+%cf {
+	&:before,
+	&:after {
+		content: "";
+		display: table;
+	}
+	&:after {
+		clear: both;
+	}
+}
+
+// remove margin from nested lists -----
+
+li > ul,
+li > ol {
+	margin-bottom:0;
+}

data/sass/base/_mixins.scss

@@ -0,0 +1,18 @@
+// -------------------------------------
+//   mixins
+// -------------------------------------
+
+@import "mixins/_tint-and-shade.scss";
+@import "mixins/_media-queries.scss";
+@import "mixins/_maths.scss";
+@import "mixins/_misc.scss";
+@import "mixins/_triangles.scss";
+@import "mixins/_shapes.scss";
+@import "mixins/_colors.scss";
+@import "mixins/_rwd-padding-margin.scss";
+@import "mixins/_border-radius.scss";
+@import "mixins/_children-of-ie.scss";
+@import "mixins/_BEM.scss";
+@import "mixins/_typography.scss";
+@import "mixins/_placeholder.scss";
+@import "mixins/_IE7-padding.scss";

data/sass/base/_print.scss

@@ -0,0 +1,75 @@
+// -------------------------------------
+//   print styles
+// -------------------------------------
+
+@media print {
+    * {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster: h5bp.com/s */
+        box-shadow:none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+// Don't show links for images, or javascript/internal links
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; /* h5bp.com/t */
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+    img {
+        -webkit-filter: grayscale(100%);
+        -moz-filter: grayscale(100%);
+        -ms-filter: grayscale(100%);
+        -o-filter: grayscale(100%);
+        filter: grayscale(100%);
+    }
+}

data/sass/base/mixins/_BEM.scss

@@ -0,0 +1,16 @@
+// Only works w/ Sass 3.3
+
+// sub-components or elements get appended with "__" and the $name
+
+@mixin e($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+// modifiers get appended with "--" and the $name
+
+@mixin m($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}

data/sass/base/mixins/_IE7-padding.scss

@@ -0,0 +1,31 @@
+// Creates IE7 and below specific widths as the library uses box-sizing: border-box;
+// note it requires a conditional CSS comment to add a class to the <HTML>
+
+@mixin IE7Padding($width: null, $unit: 1px, $paddingLeft: 0, $paddingRight: 0) {
+@if $paddingLeft == 0 and $paddingRight != 0 {
+      padding-right: $paddingRight * $unit;
+      width: $width * $unit;
+      .lt-ie8 & {
+        padding-right: $paddingRight * $unit;
+        width: ($width - $paddingRight) * $unit;
+      }
+    }
+    @else if $paddingRight == 0 and $paddingLeft != 0{
+      padding-left: $paddingLeft * $unit;
+      width: $width * $unit;
+      .lt-ie8 & {
+        padding-left: $paddingLeft * $unit;
+        width: ($width - $paddingLeft) * $unit;
+      }
+    }
+  @else if $paddingRight !=0 and $paddingLeft != 0 {
+    padding-right: $paddingRight * $unit;
+    padding-left: $paddingLeft * $unit;
+    width: $width * $unit;
+    .lt-ie8 & {
+      padding-right: $paddingRight * $unit;
+      padding-left: $paddingLeft * $unit;
+      width: ($width - $paddingLeft - $paddingRight) * $unit;
+    }
+  }
+}

data/sass/base/mixins/_border-radius.scss

@@ -0,0 +1,32 @@
+// Cross-browser border radius
+
+@mixin border-radius($a: false, $b: false, $c: false, $d: false, $top-left: 0, $top-right: 0, $bottom-right: 0, $bottom-left: 0, $top: false, $bottom: false, $right: false, $left: false, $radius: false) {
+
+  // Handle shorthand notation like CSS3 would
+  // You shouldn't explictly set these variables when calling the mixin
+  @if $d { $radius: $a $b $c $d; }
+  @else if $c { $radius: $a $b $c; }
+  @else if $b { $radius: $a $b; }
+  @else if $a { $radius: $a; }
+
+  @else {
+
+    // Target individual corners (or groups) instead of using CSS3 shorthand
+    @if $top { $top-left: $top; $top-right: $top; }
+    @if $bottom { $bottom-right: $bottom; $bottom-left: $bottom; }
+    @if $left { $top-left: $left; $bottom-left: $left; }
+    @if $right { $top-right: $right; $bottom-right: $right; }
+    @if $top-left { $top-left: $top-left; }
+    @if $top-right { $top-right: $top-right; }
+    @if $bottom-left { $bottom-left: $bottom-left; }
+    @if $bottom-right { $bottom-right: $bottom-right; }
+
+    // Set the radius
+    $radius: $top-left $top-right $bottom-right $bottom-left;
+  }
+
+  // Webkit, Mozilla, KHTML and standard CSS3
+  border-radius: $radius;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}

data/sass/base/mixins/_children-of-ie.scss

@@ -0,0 +1,11 @@
+////////////////////////
+// nth-child() support for IE 7 and 8
+////////////////////////
+
+@function nth-child($n) {
+  $nth-child: first-child;
+  @for $i from 2 through $n {
+    $nth-child: append($nth-child, #{"+*"});
+  }
+  @return #{":"}$nth-child;
+}

data/sass/base/mixins/_colors.scss

@@ -0,0 +1,58 @@
+@function colorize($color, $change: n) {
+  @if $change == l1 {
+    @return tint($color, 20%);
+  }
+  @else if $change == l2 {
+    @return tint($color, 40%);
+  }
+  @else if $change == l3 {
+    @return tint($color, 60%);
+  }
+  @else if $change == l4 {
+    @return tint($color, 80%);
+  }
+  @else if $change == d1 {
+    @return tint($color, 20%);
+  }
+  @else if $change == d2 {
+    @return tint($color, 40%);
+  }
+  @else if $change == d3 {
+    @return tint($color, 60%);
+  }
+  @else if $change == d4 {
+    @return tint($color, 80%);
+  }
+  @else {
+    @return ($color)
+  }
+}
+
+@function trans($color, $percentage) {
+  @return lighten($color, (1-$percentage)*5%);
+}
+@function transd($color, $percentage) {
+  @return darken($color, (1-$percentage)*5%);
+}
+@mixin tran($type, $color, $percentage, $shade: ligthen) {
+  @if $shade == lighten {
+    @if $type == color {
+      color: trans($color, $percentage);
+      color: rgba($color, $percentage);
+    }
+    @if $type == bg {
+      background-color: trans($color, $percentage);
+      background-color: rgba($color, $percentage);
+    }
+  }
+  @else {
+     @if $type == color {
+      color: transd($color, $percentage);
+      color: rgba($color, $percentage);
+    }
+    @if $type == bg {
+      background-color: transd($color, $percentage);
+      background-color: rgba($color, $percentage);
+    }
+  }
+}

data/sass/base/mixins/_maths.scss

@@ -0,0 +1,34 @@
+// rem size
+
+@function rem($size) {
+	@return #{$size/$doc-font-size}rem;
+}
+
+// em size
+
+@function em($size) {
+	@return #{$size/$doc-font-size}em;
+}
+
+// rem + px fallback
+
+@mixin remit($property, $sizes) {
+	$rems: ();
+	$pxs: ();
+
+	@for $i from 1 through length($sizes) {
+		$size: nth($sizes, $i);
+		$pxs: join($pxs, #{$size}px);
+		$rems: join($rems, #{$size/$doc-font-size}rem);
+	}
+
+	#{$property}: $pxs;
+	#{$property}: $rems;
+}
+
+// making simple squares
+
+@mixin size($width, $height: $width) {
+  width: $width;
+  height: $height;
+}

data/sass/base/mixins/_media-queries.scss

@@ -0,0 +1,67 @@
+/*
+
+    A simpler media query mixin
+
+    This mixin allows you to quickly create a media query in your project. With the ability to define the breakpoint in PX (which get's converted into EMs).
+    There's also the ability to define min/max and width/height (with defaults to min-width).
+
+    There's also an option to duplicate the content into a OldIE conditionally classed bit of CSS.
+
+    You would use it like this
+
+        body {
+            @include (280) {
+                background-color: blue;
+            }
+            @include mq(600, false) {
+                background-color: red;
+            }
+            @include mq(1200, true, max) {
+                font-size: 110%;
+            }
+        }
+
+    Which would give you this compiled CSS
+
+        @media (min-width: 17.5em) {
+            body {
+                background-color: blue;
+            }
+        }
+        @media (min-width: 37.5em) {
+            body {
+            background-color: red;
+            }
+        }
+        .lt-ie9 body {
+            font-size: 110%;
+        }
+        @media (max-width: 75em) {
+            body {
+                font-size: 110%;
+            }
+        }
+
+*/
+
+
+@mixin mq($point, $IE9: false, $query1: min, $query2: width) {
+    @if $IE9 == true{
+        .lt-ie9 & {
+            @content;
+        }
+    }
+
+    @media (#{$query1}-#{$query2}: $point / $doc-font-size +em) {
+        @content;
+    }
+}
+
+
+// Orientation Media Query Mixin
+
+@mixin orient($orientation: landscape) {
+    @media (orientation : $orientation) {
+        @content;
+    }
+}

data/sass/base/mixins/_misc.scss

@@ -0,0 +1,40 @@
+// inline-block
+
+	@mixin inline-block {
+	  	display: inline-block;
+	  		.lt-ie9 & {
+				zoom: 1;
+				*display: inline;
+	  		}
+	}
+
+// box-sizing with IE fallback and grid lovliness
+
+	@mixin box($width:'null', $padding:'null', $margin:$gutter, $first: false) {
+
+	@if $first == false {
+		float: left;
+		margin-right: 0% + $margin;
+		padding: 0% +$padding;
+		width: 0% + $width - $margin;
+		.lt-ie8 & {
+		  margin-right: 0% + $margin;
+		  padding: 0% + $padding;
+		  width: 0% + $width - $padding - $padding - $margin;
+		}
+	  }
+	  @else {
+		float: left;
+		margin-left: 0% + $first;
+		margin-right: 0% + $margin;
+		padding: 0% +$padding;
+		width: 0% + $width - $margin - $first;
+		.lt-ie7 & {
+		  margin-left: 0% + $first;
+		  margin-right: 0% + $margin;
+		  padding: 0% + $padding;
+		  width: 0% + $width - $padding - $padding - $margin - $first;
+		}
+	  }
+	}
+