RubyGems - survivalkit - Versions diffs - 0.3.4 → 1.0.beta.1 - Mend

survivalkit 0.3.4 → 1.0.beta.1

Files changed (1362) hide show

data/CHANGELOG.markdown CHANGED Viewed

@@ -1,4 +1,14 @@
 # Changelog
+## 1.0.alpha.1 - August 13, 2012
+* convert to SCSS syntax
+* remove nearly all default styling
+* add many more configurable options to base.scss
+* update for Sass 3.2 compatibility
+* better style tile defaults
+* more SMACSS-friendly structure
+* cleaner forms
+* almost all @extends are silent
 ## 0.1 - November 19, 2011
-* convert previous version of the Kit to a Ruby Gem.
+* convert previous version of the Kit to a Ruby Gem.

data/lib/survivalkit.rb CHANGED Viewed

@@ -1,11 +1,12 @@
 require 'compass'
 require 'susy'
 require 'breakpoint'
+require 'modular-scale'
 Compass::Frameworks.register("survivalkit", :path => "#{File.dirname(__FILE__)}/..")
 module SurvivalKit
-  VERSION = "0.3.4"
-  DATE = "2012-05-25"
+  VERSION = "1.0.beta.1"
+  DATE = "2012-08-13"
 end

data/stylesheets/survivalkit/extend/_all.scss ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @import "helpers";
2	+ @import "sticky-footer";

data/stylesheets/survivalkit/extend/_helpers.scss ADDED Viewed

@@ -0,0 +1,37 @@
+@import "../mixins/helpers";
+%clearfix {
+  @include kit-clearfix;
+}
+%hidden {
+  @include hidden;
+}
+%visuallyhidden {
+  @include visuallyhidden;
+}
+%visuallyhidden.focusable {
+  @include visuallyhidden(true);
+}
+%invisible {
+  @include invisible;
+}
+%constrain-to-parent {
+  max-width: 100%;
+}
+%italic {
+  font-style: italic;
+}
+%bold {
+  font-weight: bold;
+}
+%wireframe {
+  outline: 1px dashed $red;
+}

data/stylesheets/survivalkit/extend/{_sticky-footer.sass → _sticky-footer.scss} RENAMED Viewed

@@ -2,17 +2,24 @@
 // FLEXIBLE STICKY FOOTERS
 // http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
 ////////////////////////////
