survivalkit 1.0.beta.1 → 1.0.beta.2

data/templates/shared/partials/04-base/_tables.scss

@@ -0,0 +1,60 @@
+// Tables -------------------------------------------------------------- */
+// tables still need 'cellspacing="0"' in the markup */
+
+table {
+  @extend %constrain-to-parent;
+}
+
+// stripes?
+tr {
+  &:nth-of-type(odd) {
+    td {
+      // add your own styles, if you like
+    }
+  }
+  &:nth-of-type(even) {
+    td {
+      // add your own styles, if you like
+    }
+  }
+}
+
+tfoot {
+  // add your own styles, if you like
+}
+
+caption {
+  // add your own styles, if you like
+}
+
+colgroup {
+  // add your own styles, if you like
+}
+
+col {
+  // add your own styles, if you like
+}
+
+tbody {
+  // add your own styles, if you like
+}
+
+thead {
+  // add your own styles, if you like
+}
+
+tfoot {
+  // add your own styles, if you like
+}
+
+tr {
+  // add your own styles, if you like
+}
+
+td {
+  // add your own styles, if you like
+}
+
+th {
+  // add your own styles, if you like
+}

data/templates/shared/partials/05-layout/_grids-susy.scss

@@ -0,0 +1,34 @@
+// SUSY GRID FRAMEWORK
+//*
+//  Susy: Un-obtrusive grids for designers
+//  By: Eric A. Meyer and OddBird
+//  Site: susy.oddbird.net
+//*
+
+// Grid Variables --------------------------------------------------------------
+$total-columns: 12;
+$column-width: 6em;
+$gutter-width: 2em;
+$side-gutter-width: $gutter-width;
+
+// uncomment to output the full container width to the terminal
+// @debug columns-width()
+
+// BUILD THE GRID FOR YOUR SITE
+
+// BUILD THE GRID BY CALLING SUSY MIXINS ON DOM ELEMENTS
+// #container {
+//   @include container;
+//   @if $show-grid == true {
+//     @include susy-grid-background;
+//   }
+//   @elseif $show-baseline == true {
+//     @include baseline-grid-background;
+//   }
+// }
+// .main {
+//   @include span-columns(8);
+// }
+// .side {
+//   @include span-columns(4 omega);
+// }

data/templates/shared/partials/06-ui-patterns/_common.scss

@@ -0,0 +1 @@
+// see: elements-ui-patterns.html for markup

data/templates/shared/partials/06-ui-patterns/_drupal-patterns.scss

