survivalkit 0.1

data/templates/project/partials/05-ui-patterns/drupal/_ui-patterns.sass

@@ -0,0 +1,83 @@
+// see: elements-ui-patterns-drupal.html for markup
+
+// SITE NAME
+#site-name
+  a
+    +remove-link-underlines
+
+// MENUS
+#main-menu
+  +horizontal-list(0.5em)
+
+// SEARCH FIELD
+
+// MESSAGES
+// uncomment to override or replace styles from _ui-patterns-common
+// .messages
+//   border: 1px solid $base-color
+//   padding: $kit-baseline-half 0.5em
+//   p:last-child
+//     margin-bottom: 0
+// .status, .warning, .error
+//   @extend .messages
+// .status
+//   border-color: $green
+//   color: $green
+// .warning
+//   border-color: $orange
+//   color: $orange
+// .error
+//   border-color: $red
+//   color: $red
+
+// BLOCK
+
+// TABS
+ul.tabs
+  +tabs
+
+// NEW USER FORM
+.form-required
+  color: $red
+
+// LOG IN FORM
+
+// NEW PASSWORD FORM
+
+// PAGERS
+// uncomment to override or replace styles from _ui-patterns-common
+// ul.pager
+//   +horizontal-list(0.5em)
+//   a
+//     +remove-link-underlines
+
+// RSS LINK
+a.feed-icon
+  +remove-link-underlines
+
+// INLINE LINKS
+ul.inline
+  +inline-list
+
+// TAXONOMY LIST
+.field-type-taxonomy-term-reference
+  .field-item
+    display: inline
+
+// FIELDS
+.field-label-above
+  .field-label
+    display: block
+
+// NODE PAGE
+
+// COMMENTS
+#comments
+  .comment
+    +vertical-separation
+    &:last-child
+      +un-vertical-separation
+  .indented
+    padding-left: 1em
+
+// COMMENT FORM

data/templates/project/partials/06-sprites/_sprites.sass

@@ -0,0 +1,20 @@
+/* Sprites -------------------------------------------------------------- */
+// Compass can compile a folder of .png images into a single sprite image
+// place your images in a folder within you images folder, like "/icons"
+// This will compile to a set of classes for each sprite image you can @extend
+
+//
+  .icons-sprite {
+    background: url('images/icons-123456789.png') no-repeat;
+  }
+  .icons-new-selected {
+    background-position: 0 0;
+  }
+  .icons-new {
+    background-position: 0 -30px;
+  }
+
+// for a full tutorial, see: http://compass-style.org/help/tutorials/spriting/
+
+// @import "icons/*.png"
+// @include all-icons-sprites

data/templates/project/partials/07-layout-design/_design.sass