-%html-frame
+%html-frame {
   // apply to <html> and <body>
-  height: 100%
-  margin: 0pt
-%frame
+  height: 100%;
+  margin: 0pt;
+}
+%frame {
   // aplly to <body>
-  display: table
-  height: 100%
-  width: 100%
-%row
-  display: table-row
-%row-expand
-  @extend .row
-  height: 100%
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+%row {
+  display: table-row;
+}
+%row-expand {
+  @extend %row;
+  height: 100%;
+}

data/stylesheets/survivalkit/functions/_all.scss ADDED Viewed

@@ -0,0 +1,3 @@
+@import "calculations";
+@import "modular-scale";
+@import "color-schemer";

data/stylesheets/survivalkit/functions/_calculations.scss ADDED Viewed

@@ -0,0 +1,24 @@
+// Generic function to calculate a percentage based on pixel values
+// (independent of any specific grid system)
+@function calc-percent($target, $container) {
+  @return $target / $container * 100%;
+}
+@function calc-em($target, $container) {
+  @return $target / $container * 1em;
+}
+// shortcut name
+@function cp($target, $container) {
+  @return calc-percent($target, $container);
+}
+@function ce($target, $container) {
+  @return calc-em($target, $container);
+}
+// return the width of an arbitrary number of columns in a css grid system
+@function calc-col-width($number-of-cols) {
+  $calc-width: $kit-col-width * $number-of-cols + $kit-gutter-width * ($number-of-cols - 1);
+  @return $calc-width;
+}

data/stylesheets/survivalkit/functions/_color-schemer.sass CHANGED Viewed

@@ -1,5 +1,3 @@
-// Based on: https://github.com/scottkellum/color-schemer
 // Define color schemes quickly
 // Color schemes to choose from
@@ -22,8 +20,8 @@ $equalize: false !default
 @function equalize($color)
   @return hsl(hue($color), 100%, 50%)
-// Complement based on Claude Boutet's color wheel
-@function boutet-complement($color)
+// Complement based on RYB theory
+@function ryb($color)
   $hue: round(hue($color)/ 10) // find and round hue
   // Manually adjusted values until these can be mathmatically explained.
   @if $hue == 0
@@ -107,7 +105,7 @@ $equalize: false !default
 @function shade($color, $percent)
   @return mix(black, $color, $percent)
-@function color-schemer($color-location, $base-color, $color-scheme, $hue-offset)
+@function color-schemer($color-location: $color-location, $base-color: $base-color, $color-scheme: $color-scheme, $hue-offset: $hue-offset)
   // Primary, just return the base-color.
   @if $equalize
     $base-color: equalize($base-color)
@@ -118,12 +116,12 @@ $equalize: false !default
     @if $color-scheme == mono
       @return lighten($base-color, $brightness-offset)
     @if $color-scheme == complement
-      @if $color-theory == boutet
-        @return boutet-complement($base-color)
+      @if $color-theory == ryb
+        @return ryv($base-color)
       @return complement($base-color)
     @if $color-scheme == triad
-      @if $color-theory == boutet
-        @return adjust-hue(boutet-complement($base-color), $hue-offset)
+      @if $color-theory == ryb
+        @return adjust-hue(ryb($base-color), $hue-offset)
       @return adjust-hue(complement($base-color), $hue-offset)
     @if $color-scheme == tetrad
       @return adjust-hue($base-color, $hue-offset)
@@ -139,12 +137,12 @@ $equalize: false !default
     @if $color-scheme == complement
       @return lighten($base-color, $brightness-offset)
     @if $color-scheme == triad
-      @if $color-theory == boutet
-        @return adjust-hue(boutet-complement($base-color), -$hue-offset)
+      @if $color-theory == ryb
+        @return adjust-hue(ryb($base-color), -$hue-offset)
       @return adjust-hue(complement($base-color), -$hue-offset)
     @if $color-scheme == tetrad
-      @if $color-theory == boutet
-        @return boutet-complement($base-color)
+      @if $color-theory == ryb
+        @return ryb($base-color)
       @return complement($base-color)
     @if $color-scheme == analogic
       @return adjust-hue($base-color, -$hue-offset)
@@ -160,23 +158,23 @@ $equalize: false !default
     @if $color-scheme == triad
       @return darken($base-color, $brightness-offset)
     @if $color-scheme == tetrad
-      @if $color-theory == boutet
-        @return adjust-hue(boutet-complement($base-color), $hue-offset)
+      @if $color-theory == ryb
+        @return adjust-hue(ryb($base-color), $hue-offset)
       @return adjust-hue(complement($base-color), $hue-offset)
     @if $color-scheme == analogic
       @return darken($base-color, $brightness-offset)
     @if $color-scheme == accented-analogic
-      @if $color-theory == boutet
-        @return boutet-complement($base-color)
+      @if $color-theory == ryb
+        @return ryb($base-color)
       @return complement($base-color)
     @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
   @warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
 // Write your basic color scheme
-// $primary: color-schemer(primary) !default
-// $secondary: color-schemer(secondary) !default
-// $tertiary: color-schemer(tertiary) !default
-// $quadrary: color-schemer(quadrary) !default
+$primary: color-schemer(primary) !default
+$secondary: color-schemer(secondary) !default
+$tertiary: color-schemer(tertiary) !default
+$quadrary: color-schemer(quadrary) !default
 // Tell other files that this is loaded.
 $color-schemer-loaded: true

data/stylesheets/survivalkit/mixins/_all.scss ADDED Viewed

@@ -0,0 +1,5 @@
+@import "helpers";
+@import "typography";
+@import "layout";
+@import "ui";
+@import "pseudo";

data/stylesheets/survivalkit/mixins/_helpers.scss ADDED Viewed

@@ -0,0 +1,76 @@
+@mixin hidden {
+  display: none !important;
+  visibility: hidden;
+}
+@mixin visuallyhidden($focusable: false) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  @if $focusable {
+    &:active, &:focus {
+      clip: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      position: static;
+      width: auto;
+    }
+  }
+}
+@mixin invisible {
+  visibility: hidden;
+}
+@mixin scale-image-ie($image) {
+  background: none;
+  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{image_url($image, true, false)}",  sizingMethod="scale");
+}
+@mixin kit-clearfix {
+  &:after {
+    content: $space;
+    display: table;
+    clear: both;
+  }
+  zoom: 1;
+}
+@mixin accessible-color($background: $white) {
+  @if lightness($background) >= 65% {
+    color: $text-color;
+  }
+  @else {
+    color: white;
+  }
+}
+@mixin clean-list {
+  @include no-bullets;
+  margin-left: 0;
+  padding-left: 0;
+}
+@mixin susy-grid-backgrounds {
+  @if $show-grid and $show-baseline {
+    @include susy-grid-background-baseline;
+  }
+  @else if $show-grid {
+    @include susy-grid-background;
+  }
+  @else if $show-baseline {
+    @include baseline-grid-background;
+  }
+}
+@mixin susy-grid-background-baseline {
+  @include grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $column-width * 0, $grid-background-column-color, $grid-background-gutter-color, $grid-background-baseline-color, $force_fluid: true);
+  @include background-origin(content-box);
+  @include background-clip(content-box);
+}

