shibori 1.0.0.beta1

data/source/css/scss/globals/_variables.scss

@@ -0,0 +1,87 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+$asset-pipeline: false;
+$image-path: '/images';
+
+//- Spacing
+$space: 30px;
+$pad-xl: $space;
+$pad-lg: 20px;
+$pad: ceil($space/3);
+$pad-sm: ceil($space/6);
+
+//- Typography
+$font-base: 14px;
+$font-xxl: 24px;
+$font-xl: 18px;
+$font-lg: 16px;
+$font-sm: 13px;
+$font-xs: 10px;
+
+$font-h1: 36px;
+$font-h2: 30px;
+$font-h3: 24px;
+$font-h4: 20px;
+$font-h5: 16px;
+$font-h6: 14px;
+
+$line-height-base: 1.5;
+$line-height-sm: 1.2;
+
+//- Fonts
+$font-main: "BentonSans", "Helvetica Neue", sans-serif;
+$font-mono: "Inconsolata", monospace;
+
+//- Font Weights
+$font-light: 100;
+$font-normal: normal;
+$font-bold: bold;
+
+//- Layout
+$grid-full: 100%;
+$grid-large-screen: 1200px;
+$grid-desktop: 95%;
+$grid-tablet: 95%;
+$grid-mobile: 95%;
+
+//- Wrapper sizes
+$wrapper-sm: 800px;
+$wrapper-md: 960px;
+$wrapper-lg: 1080px;
+
+//- Z-index
+$z-foreground: 200;
+$z-middleground: 100;
+$z-default: 0;
+$z-background: -100;
+
+//- Borders
+$border-color: #d3d3d3;
+$border: 1px solid $border-color;
+
+$border-radius: 3px;
+$border-radius-sm: $border-radius - 2;
+$border-radius-lg: $border-radius + 2;
+$border-radius-circle: 50%;
+
+$box-shadow: 0 2px 4px 0 fade-out($black, .88);
+
+//- Breakpoints
+$bp-xs: 480px;
+$bp-sm: 600px;
+$bp-med: 768px;
+$bp-lg: 1100px;
+$bp-xl: 1400px;
+
+$tablet: $bp-med;
+
+//-Aniamtion
+$transition: .1s linear;
+
+//- Icon Sizing
+$brand-icon: 48px;
+$brand-icon-xs: 24px;
+$brand-icon-sm: 36px;
+$brand-icon-lg: 64px;

data/source/css/scss/layout/_grid-settings.scss

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Grid settings for Neat
+// ==========================================================================
+
+@import "neat-helpers";
+
+$default-feature: max-width;
+
+$mobile-sm: new-breakpoint($bp-xs);
+$mobile: new-breakpoint($bp-sm);
+$tablet: new-breakpoint($bp-med);
+$desktop: new-breakpoint($bp-lg);
+$large-screen: new-breakpoint($bp-xl);

data/source/css/scss/layout/_layout.scss

@@ -0,0 +1,95 @@
+// ==========================================================================
+// Layout
+// ==========================================================================
+
+//- Container
+
+.wrapper {
+  @include outer-container($grid-large-screen);
+  @include clearfix();
+  padding-left: $pad-lg;
+  padding-right: $pad-lg;
+
+  &.wrapper-full {
+    max-width: $grid-full;
+    padding-left: $pad-lg;
+    padding-right: $pad-lg;
+  }
+
+  &.wrapper-sm {
+    max-width: $wrapper-sm;
+  }
+
+  &.wrapper-md {
+    max-width: $wrapper-md;
+  }
+
+  &.wrapper-lg {
+    max-width: $wrapper-lg;
+  }
+
+  @include media($desktop) {
+    max-width: $grid-desktop;
+  }
+
+  @include media($tablet) {
+    max-width: $grid-tablet;
+  }
+
+  @include media($mobile) {
+    max-width: $grid-mobile;
+  }
+}
+
+.row {
+  @include row();
+}
+
+.two-up,
+.three-up,
+.four-up {
+  @include row();
+}
+
+//- Two up
+.two-up .col {
+  @include span-columns(6);
+  @include omega(3n);
+
+  @include media($mobile) {
+    @include span-columns(12);
+  }
+}
+
+//- Three up
+.three-up .col {
+  @include span-columns(4);
+  @include omega(4n);
+
+  @include media($mobile) {
+    @include span-columns(12);
+  }
+}
+
+//- Four up
+.four-up .col {
+  @include span-columns(3);
+  @include omega(6n);
+
+  @include media($mobile) {
+    @include span-columns(12);
+  }
+}
+
+//- Tools
+.cf {
+  @include clearfix();
+}
+
+.pull-left {
+  float: left !important;
+}
+
+.pull-right {
+  float: right !important
+}

