Merge pull request html5blank#55 from scottaohara/sassy

Sassy

sass/_mixins.scss

@@ -0,0 +1,193 @@
+// ----------------------------------------------------------------
+//  Vendor Prefix
+// ----------------------------------------------------------------
+
+// All vendor prefixes
+@mixin vendor-all($property, $value...) {
+       -moz-#{$property}: $value;
+        -ms-#{$property}: $value;
+         -o-#{$property}: $value;
+    -webkit-#{$property}: $value;
+            #{$property}: $value;
+}
+
+// Just -moz- & -webkit- prefixes
+@mixin vendor-moz-wk($property, $value...) {
+      -moz-#{$property}: $value;
+   -webkit-#{$property}: $value;
+           #{$property}: $value;
+}
+
+
+// Only webkit prefixes
+@mixin vendor-wk($property, $value...) {
+   -webkit-#{$property}: $value;
+           #{$property}: $value;
+}
+
+
+// ----------------------------------------------------------------------------
+//  Box Sizing
+// ----------------------------------------------------------------------------
+
+@mixin box-sizing($box-value) {
+  @include vendor-moz-wk(box-sizing, $box-value);
+}
+
+
+// ----------------------------------------------------------------------------
+//  Border Radius
+// ----------------------------------------------------------------------------
+
+@mixin border-radius($br-value ...) {
+  border-radius: $br-value;
+  background-clip: padding-box;
+}
+
+
+// ----------------------------------------------------------------------------
+//  Box Shadow
+//  See _var.scss to edit & create box-shadow rules keeping webkit prefix
+//  around for early android / iOS devices that may still need it.
+//  -moz- removed as it hasn't been needed since firefox 3.6
+// ----------------------------------------------------------------------------
+
+@mixin box-shadow($bs-value ...) {
+  -webkit-box-shadow: $bs-value;
+          box-shadow: $bs-value;
+}
+
+
+// ----------------------------------------------------------------------------
+//  Hi-res Retina Images
+//  https://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
+// ----------------------------------------------------------------------------
+
+@mixin image-2x($image, $width, $height) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+         (-o-min-device-pixel-ratio: 2.6/2),
+         (-webkit-min-device-pixel-ratio: 1.3),
+         (min-device-pixel-ratio: 1.3),
+         (min-resolution: 1.3dppx){
+          // on retina, use image that's scaled by 2
+          background-image: url($image);
+          background-size: $width $height;
+         }
+}
+
+
+// ----------------------------------------------------------------------------
+//  Fixed Position Elements
+// ----------------------------------------------------------------------------
+
+// Position via a coordinate on each axis & position type
+@mixin position($t-or-b, $tb-unit, $l-or-r, $lr-unit, $position) {
+  position: $position;
+
+  @if $t-or-b == bottom {
+    bottom: $tb-unit;
+  }
+
+  @else if $t-or-b == top {
+    top: $tb-unit;
+  }
+
+
+  @if $l-or-r == left {
+    left: $lr-unit;
+  }
+
+  @else if $l-or-r == right {
+    right: $lr-unit;
+  }
+}
+
+// Example:
+// @include fixed-block(bottom, 10px, left, 333px, fixed);
+
+
+// ----------------------------------------------------------------------------
+//  Linear Gradient
+// ----------------------------------------------------------------------------
+
+@mixin linear-gradient($fallback, $grad-line, $grad-colors...) {
+  background-color: $fallback;
+  background:    -moz-linear-gradient($grad-line, $grad-colors);
+  background:      -o-linear-gradient($grad-line, $grad-colors);
+  background: -webkit-linear-gradient($grad-line, $grad-colors);
+  background:         linear-gradient($grad-line, $grad-colors);
+}
+//  grad-line - use either ###deg or top, let, bottom, right
+//  example:
+//  @include linear-gradient(80deg, #fcc, #f23);
+//  @include linear-gradient(top, #fcc, #f23);
+
+
+// Linear Gradient w/ variable input
+@mixin var-gradient($fallback, $grad-var) {
+  background-color: $fallback;
+  background:    -moz-linear-gradient($grad-var);
+  background:      -o-linear-gradient($grad-var);
+  background: -webkit-linear-gradient($grad-var);
+  background:         linear-gradient($grad-var);
+}
+
+
+// ----------------------------------------------------------------------------
+//  Radial Gradient
+// ----------------------------------------------------------------------------
+
+@mixin radial-gradient($fallback, $radial...) {
+  background-color: $fallback;
+  background:    -moz-radial-gradient($radial);
+  background:      -o-radial-gradient($radial);
+  background: -webkit-radial-gradient($radial);
+  background:         radial-gradient($radial);
+}
+
+
+// ----------------------------------------------------------------------------
+//  Transition
+// ----------------------------------------------------------------------------
+
+@mixin transition($values) {
+  @include vendor-moz-wk(transition, $values);
+}
+
+
+// ----------------------------------------------------------------
+//  Typography
+// ----------------------------------------------------------------
+
+// Include this into elements to have text selection colors be specific to region
+@mixin select-text($select-bg, $txt-color, $txt-shadow) {
+  ::-moz-selection    { background: $select-bg; color: $txt-color; text-shadow:  $txt-shadow; }
+  ::-webkit-selection { background: $select-bg; color: $txt-color; text-shadow:  $txt-shadow; }
+  ::selection         { background: $select-bg; color: $txt-color; text-shadow:  $txt-shadow; }
+}
+
+
+// Multi-column Text Blocks
+@mixin multi-col($cols, $gap, $rule-width, $rule-location, $rule-color) {
+  @include vendor-moz-wk(column-count, $cols);
+  @include vendor-moz-wk(column-gap, $gap);
+  @include vendor-moz-wk(column-rule, $rule-width $rule-location $rule-color);
+}
+
+
+// Anti-aliasing Text
+@mixin antialiased {
+  @include vendor-wk(font-smoothing, antialiased);
+}
+
+
+// Truncate Text
+@mixin truncate-text($truncation-boundary) {
+  display: inline-block;
+  max-width: $truncation-boundary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// Example  --  @include truncate-text(100%);
+

sass/_vars.scss

@@ -0,0 +1,71 @@
+// ----------------------------------------------------------------------------
+//  Colors: Generic
+// ----------------------------------------------------------------------------
+
+// Darker Colors
+// ----------------------------------------------------------------------------
+$c-black:             #000;
+$c-off-black:         #0a0a0a;
+$c-darker:            #1a1a1a;
+$c-dark:              #444;
+
+// Medium Colors
+// ----------------------------------------------------------------------------
+$c-grey:              #ccc;
+$c-dark-grey:         #999;
+$c-light-grey:        #ddd;
+
+// Lighter Colors
+// ----------------------------------------------------------------------------
+$c-white:             #fff;
+$c-off-white:         #f0f0f0;
+$c-light:             #e0e0e0;
+$c-lighter:           #eee;
+
+// Generic Colors
+// ----------------------------------------------------------------------------
+$c-red:               #a32828;
+$c-green:             #27ae60;
+$c-blue:              #04A4CC;
+
+$c-magenta:           #dd0986;
+$c-yellow:            #faea65;
+$c-orange:            #fd6f29;
+$c-purple:            #9729fd;
+
+
+// ----------------------------------------------------------------------------
+//  Measurement Units
+// ----------------------------------------------------------------------------
+
+// Base measurement units like margin & padding off from a standard base,
+// so if it ever changes, it will only need to be updated in a single location
+
+$unit-px:             4px;          // base of 4px, 1/4 of 16px
+$unit-px2:            $unit-px * 2;
+$unit-px3:            $unit-px * 3;
+$unit-px4:            $unit-px * 4;
+$unit-px5:            $unit-px * 5;
+
+$unit-em:             1em;      // translates to 16px based on 100% font-size
+
+$unit-per:            10%;      // base of 10 for percentages
+
+$circle:              2000px;   // large number to make sure that just about
+                                // anything will be able to be 'circled'
+
+$max-width:          1280px;
+
+
+// ----------------------------------------------------------------------------
+//  Media Query Break Points
+// ----------------------------------------------------------------------------
+
+$break-mini:           320px;
+$break-tiny:           480px;
+$break-small:          600px;
+$break-portrait:       768px;
+$break-normal:        1024px;
+$break-large:         1140px;
+$break-xlarge:        1200px;
+$break-xxlarge:       1600px;