data/stylesheets/survivalkit/mixins/_layout.scss ADDED Viewed

@@ -0,0 +1,24 @@
+@mixin vertical-separation($margin: $kit-baseline, $divide: false, $bordercolor: $border-color, $borderstyle: solid) {
+  @include pie-clearfix;
+  @if $divide {
+    border-bottom: $divide $borderstyle $bordercolor;
+    margin-bottom: $margin * 0.5;
+    padding-bottom: $margin * 0.5 - $divide;
+  }
+  @else {
+    margin-bottom: $margin * 0.5;
+    padding-bottom: $margin * 0.5;
+    border-bottom: none;
+  }
+  &:last-child {
+    padding-bottom: 0;
+    border-bottom-width: 0;
+    margin-bottom: 0;
+  }
+}
+@mixin un-vertical-separation {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}

data/stylesheets/survivalkit/mixins/_pseudo.scss ADDED Viewed

@@ -0,0 +1,18 @@
+////////////////////////////
+// ABSOLUTE PSEUDO ELEMENTS
+////////////////////////////
+// $side: can be 'before', 'after', or 'both'
+@mixin pseudo($side: "before") {
+  position: relative;
+  @if $side == "both" {
+    &:before, &:after {
+      position: absolute;
+    }
+  }
+  @else {
+    &:#{$side} {
+      position: absolute;
+    }
+  }
+}

data/stylesheets/survivalkit/mixins/_typography.scss ADDED Viewed