data/source/css/scss/page-elements/_headers.scss

@@ -0,0 +1,3 @@
+// ==========================================================================
+// Headers
+// ==========================================================================

data/source/css/scss/page-elements/_navigation.scss

@@ -0,0 +1,254 @@
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+//- Base nav styling to make uls inline and unstyled
+nav {
+
+  ul {
+    @extend %list-unstyled;
+  }
+
+  &.nav-inline ul {
+    @extend %list-inline;
+  }
+}
+
+//- Horizontal ribbon subnav for page
+.page-subnav {
+  position: relative;
+  background-color: $gray-lighter;
+  @include clearfix();
+
+  nav > ul {
+    float: left;
+
+    li {
+      font-size: $font-lg;
+      display: inline-block;
+    }
+
+    a {
+      display: block;
+      padding: $pad*1.5;
+      margin-top: 3px; // adjust for bottom border
+      text-decoration: none;
+      color: fade-out($purple, .5);
+      border-bottom: 3px solid fade-out($purple, 1);
+      @include transition(all $transition);
+
+      [class^="icon-"] {
+        opacity: .5;
+        margin-bottom: -7px;
+        margin-right: 3px;
+        top: -2px;
+      }
+
+      &.active {
+        color: $purple;
+        border-color: $purple;
+
+        [class^="icon-"] {
+          opacity: 1;
+        }
+      }
+
+      &:hover {
+        color: fade-out($purple, .1);
+
+        [class^="icon-"] {
+          opacity: 1;
+        }
+      }
+
+      &:active,
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .btn {
+    margin: ($pad-lg - 1) 0;
+
+    @include media($tablet) {
+      display: none;
+    }
+  }
+}
+
+//- List nav
+.list-nav {
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  li {
+    margin-bottom: $pad-sm;
+
+    a {
+      text-decoration: none;
+      padding-left: 0;
+      color: $text-color-light;
+      @include transition(.2s $ease-out-expo);
+
+      &:hover {
+        color: $text-color;
+        padding-left: $pad;
+      }
+    }
+
+    &.active a {
+      padding-left: $pad;
+      color: $purple;
+    }
+  }
+
+  &-sm {
+    font-size: $font-sm;
+
+    h5 {
+      margin-bottom: $pad;
+    }
+  }
+}
+
+//- Breadcrumbs
+.breadcrumbs {
+  padding: $pad-lg 0;
+  font-size: $font-base;
+  font-weight: $font-bold;
+  background: $off-white;
+  color: fade-out($text-color-light, .5);
+  @include clearfix();
+
+  &.breadcrumbs-sm {
+    font-size: $font-xs;
+  }
+
+  nav {
+    float: left;
+  }
+
+  ul {
+    @extend %list-unstyled;
+    @extend %list-inline;
+  }
+
+  li:last-child a {
+    color: $text-color;
+    font-weight: $font-bold;
+  }
+
+  a {
+    text-decoration: none;
+    font-weight: $font-normal;
+    color: $text-color-light;
+
+    &:hover {
+      color: $purple;
+    }
+  }
+}
+
+//-Tabs
+.tabs {
+  @include clearfix();
+
+  .tab {
+    display: inline;
+  }
+
+  [type="radio"] {
+    clip: rect(0 0 0 0);
+    height: 1px;
+    opacity: 0;
+    position: fixed;
+    width: 1px;
+    z-index: $z-background;
+
+    &:checked + .tab-label {
+      font-weight: bold;
+      color: $purple;
+      z-index: 1;
+    }
+
+    &:checked ~ .tab-panel {
+      display: inline;
+    }
+  }
+
+  .tab-label {
+    display: inline-block;
+    font-size: $font-sm;
+    position: relative;
+    vertical-align: bottom;
+    cursor: pointer;
+  }
+
+  .tab-panel {
+    display: inline;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    height: 0;
+    width: 0;
+  }
+
+  .tab-content {
+    display: block;
+    float: left;
+    font-size: 1em;
+    width: 100%;
+  }
+}
+
+//- Tabs themes
+
+.tabs {
+
+  //- Basic
+  &.tabs-basic {
+
+    .tab-label {
+      border: $border;
+      padding: $pad $pad-lg;
+      margin: $pad-lg 0;
+    }
+  }
+
+  //- Terminal style
+  &.tabs-terminal {
+    background: darken($purple, 20%);
+
+    .tab-label-active {
+      background: #EAE9F1;
+      color: #222;
+      font-weight: normal;
+      border-right: 0;
+      border-radius: 0 0 $border-radius $border-radius;
+      border-top: 1px solid fade-out(black, .8);
+    }
+
+    .tab-label {
+      padding: 8px 13px;
+      border-right: 1px solid fade-out($black, .8);
+      font-weight: normal;
+      font-size: 16px;
+      color: $white;
+      color: fade-out($white, .2);
+
+      &.active {
+        @extend .tab-label-active;
+      }
+    }
+
+    [type="radio"]:checked {
+      + .tab-label {
+        @extend .tab-label-active;
+      }
+    }
+  }
+}

data/source/css/scss/page-elements/_sections.scss

@@ -0,0 +1,66 @@
+// ==========================================================================
+// Sections
+// ==========================================================================
+section {
+  margin-bottom: $space;
+
+  &.section-lg {
+    margin-bottom: $space*1.5;
+  }
+
+  &.section-xl {
+    margin-bottom: $space*2;
+  }
+
+  &:after {
+      content: "";
+      display: table;
+      clear: both;
+  }
+}
+
+.section {
+  // Purple Gradient
+  &-purple {
+    @include grad-purple();
+  }
+
+  // Dark Purple Gradient
+  &-purple-dark {
+    @include grad-purple-dark();
+  }
+
+  // Light gray to white
+  &-gray-light {
+    @include grad-gray-light();
+  }
+
+  //- Type changes
+  &-purple,
+  &-purple-dark {
+    h1, h2, h3, h4, h5, h6, p {
+      color: $white;
+    }
+
+    h6 {
+      color: fade-out($white, .15);
+    }
+
+    p {
+      color: fade-out($white, .25);
+
+
+      a {
+        color: fade-out($white, .15);
+
+        &:hover {
+          color: $white;
+        }
+      }
+    }
+
+    blockquote {
+      border-color: fade-out($white, .6);
+    }
+  }
+}

data/source/css/scss/page-elements/_sidebar.scss

@@ -0,0 +1,34 @@
+.sidebar {
+  @include span-columns(2.5);
+
+  &-sm {
+    @include span-columns(2);
+  }
+  &-xs {
+    @include span-columns(1);
+  }
+
+  &-title {
+    font-size: $font-base;
+    font-weight: bold;
+    margin-bottom: $pad;
+  }
+
+  &-title-sm {
+    font-size: $font-sm;
+    font-weight: bold;
+    margin-bottom: $pad;
+  }
+}
+
+.content-with-sidebar {
+  @include span-columns(9.5);
+
+  &-sm {
+    @include span-columns(10);
+  }
+
+  &-xs {
+    @include span-columns(11);
+  }
+}

data/source/css/shibori.scss

@@ -0,0 +1,63 @@
+// ==========================================================================
+// Heroku
+// ==========================================================================
+
+@import 'bourbon';
+
+//- Globals
+@import "scss/globals/colors";
+@import "scss/globals/variables";
+@import "scss/globals/mixins";
+
+//- Layout
+@import "scss/layout/grid-settings";
+@import 'neat';
+@import "scss/layout/layout";
+
+//- Base
+@import "scss/base/normalize";
+@import "scss/base/base";
+@import "scss/base/utilities";
+@import "scss/base/fonts";
+@import "scss/base/type";
+
+//- Page Elements
+@import "scss/page-elements/headers";
+@import "scss/page-elements/sections";
+@import "scss/page-elements/navigation";
+@import "scss/page-elements/sidebar";
+
+//- Ecosystem/Elements Marketplace
+@import "scss/ecosystem/elements";
+@import "scss/ecosystem/cards";
+@import "scss/ecosystem/addons-card";
+@import "scss/ecosystem/elements-brand";
+
+//- Components
+@import "scss/components/animate";
+@import "scss/components/hero";
+@import "scss/components/sr-only";
+@import "scss/components/masonary";
+@import "scss/components/lists";
+@import "scss/components/buttons";
+@import "scss/components/forms";
+@import "scss/components/quote";
+@import "scss/components/code";
+@import "scss/components/pill-box";
+@import "scss/components/tables";
+@import "scss/components/animation";
+@import "scss/components/tooltips";
+@import "scss/components/readmore";
+@import "scss/components/spinner";
+@import "scss/components/slider";
+@import "scss/components/alert";
+@import "scss/components/modal";
+@import "scss/components/panel";
+@import "scss/components/users";
+@import "scss/components/logos";
+@import "scss/components/icons";
+@import "scss/components/video";
+@import "scss/components/hr";
+@import "scss/components/sprites";
+@import "scss/components/vertical-tabs";
+@import "scss/components/owlCarousel";