@@ -0,0 +1,6 @@
+// Create the design for your site below
+/* SITE-WIDE DESIGN --------------------------------------------------------------
+
+
+
+

data/templates/project/partials/07-layout-design/_layout.sass

@@ -0,0 +1,8 @@
+// Set up the layout for your site using your chosen grid framework
+/* LAYOUT --------------------------------------------------------------
+
+
+#page
+  @extend .container
+  // uncomment this line for fluid layout
+  // width: 95%

data/templates/project/partials/08-styletile/_tile-design.sass

@@ -0,0 +1,139 @@
+// Create the design for your site below
+/* SITE-WIDE DESIGN --------------------------------------------------------------
+
+
+
+header
+  +pie-clearfix
+  +trailer
+  aside
+    text-align: right
+    color: $gray
+    @extend .sans
+
+
+.group
+  +pie-clearfix
+  +trailer(2)
+
+h5.label
+  color: $gray
+  +adjust-font-size-to(ms(0))
+  text-transform: uppercase
+
+.colors
+  ul
+    li
+      +box-shadow(rgba($black, 0.1) 0px 2px 4px)
+
+
+.images
+  ul
+    counter-reset: section
+    li
+      position: relative
+      overflow: visible
+      +scatter($child: img)
+      &:after
+        position: relative
+        top: 102%
+        display: block
+        color: $gray
+        counter-increment: section
+        content: "Image " counter(section)
+      img
+        +box-shadow(rgba($black, 0.1) 0px 2px 4px)
+        +box-sizing(border-box)
+        border: 4px solid $white
+        display: block
+/*
+  CLIENT NAME ------------------------------------------------------------------------------------------------------------------------------
+
+header
+  h1.client-name
+    // +replace-text-with-dimensions('wwlogo-01.png')
+
+/*
+  STYLE TILE #1 ------------------------------------------------------------------------------------------------------------------------------
+
+/* type examples
+.styletile-1
+  // color: $color-tile1-6
+  .text-examples
+    .headers
+      h1
+        // font-family:
+        // font-weight:
+        // color:
+      h2
+        //
+      h3
+        //
+      a
+    .serif
+      font-family: $font-serifs
+      p
+        //
+    .quotes
+      //
+      .quote
+        //
+        .quote-mark
+          //
+      .source
+        //
+    .sans
+      font-family: $font-sans
+      p
+        //
+
+/* graphic examples
+
+/* colors
+.styletile-1
+  .colors
+    ul
+      li
+        &.color-1
+          background-color: $color-tile1-1
+          &:after
+            content: "#{$color-tile1-1}"
+        &.color-2
+          background-color: $color-tile1-2
+          &:after
+            content: "#{$color-tile1-2}"
+        &.color-3
+          background-color: $color-tile1-3
+          &:after
+            content: "#{$color-tile1-3}"
+        &.color-4
+          background-color: $color-tile1-4
+          &:after
+            content: "#{$color-tile1-4}"
+        &.color-5
+          background-color: $color-tile1-5
+          &:after
+            content: "#{$color-tile1-5}"
+        &.color-6
+          background-color: $color-tile1-6
+          &:after
+            content: "#{$color-tile1-6}"
+.styletile-1
+  .images
+    ul
+      li
+        &.image-1
+          //
+        &.image-2
+          //
+        &.image-3
+          //
+        &.image-4
+          //
+        &.image-5
+          //
+        &.image-6
+          //
+
+
+

data/templates/project/partials/08-styletile/_tile-layout.sass

@@ -0,0 +1,81 @@
+// Set up the layout for your site using your chosen grid framework
+
+// Style Tile Grid
+// Grid Variables ------------------------------------------------------
+$total-cols: 12
+$col-width: 60px
+$gutter-width: 14px
+$side-gutter-width: 0px
+
+@import susy
+// uncomment to output the full container width to the terminal
+// @debug columns-width()
+/* DEFINE THE GRID CONTAINER -------------------------------------------
+.container
+  +container
+
+
+
+/* LAYOUT --------------------------------------------------------------
+
+
+#page
+  @extend .container
+  // uncomment this line for fluid layout
+  width: 95%
+  header
+    +full
+    // +trailer
+    .client-id
+      +columns(8)
+    aside
+      +columns(4)
+      +omega
+  #main
+    +full
+    .text-examples
+      +columns(6)
+    .graphic-examples
+      +columns(6)
+      +omega
+  footer
+    +full
+
+
+/* graphic examples
+
+/* colors
+.colors
+  ul
+    +inline-list
+    li
+      +columns(1, 6)
+      height: $kit-baseline * 5
+      margin-bottom: $kit-baseline
+      +box-sizing(border-box)
+      border: 4px solid $white
+      position: relative
+      &:nth-of-type(6n+6)
+        +omega
+      &:after
+        position: relative
+        top: 102%
+        color: $gray
+
+.images
+  ul
+    +inline-list
+    li
+      +columns(3, 6)
+      overflow: hidden
+      margin-bottom: $kit-baseline
+      &:nth-of-type(2n+2)
+        +omega
+      @media screen and (min-width: 1100px)
+        +reset-column
+        &:nth-of-type(2n+2)
+          +columns(2, 6)
+        +columns(2, 6)
+        &:nth-of-type(3n+3)
+          +omega
+

data/templates/project/partials/09-responsive/_responsive-blueprint.sass

@@ -0,0 +1,139 @@
+/* RESPONSIVE GRIDS --------------------------------------------------------------
+// based on the Blueprint grid system
+
+// mobile vertical (iphone)
+  small screen devices, like phones, held in portrait mode
+// redefine grid variables for this context
+$blueprint-grid-columns: 1
+$blueprint-grid-width: 320px
+$blueprint-grid-margin: $kit-gutter-half
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (max-width: 320px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+
+
+// mobile horizontal (iphone)
+  small screen devices, like phones, held in landscape mode
+// redefine grid variables for this context
+$blueprint-grid-columns: 3
+$blueprint-grid-width: 97px
+$blueprint-grid-margin: 15px
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (min-width: 321px) and (max-width: 480px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+
+
+// smaller tablets
+  like Amazon Kindle (600x800) and Barnes & Noble Nook (768x1024)
+  held in portrait mode
+// redefine grid variables for this context
+$blueprint-grid-columns: 4
+$blueprint-grid-width: 100px
+$blueprint-grid-margin: $kit-gutter
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (min-width: 481px) and (max-width: 600px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+
+
+// tablets
+  Ten-inch tables like the iPad (1024x768) held in portrait mode
+// redefine grid variables for this context
+$blueprint-grid-columns: 5
+$blueprint-grid-width: 100px
+$blueprint-grid-margin: $kit-gutter
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (min-width: 601px) and (max-width: 768px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+
+
+// tablets, laptops, desktops
+  Tablets like the iPad (1024x768) held in landscape mode,
+  as well as certain laptop, netbook, and desktop displays
+  (commented out, since it's the default context)
+// redefine grid variables for this context
+$blueprint-grid-columns: $kit-total-cols
+$blueprint-grid-width: 105px
+$blueprint-grid-margin: $kit-gutter-width
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (min-width: 769px) and (max-width: 960px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+
+// tablets, laptops, desktops (larger)
+  Tablets like the iPad (1024x768) held in landscape mode,
+  as well as certain laptop, netbook, and desktop displays
+  (commented out, since it's the default context)
+// redefine grid variables for this context
+$blueprint-grid-columns: $kit-total-cols
+$blueprint-grid-width: $kit-col-width
+$blueprint-grid-margin: $kit-gutter-width
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (min-width: 960px) and (max-width: 1200px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+
+
+// wide screen
+  primarily laptop and desktop browsers
+// redefine grid variables for this context
+$blueprint-grid-columns: 8
+$blueprint-grid-width: 128px
+$blueprint-grid-margin: $kit-gutter
+@import blueprint/grid
+// @debug $blueprint-container-size
+$grid-background-total-columns: $blueprint-grid-columns
+$grid-background-column-width: $blueprint-grid-width
+$grid-background-gutter-width: $blueprint-grid-margin
+@import compass/layout/grid-background
+@media screen and (min-width: 1200px)
+  // YOUR STYLES BELOW
+  #page
+    +container
+    +column-grid-background
+