@@ -0,0 +1,97 @@
+// Links --------------------------------------------------------------
+// replace underlines on links with bottom borders
+@mixin border-links($normal, $hover: false, $active: false, $visited: false, $focus: false) {
+  & {
+    text-decoration: none;
+    border-bottom: 1px solid $normal;
+    @if $visited {
+      &:visited {
+        border-bottom-color: $visited;
+      }
+    }
+    @if $focus {
+      &:focus {
+        border-bottom-color: $focus;
+      }
+    }
+    @if $hover {
+      &:hover {
+        border-bottom-color: $hover;
+      }
+    }
+    @if $active {
+      &:active {
+        border-bottom-color: $active;
+      }
+    }
+  }
+}
+@mixin undo-border-links {
+  & {
+    text-decoration: none;
+    // border-bottom: inherit
+    border-bottom-style: inherit;
+    &:visited {
+      border-bottom-color: inherit;
+    }
+    &:focus {
+      border-bottom-color: inherit;
+    }
+    &:hover {
+      border-bottom-color: inherit;
+    }
+    &:active {
+      border-bottom-color: inherit;
+    }
+  }
+}
+// fade between default and hover colors
+@mixin link-transitions($time: 0.5s, $easing: "ease-out", $property: "all") {
+  @include transition($property, $time, $easing);
+}
+// remove bottom borders from better links
+// call directly from an <a> element
+// (needed when linking an <img/> for example)
+@mixin remove-link-underlines {
+  & {
+    border-bottom: none;
+    &:hover {
+      border-bottom: none;
+    }
+  }
+}
+// Only use the fancy ampersand in <h#> tags */
+@mixin header-ampersands($size: 1em) {
+  h1 .amp, h2 .amp, h3 .amp, h4 .amp, h5 .amp, h6 .amp {
+    font-size: $size;
+    font-family: $font-amp;
+    font-style: italic;
+  }
+}
+// text-overflow
+@mixin text-overflow($method: ellipsis) {
+  white-space: nowrap;
+  overflow: hidden;
+  -o-text-overflow: $method;
+  text-overflow: $method;
+  .ie & {
+    width: 100%;
+  }
+}
+// replace OL > LI numbers so they can be styled
+@mixin replace-list-numbers {
+  counter-reset: li;
+  list-style-type: none;
+  li {
+    &:before {
+      content: counter(li) ". ";
+      counter-increment: li;
+    }
+  }
+}

data/stylesheets/survivalkit/mixins/_ui.scss ADDED Viewed

@@ -0,0 +1,100 @@
+// create simple tabs from <a> unside <ul>
+// $dir is 'bottom' for standard tabs
+// 'top' for hanging tabs
+// assumes placement on UL
+@mixin tabs($dir: bottom, $border-color: $base-color, $border-color-active: $white, $background-color: $gray, $background-color-active: $white) {
+  @include horizontal-list(3px);
+  position: relative;
+  li {
+    border-#{$dir}: 1px solid $border-color;
+    margin-top: 1px;
+    &.active {
+      a {
+        border-#{$dir}: 1px solid $border-color-active;
+        background-color: $background-color-active;
+        // padding-#{$dir}: 0
+      }
+    }
+    a {
+      border: {
+        width: 1px;
+        style: solid;
+        color: $border-color;
+      };
+      background-color: $background-color;
+      // float: left
+      // margin-top: -1px
+      // position: relative
+      // #{$dir}: -1px
+      padding: 0 0.25em;
+      @if $dir == bottom {
+        @include border-top-radius;
+        @include remove-link-underlines;
+      }
+      @else {
+        @include border-bottom-radius;
+        border-top-width: 0;
+      }
+      &:hover {
+        background-color: $background-color-active;
+        border-#{$dir}: 1px solid $border-color-active;
+      }
+    }
+  }
+}
+// remove drupal tab styling
+// apply to <ul>
+@mixin drupal-tab-reset {
+  border-bottom: 0 solid transparent;
+  li {
+    a {
+      background-color: transparent;
+      border-style: none;
+      border-color: transparent;
+      border-width: 0;
+      float: none;
+      position: static;
+      bottom: auto;
+      padding: 0;
+      margin-right: 0;
+      &:hover {
+        background-color: transparent;
+        border-color: transparent;
+        border-bottom-color: transparent;
+      }
+    }
+    &.active {
+      a {
+        background-color: transparent;
+        border-color: transparent;
+        border-bottom-color: transparent;
+      }
+    }
+  }
+}
+@mixin decending-z-order-tab($count: 20) {
+  // assumes placement on UL
+  position: relative;
+  li {
+    position: relative;
+    $t: 0;
+    $i: $count;
+    @while $i > 0 {
+      &:nth-child(#{$t}) {
+        z-index: #{$i};
+      }
+      $t: $t + 1;
+      $i: $i - 1;
+    }
+  }
+}
+// universal transitions
+@mixin transition-all($time: 0.2s, $ease: ease) {
+  * {
+    @include transition(all $time $ease);
+  }
+}