survivalkit 1.0.beta.10 → 1.0.beta.11

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

@@ -1,201 +0,0 @@
-// 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 & {
-      @include container;
-      @include susy-grid-backgrounds;
-    }
-    @include at-breakpoint($media-layout-handheld) {
-      $container-style: fluid;
-      $grid-padding: 0;
-      @include container;
-      @include susy-grid-backgrounds;
-    }
-
-    @include at-breakpoint($media-layout-handheld-wide) {
-      $container-style: fluid;
-      $grid-padding: 0;
-      @include container;
-      @include susy-grid-backgrounds;
-    }
-
-    @include at-breakpoint($media-layout-medium) {
-      $grid-padding: 1em;
-      $container-style: fluid;
-      @include container;
-      @include susy-grid-backgrounds;
-      header {
-        .client-id {
-          @include span-columns(3, 6);
-        }
-        aside {
-          @include span-columns(3 omega, 6);
-        }
-      }
-      #main {
-        .text-examples {
-          @include span-columns(3, 6);
-        }
-        .graphic-examples {
-          @include span-columns(3 omega, 6);
-        }
-      }
-    }
-
-    @include at-breakpoint($media-layout-tablet) {
-      $grid-padding: 1em;
-      $container-style: fluid;
-      @include container;
-      @include susy-grid-backgrounds;
-      header {
-        .client-id {
-          @include span-columns(5, 8);
-        }
-        aside {
-          @include span-columns(3 omega, 8);
-        }
-      }
-      #main {
-        .text-examples {
-          @include span-columns(4, 8);
-        }
-        .graphic-examples {
-          @include span-columns(4 omega, 8);
-        }
-      }
-    }
-
-    @include at-breakpoint($media-layout-desktop) {
-      $grid-padding: 1em;
-      $container-style: magic;
-      @include container;
-      @include susy-grid-backgrounds;
-      header {
-        .client-id {
-          @include span-columns(8, 12);
-        }
-        aside {
-          @include span-columns(4 omega, 12);
-        }
-      }
-      #main {
-        .text-examples {
-          @include span-columns(6, 12);
-        }
-        .graphic-examples {
-          @include span-columns(6 omega, 12);
-        }
-      }
-    }
-  }
-}
-
-// graphic examples
-
-// colors
-.styletile {
-  .colors {
-    ul {
-      @include inline-list;
-      li {
-        height: $kit-baseline * 5;
-        margin-bottom: $kit-baseline;
-        border: 4px solid $white;
-        position: relative;
-        &:after {
-          position: relative;
-          top: 102%;
-          color: $gray;
-        }
-        @include at-breakpoint($media-layout-handheld) {
-          @include span-columns(1, 2);
-          &:nth-of-type(2n+2) {
-            @include omega;
-          }
-        }
-
-        @include at-breakpoint($media-layout-handheld-wide) {
-          @include span-columns(1, 3);
-          &:nth-of-type(3n+3) {
-            @include omega;
-          }
-        }
-
-        @include at-breakpoint($media-layout-medium) {
-          @include span-columns(1, 3);
-          &:nth-of-type(3n+3) {
-            @include omega;
-          }
-        }
-
-        @include at-breakpoint($media-layout-tablet) {
-          @include span-columns(1, 4);
-          &:nth-of-type(4n+4) {
-            @include omega;
-          }
-        }
-
-        @include at-breakpoint($media-layout-desktop) {
-          @include span-columns(1, 6);
-          &:nth-of-type(6n+6) {
-            @include omega;
-          }
-        }
-      }
-    }
-  }
-}
-
-.styletile {
-  .images {
-    ul {
-      @include inline-list;
-      li {
-        overflow: hidden;
-        margin-bottom: $kit-baseline;
-        @include at-breakpoint($media-layout-tablet) {
-          @include span-columns(2, 4);
-          &:nth-of-type(2n+2) {
-            @include omega;
-          }
-        }
-
-        @include at-breakpoint($media-layout-desktop) {
-          @include span-columns(3, 6);
-          &:nth-of-type(2n+2) {
-            @include omega;
-          }
-        }
-
-        img {
-          @extend %constrain-to-parent;
-        }
-      }
-    }
-  }
-}

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