@@ -0,0 +1,108 @@
+// see: elements-ui-patterns-drupal.html for markup
+
+// SITE NAME
+#site-name {
+  a {
+    @include remove-link-underlines;
+  }
+}
+
+// MENUS
+#main-menu {
+  @include horizontal-list(0.5em);
+}
+
+// SEARCH FIELD
+
+// MESSAGES
+.messages {
+  border: 1px solid $border-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 {
+  @include tabs;
+}
+
+// NEW USER FORM
+.form-required {
+  color: $red;
+}
+
+// LOG IN FORM
+
+// NEW PASSWORD FORM
+
+// PAGERS
+ul.pager {
+  @include horizontal-list(0.5em);
+  a {
+    @include remove-link-underlines;
+  }
+}
+
+// RSS LINK
+a.feed-icon {
+  @include remove-link-underlines;
+}
+
+// INLINE LINKS
+ul.inline {
+  @include 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 {
+    @include vertical-separation;
+    &:last-child {
+      @include un-vertical-separation;
+    }
+  }
+  .indented {
+    padding-left: 1em;
+  }
+}
+
+// COMMENT FORM

data/templates/shared/partials/07-styletile/_tile-design.scss

@@ -0,0 +1,213 @@
+// Create the design for your site below
+
+.styletile {
+  header {
+    @include pie-clearfix;
+    @include trailer;
+    aside {
+      text-align: right;
+      color: $gray;
+      @extend .sans;
+    }
+  }
+
+  .group {
+    @include pie-clearfix;
+    @include trailer(2);
+  }
+
+  .label {
+    color: $gray;
+    @include adjust-font-size-to(ms(0));
+    text-transform: uppercase;
+    font-family: $font-sans;
+  }
+
+  .colors {
+    ul {
+      li {
+        @include 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 {
+          @include box-shadow(rgba($black, 0.1) 0px 2px 4px);
+          border: 4px solid $white;
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+
+// CLIENT NAME ------------------------------------------------------------------------------------------------------------------------------
+
+.styletile {
+  header {
+    h1.client-name {
+      // some styles
+    }
+  }
+}
+
+// STYLE TILE #1 ------------------------------------------------------------------------------------------------------------------------------
+
+// type examples
+.styletile-1 {
+  .text-examples {
+    .logos {
+      counter-reset: logos;
+      h1 {
+        counter-increment: logos;
+        &:before {
+          @extend .label;
+          display: block;
+          font-weight: normal;
+          line-height: 1;
+        }
+        &.opt-1 {
+          // add your own styles, if you like
+          &:before {
+            content: counter(logos) " - #{$font-sans}";
+          }
+        }
+      }
+    }
+    .headers {
+      h1 {
+        // add your own styles, if you like
+      }
+      h2 {
+        // add your own styles, if you like
+      }
+      h3 {
+        // add your own styles, if you like
+      }
+      a {
+        // add your own styles, if you like
+      }
+    }
+    .serif {
+      font-family: $font-serifs;
+      .label:after {
+        content: " - #{$font-serifs}";
+      }
+      p {
+        //
+      }
+    }
+    .quotes {
+      // add your own styles, if you like
+      .quote {
+        // add your own styles, if you like
+        .quote-mark {
+          // add your own styles, if you like
+        }
+      }
+      .source {
+        // add your own styles, if you like
+      }
+    }
+    .sans {
+      font-family: $font-sans;
+      .label:after {
+        content: " - #{$font-sans}";
+      }
+      p {
+        // add your own styles, if you like
+      }
+    }
+  }
+}
+
+// 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 {
+          // add your own styles, if you like
+        }
+        &.image-2 {
+          // add your own styles, if you like
+        }
+        &.image-3 {
+          // add your own styles, if you like
+        }
+        &.image-4 {
+          // add your own styles, if you like
+        }
+        &.image-5 {
+          // add your own styles, if you like
+        }
+        &.image-6 {
+          // add your own styles, if you like
+        }
+      }
+    }
+  }
+}

data/templates/shared/partials/08-media/_print.scss

@@ -0,0 +1,72 @@
+// PRINT STYLES
+
+// Based heavily on the work of:
+// Paul Irish & Divya Manian: http://html5boilerplate.com/
+// And many others, less directly...
+
+// Print Defaults --------------------------------------------------------------
+@media print {
+  * {
+    background: transparent !important;
+    color: $black !important;
+    text-shadow: none !important;
+    filter: none !important;
+    -ms-filter: none !important;
+  }
+  // Black prints faster: h5bp.com/s
+  body {
+    font-family: $font-serifs !important;
+    font-size: 12pt !important;
+  }
+  #{headers(all)} {
+    font-family: $font-serifs !important;
+  }
+  a {
+    text-decoration: underline;
+    border-bottom: none !important;
+    &:visited {
+      text-decoration: underline;
+    }
+    &[href]:after {
+      content: " (" attr(href) ")";
+    }
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  .ir a:after {
+    content: "";
+  }
+  a {
+    &[href^="javascript:"]:after, &[href^="#"]:after {
+      content: "";
+    }
+  }
+  // Don't show links for images, or Javascript/internal links
+  pre, blockquote {
+    border: 1px solid #999999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  // h5bp.com/t
+  tr {
+    page-break-inside: avoid;
+  }
+  img {
+    page-break-inside: avoid;
+    max-width: 100% !important;
+  }
+  @page {
+    margin: 0.5cm;
+  }
+
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2, h3 {
+    page-break-after: avoid;
+  }
+}