survivalkit 0.2.1 → 0.3

data/stylesheets/survivalkit/style-tile/_tile-layout.sass

@@ -0,0 +1,143 @@
+// Set up the layout for your site using your chosen grid framework
+
+// Style Tile Grid
+// define grid variables
+$total-columns: 5
+$column-width: 4em
+$gutter-width: 1em
+$grid-padding: 1em
+$container-style: magic
+
+// define breakpoints in EMs
+$bp-handheld: calc-em(321px, $base-font-size)
+$bp-handheld-wide: calc-em(481px, $base-font-size)
+$bp-tablet: calc-em(721px, $base-font-size)
+$bp-desktop: calc-em(1025px, $base-font-size)
+
+// define media layout variables
+$media-layout-handheld: 2 $bp-handheld
+$media-layout-handheld-wide: $bp-handheld 3 $bp-handheld-wide
+$media-layout-medium: $bp-handheld-wide 6 $bp-tablet
+$media-layout-tablet: $bp-tablet 8 $bp-desktop
+$media-layout-desktop: $bp-desktop 12
+
+@import susy
+
+
+/* LAYOUT --------------------------------------------------------------
+.styletile
+  #page
+    .ie6 &, .ie7 &, .ie8 &
+      +container
+      +susy-grid-backgrounds
+    +at-breakpoint($media-layout-handheld)
+      $container-style: fluid
+      $grid-padding: 0
+      +container
+      +susy-grid-backgrounds
+    +at-breakpoint($media-layout-handheld-wide)
+      $container-style: fluid
+      $grid-padding: 0
+      +container
+      +susy-grid-backgrounds
+    +at-breakpoint($media-layout-medium)
+      $grid-padding: 1em
+      $container-style: fluid
+      +container
+      +susy-grid-backgrounds
+      header
+        .client-id
+          +span-columns(3, 6)
+        aside
+          +span-columns(3 omega, 6)
+      #main
+        .text-examples
+          +span-columns(3, 6)
+        .graphic-examples
+          +span-columns(3 omega, 6)
+    +at-breakpoint($media-layout-tablet)
+      $grid-padding: 1em
+      $container-style: fluid
+      +container
+      +susy-grid-backgrounds
+      header
+        .client-id
+          +span-columns(5, 8)
+        aside
+          +span-columns(3 omega, 8)
+      #main
+        .text-examples
+          +span-columns(4, 8)
+        .graphic-examples
+          +span-columns(4 omega, 8)
+    +at-breakpoint($media-layout-desktop)
+      $grid-padding: 1em
+      $container-style: magic
+      +container
+      +susy-grid-backgrounds
+      header
+        .client-id
+          +span-columns(8, 12)
+        aside
+          +span-columns(4 omega, 12)
+      #main
+        .text-examples
+          +span-columns(6, 12)
+        .graphic-examples
+          +span-columns(6 omega, 12)
+
+
+/* graphic examples
+
+/* colors
+.styletile
+  .colors
+    ul
+      +inline-list
+      li
+        height: $kit-baseline * 5
+        margin-bottom: $kit-baseline
+        border: 4px solid $white
+        position: relative
+        &:after
+          position: relative
+          top: 102%
+          color: $gray
+        +at-breakpoint($media-layout-handheld)
+          +span-columns(1, 2)
+          &:nth-of-type(2n+2)
+            +omega
+        +at-breakpoint($media-layout-handheld-wide)
+          +span-columns(1, 3)
+          &:nth-of-type(3n+3)
+            +omega
+        +at-breakpoint($media-layout-medium)
+          +span-columns(1, 3)
+          &:nth-of-type(3n+3)
+            +omega
+        +at-breakpoint($media-layout-tablet)
+          +span-columns(1, 4)
+          &:nth-of-type(4n+4)
+            +omega
+        +at-breakpoint($media-layout-desktop)
+          +span-columns(1, 6)
+          &:nth-of-type(6n+6)
+            +omega
+
+.styletile
+  .images
+    ul
+      +inline-list
+      li
+        overflow: hidden
+        margin-bottom: $kit-baseline
+        +at-breakpoint($media-layout-tablet)
+          +span-columns(2, 4)
+          &:nth-of-type(2n+2)
+            +omega
+        +at-breakpoint($media-layout-desktop)
+          +span-columns(3, 6)
+          &:nth-of-type(2n+2)
+            +omega
+        img
+          @extend %constrain-to-parent

data/stylesheets/survivalkit/survival_kit/_survival-kit.sass

@@ -10,40 +10,44 @@ $sk-gray: mix($gray, $c-primary, 90%)
 $sk-darkgray: mix($darkgray, $c-primary, 90%)
 
 body.survival-kit
-  header
-    background: $sk-lightgray
-    font-family: $kit-font-family
-    padding: 0 0.5em
-    a
-      +link-colors($white, $sk-darkgray, $sk-darkgray, $white)
-      +better-links($white, $sk-darkgray, $sk-darkgray, $white)
-    hgroup
-      @extend .clearfix
-    h1
-      +adjust-font-size-to(ms(1))
-      float: left
-      padding-right: $kit-gutter
-      margin-right: $kit-gutter
-      border-right: 1px solid white
+  #page
+    > header
+      background: $sk-lightgray
       font-family: $kit-font-family
+      padding: 0 0.5em
+      margin-bottom: 0
       a
-        +remove-link-underlines
-        +replace-text-with-dimensions('survival-kit-logo.png')
-        display: block
-        padding: 0.3em
-    h2
-      +adjust-font-size-to(ms(2))
-      font-family: $kit-font-family
-    .intro
-      margin-left: calc-em(265px, $base-font-size)
+        +link-colors($white, $sk-darkgray, $sk-darkgray, $white)
+        +underline-links($white, $sk-darkgray, $sk-darkgray, $white)
+      hgroup
+        @extend .clearfix
+      h1
+        +adjust-font-size-to(ms(1))
+        float: left
+        padding-right: $kit-gutter
+        margin-right: $kit-gutter
+        border-right: 1px solid white
+        font-family: $kit-font-family
+        a
+          +remove-link-underlines
+          +replace-text-with-dimensions('survival-kit-logo.png')
+          display: block
+          padding: 0.3em
+      h2
+        +adjust-font-size-to(ms(2))
+        margin-top: 0
+        font-family: $kit-font-family
+      .intro
+        margin-left: calc-em(265px, $base-font-size)
   h1.section-title
     +adjust-font-size-to(ms(3))
     background-color: $sk-lightgray
     text-transform: uppercase
     padding-left: $kit-gutter-half
+    margin-top: 0
     a
       +link-colors($black, $alt-color, $alt-color, $black, false)
-      +better-links($black, $alt-color, $alt-color, $black, false)
+      +underline-links($black, $alt-color, $alt-color, $black, false)
   .back-to-top
     +remove-link-underlines
     float: right
@@ -58,7 +62,7 @@ body.survival-kit
       font-size: $base-font-size
     a
       +link-colors($white, $alt-color, $alt-color, $white)
-      +better-links($white, $alt-color, $alt-color, $white)
+      +underline-links($white, $alt-color, $alt-color, $white)
     ul
       +horizontal-list(0.5em)
   .kit-nav
@@ -66,13 +70,16 @@ body.survival-kit
   .section-nav
     background: $sk-gray
     margin-top: calc-em(-24px, $base-font-size)
+    margin-bottom: 0
     h3
       color: shade($sk-gray, 40%)
       +adjust-font-size-to($base-font-size - 2)
     h4
       float: left
       margin-right: 0.5em
-  article.element
+      margin-top: 0
+      margin-bottom: 0
+  div.element
     +vertical-separation($kit-baseline * 2, 1px, transparentize($border-color, 0.9))
     &.closed
       +un-vertical-separation
@@ -84,7 +91,7 @@ body.survival-kit
       padding-left: $kit-gutter-half
       a
         +link-colors($white, $alt-color, $alt-color, $white, false)
-        +better-links($white, $alt-color, $alt-color, $white, false)
+        +underline-links($white, $alt-color, $alt-color, $white, false)
     .example
       +vertical-separation($kit-baseline, 1px, transparentize($border-color, 0.9), dashed)
       +pie-clearfix

data/stylesheets/survivalkit/variables/_color_names.sass

@@ -3,152 +3,152 @@ $transparent: rgba(black, 0)
 
 // STANDARD NAMED CSS COLORS
 // COLOR NAME DEFINITIONS
-$aliceblue: #f0f8ff
-$antiquewhite: #faebd7
-$aqua: #00ffff
-$aquamarine: #7fffd4
-$azure: #f0ffff
-$badass: #BADA55
-$beige: #f5f5dc
-$bisque: #ffe4c4
-$black: #000000
-$blanchedalmond: #ffebcd
-$blue: #0000ff
-$blueviolet: #8a2be2
-$brown: #a52a2a
-$burlywood: #deb887
-$cadetblue: #5f9ea0
-$chartreuse: #7fff00
-$chocolate: #d2691e
-$coral: #ff7f50
-$cornflowerblue: #6495ed
-$cornsilk: #fff8dc
-$crimson: #dc143c
-$cyan: #00ffff
-$darkblue: #00008b
-$darkcyan: #008b8b
-$darkgoldenrod: #b8860b
-$darkgray: #a9a9a9
-$darkgrey: #a9a9a9
-$darkgreen: #006400
-$darkkhaki: #bdb76b
-$darkmagenta: #8b008b
-$darkolivegreen: #556b2f
-$darkorange: #ff8c00
-$darkorchid: #9932cc
-$darkred: #8b0000
+$aliceblue: aliceblue
+$antiquewhite: antiquewhite
+$aqua: aqua
+$aquamarine: aquamarine
+$azure: azure
+$badass: #bada55
+$beige: beige
+$bisque: bisque
+$black: black
+$blanchedalmond: blanchedalmond
+$blue: blue
+$blueviolet: blueviolet
+$brown: brown
+$burlywood: burlywood
+$cadetblue: cadetblue
+$chartreuse: chartreuse
+$chocolate: chocolate
+$coral: coral
+$cornflowerblue: cornflowerblue
+$cornsilk: cornsilk
+$crimson: crimson
+$cyan: cyan
+$darkblue: darkblue
+$darkcyan: darkcyan
+$darkgoldenrod: darkgoldenrod
+$darkgray: darkgray
+$darkgrey: darkgrey
+$darkgreen: darkgreen
+$darkkhaki: darkkhaki
+$darkmagenta: darkmagenta
+$darkolivegreen: darkolivegreen
+$darkorange: darkorange
+$darkorchid: darkorchid
+$darkred: darkred
 $myred: #b80000
-$darksalmon: #e9967a
-$darkseagreen: #8fbc8f
-$darkslateblue: #483d8b
-$darkslategray: #2f4f4f
-$darkslategrey: #2f4f4f
-$darkturquoise: #00ced1
-$darkviolet: #9400d3
-$deeppink: #ff1493
-$deepskyblue: #00bfff
-$dimgray: #696969
-$dimgrey: #696969
-$dodgerblue: #1e90ff
-$firebrick: #b22222
-$floralwhite: #fffaf0
-$forestgreen: #228b22
-$fuchsia: #ff00ff
-$gainsboro: #dcdcdc
-$ghostwhite: #f8f8ff
-$gold: #ffd700
-$goldenrod: #daa520
-$gray: #808080
-$grey: #808080
-$green: #008000
-$greenyellow: #adff2f
-$honeydew: #f0fff0
-$hotpink: #ff69b4
-$indianred: #cd5c5c
-$indigo: #4b0082
-$ivory: #fffff0
-$khaki: #f0e68c
-$lavender: #e6e6fa
-$lavenderblush: #fff0f5
-$lawngreen: #7cfc00
-$lemonchiffon: #fffacd
-$lightblue: #add8e6
-$lightcoral: #f08080
-$lightcyan: #e0ffff
-$lightgoldenrodyellow: #fafad2
-$lightgreen: #90ee90
-$lightgray: #d3d3d3
-$lightgrey: #d3d3d3
-$lightpink: #ffb6c1
-$lightsalmon: #ffa07a
-$lightseagreen: #20b2aa
-$lightskyblue: #87cefa
-$lightslategray: #778899
-$lightslategrey: #778899
-$lightsteelblue: #b0c4de
-$lightyellow: #ffffe0
-$lime: #00ff00
-$limegreen: #32cd32
-$linen: #faf0e6
-$magenta: #ff00ff
-$maroon: #800000
-$mediumaquamarine: #66cdaa
-$mediumblue: #0000cd
-$mediumorchid: #ba55d3
-$mediumpurple: #9370db
-$mediumseagreen: #3cb371
-$mediumslateblue: #7b68ee
-$mediumspringgreen: #00fa9a
-$mediumturquoise: #48d1cc
-$mediumvioletred: #c71585
-$midnightblue: #191970
-$mintcream: #f5fffa
-$mistyrose: #ffe4e1
-$moccasin: #ffe4b5
-$navajowhite: #ffdead
-$navy: #000080
-$oldlace: #fdf5e6
-$olive: #808000
-$olivedrab: #6b8e23
-$orange: #ffa500
-$orangered: #ff4500
-$orchid: #da70d6
-$palegoldenrod: #eee8aa
-$palegreen: #98fb98
-$paleturquoise: #afeeee
-$palevioletred: #db7093
-$papayawhip: #ffefd5
-$peachpuff: #ffdab9
-$peru: #cd853f
-$pink: #ffc0cb
-$plum: #dda0dd
-$powderblue: #b0e0e6
-$purple: #800080
-$red: #ff0000
-$rosybrown: #bc8f8f
-$royalblue: #4169e1
-$saddlebrown: #8b4513
-$salmon: #fa8072
-$sandybrown: #f4a460
-$seagreen: #2e8b57
-$seashell: #fff5ee
-$sienna: #a0522d
-$silver: #c0c0c0
-$skyblue: #87ceeb
-$slateblue: #6a5acd
-$slategray: #708090
-$slategrey: #708090
-$snow: #fffafa
-$springgreen: #00ff7f
-$steelblue: #4682b4
-$tan: #d2b48c
-$teal: #008080
-$thistle: #d8bfd8
-$tomato: #ff6347
-$turquoise: #40e0d0
-$violet: #ee82ee
-$wheat: #f5deb3
-$white: #ffffff
-$whitesmoke: #f5f5f5
-$yellow: #ffff00
-$yellowgreen: #9acd32
+$darksalmon: darksalmon
+$darkseagreen: darkseagreen
+$darkslateblue: darkslateblue
+$darkslategray: darkslategray
+$darkslategrey: darkslategrey
+$darkturquoise: darkturquoise
+$darkviolet: darkviolet
+$deeppink: deeppink
+$deepskyblue: deepskyblue
+$dimgray: dimgray
+$dimgrey: dimgrey
+$dodgerblue: dodgerblue
+$firebrick: firebrick
+$floralwhite: floralwhite
+$forestgreen: forestgreen
+$fuchsia: fuchsia
+$gainsboro: gainsboro
+$ghostwhite: ghostwhite
+$gold: gold
+$goldenrod: goldenrod
+$gray: gray
+$grey: gray
+$green: green
+$greenyellow: greenyellow
+$honeydew: honeydew
+$hotpink: hotpink
+$indianred: indianred
+$indigo: indigo
+$ivory: ivory
+$khaki: khaki
+$lavender: lavender
+$lavenderblush: lavenderblush
+$lawngreen: lawngreen
+$lemonchiffon: lemonchiffon
+$lightblue: lightblue
+$lightcoral: lightcoral
+$lightcyan: lightcyan
+$lightgoldenrodyellow: lightgoldenrodyellow
+$lightgreen: lightgreen
+$lightgray: lightgray
+$lightgrey: lightgrey
+$lightpink: lightpink
+$lightsalmon: lightsalmon
+$lightseagreen: lightseagreen
+$lightskyblue: lightskyblue
+$lightslategray: lightslategray
+$lightslategrey: lightslategrey
+$lightsteelblue: lightsteelblue
+$lightyellow: lightyellow
+$lime: lime
+$limegreen: limegreen
+$linen: linen
+$magenta: magenta
+$maroon: maroon
+$mediumaquamarine: mediumaquamarine
+$mediumblue: mediumblue
+$mediumorchid: mediumorchid
+$mediumpurple: mediumpurple
+$mediumseagreen: mediumseagreen
+$mediumslateblue: mediumslateblue
+$mediumspringgreen: mediumspringgreen
+$mediumturquoise: mediumturquoise
+$mediumvioletred: mediumvioletred
+$midnightblue: midnightblue
+$mintcream: mintcream
+$mistyrose: mistyrose
+$moccasin: moccasin
+$navajowhite: navajowhite
+$navy: navy
+$oldlace: oldlace
+$olive: olive
+$olivedrab: olivedrab
+$orange: orange
+$orangered: orangered
+$orchid: orchid
+$palegoldenrod: palegoldenrod
+$palegreen: palegreen
+$paleturquoise: paleturquoise
+$palevioletred: palevioletred
+$papayawhip: papayawhip
+$peachpuff: peachpuff
+$peru: peru
+$pink: pink
+$plum: plum
+$powderblue: powderblue
+$purple: purple
+$red: red
+$rosybrown: rosybrown
+$royalblue: royalblue
+$saddlebrown: saddlebrown
+$salmon: salmon
+$sandybrown: sandybrown
+$seagreen: seagreen
+$seashell: seashell
+$sienna: sienna
+$silver: silver
+$skyblue: skyblue
+$slateblue: slateblue
+$slategray: slategray
+$slategrey: slategrey
+$snow: snow
+$springgreen: springgreen
+$steelblue: steelblue
+$tan: tan
+$teal: teal
+$thistle: thistle
+$tomato: tomato
+$turquoise: turquoise
+$violet: violet
+$wheat: wheat
+$white: white
+$whitesmoke: whitesmoke
+$yellow: yellow
+$yellowgreen: yellowgreen