@@ -1,157 +0,0 @@
-// styles for survivalkit ui
-
-$fontAwesomePath: "fontawesome-webfont"
-@import 'survivalkit/fonts/font-awesome'
-
-$kit-font-family: $font-serifs
-
-$sk-lightgray: #ccc
-$sk-gray: #666
-$sk-midgray: #444
-$sk-darkgray: #333
-
-header.kit-ui
-  padding: 0.5em 0.5em 0
-  @extend .clearfix
-  background: $sk-darkgray
-  border-bottom: 1px solid $black
-
-.kit-ui
-  background: $sk-gray
-  font-family: $kit-font-family
-  color: $sk-lightgray
-  margin-bottom: 0
-  +clearfix
-  a
-    +link-colors($white, $sk-lightgray, $sk-lightgray, $white)
-    +border-links($white, $sk-lightgray, $sk-lightgray, $white)
-  h1, h2, div
-    display: inline
-  h1
-    +adjust-font-size-to(16px)
-    float: left
-    padding-right: 0.5em
-    margin-right: 0.5em
-    font-family: futura, $kit-font-family
-    a
-      +undo-border-links
-      display: block
-  .page-info
-    border-left: 1px solid white
-    float: left
-    padding-left: 0.5em
-    a
-      +undo-border-links
-  h2
-    +adjust-font-size-to(16px)
-    margin-top: 0
-    font-family: $kit-font-family
-    margin-right: 1em
-  .intro
-    +adjust-font-size-to(14px)
-
-
-////////////////////////////
-// NAVIGATION
-////////////////////////////
-.menu-trigger
-  float: left
-  min-width: calc-em(44px, 16px)
-  min-height: calc-em(44px, 16px)
-  margin-top: -0.5em
-  border-bottom-width: 0 !important
-  border-bottom-color: transparent !important
-  @extend %font-awesome
-  @extend .icon-th-list
-  &:before
-    font-size: 24px
-    line-height: calc-em(44px, 24px)
-.jPanelMenu #menu
-  display: none
-#jPanelMenu-menu
-  background: $sk-midgray
-  font-family: $kit-font-family
-  color: $sk-lightgray
-  // padding-top: calc-em(44px, 16px)
-.kit-nav, .section-nav
-  margin-bottom: 16px
-  padding: 0 0.5em
-  #{headings()}
-    font-size: $base-font-size
-  a
-    +link-colors($white, $black, $black, $white)
-    +undo-border-links
-  ul
-    +no-bullets
-    padding-left: 0
-.no-js body,
-body.documentation
-  +display-box
-  +box-orient(horizontal)
-  +box-align(stretch)
-  padding-top: 44px
-  header.kit-ui
-    position: fixed
-    width: 100%
-    height: 44px
-    margin-top: -44px
-  #menu
-    width: auto
-    max-width: 250px
-    margin-right: 1em
-
-h1.section-title
-  +adjust-font-size-to(ms(0))
-  text-transform: uppercase
-  padding-left: 0.5em
-  margin-top: 0
-  border-bottom: 1px solid $sk-gray
-
-.fold-section,
-.fold-article
-  +undo-border-links
-  +link-colors($sk-gray, $sk-lightgray, $sk-lightgray, $sk-gray, false)
-  border-bottom-width: 0 !important
-  border-bottom-color: transparent !important
-  @extend %font-awesome
-
-.fold-section,
-.fold-article
-  margin-left: 1em
-.fold-article
-  +link-colors($sk-lightgray, $sk-gray, $sk-gray, $sk-lightgray, false)
-.fold-section-close,
-.fold-article-close
-  @extend .icon-remove-sign
-.fold-section-open,
-.fold-article-open
-  @extend .icon-plus-sign
-
-div.element
-  padding-bottom: 44px
-  border-bottom: 1px solid transparentize($border-color, 0.9)
-  &.closed
-    padding-bottom: 0
-  h2.element-title
-    +adjust-font-size-to(ms(0))
-    border-bottom: 1px solid $sk-lightgray
-    text-transform: uppercase
-    padding-left: 0.5em
-  .example
-    +vertical-separation($kit-baseline, 1px, transparentize($border-color, 0.9), dashed)
-    +pie-clearfix
-    .markup
-      display: inline
-      float: left
-      width: 64.228%
-      margin-right: 2.439%
-      & + .show-source
-        display: inline
-        float: right
-        width: 30.894%
-        margin-right: 0
-        @extend %mono
-        .show-hide
-          text-align: right
-        & + p
-          clear: both

data/templates/shared/partials/03-extend/_helpers.scss

@@ -1,7 +0,0 @@
-.clearfix {
-  @extend %clearfix;
-}
-
-.hidden {
-  @extend %hidden;
-}

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

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

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

@@ -1,213 +0,0 @@
-// Create the design for your site below
-
-.styletile {
-  header {
-    @include clearfix;
-    @include trailer;
-    aside {
-      text-align: right;
-      color: $gray;
-      @extend .sans;
-    }
-  }
-
-  .group {
-    @include 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
-        }
-      }
-    }
-  }
-}