Adding general components I use often in our new apps.

app/assets/stylesheets/codelation.scss

@@ -2,15 +2,23 @@
 // https://codelation.com
 
 // Used to set the max-width with the outer-container mixin
-$max-width: 1024px !default;
+$max-width:         1280px !default;
 
 // Used for has-cards, has-columns, and has-grid mixins. When the
 // viewport reaches the mobile-breakpoint, the columns will be stacked.
 $mobile-breakpoint: 767px !default;
 
+// Used for special occassions when the app requires
+// extra break points for tablets.
+$tablet-breakpoint: 1024px !default;
+
+// Used for spacing elements such as sections, rows, etc.
+$element-spacing:   80px !default;
+
 @import "bourbon/bourbon";
 @import "codelation/functions/**/*";
 @import "codelation/mixins/**/*";
+@import "codelation/layout/**/*";
 @import "normalize";
 
 // Border Box by default for all elements

app/assets/stylesheets/codelation/stylesheets/devise/main.scss

@@ -0,0 +1,88 @@
+body.confirmations,
+body.invitations,
+body.mailer,
+body.passwords,
+body.registrations,
+body.sessions,
+body.shared,
+body.unlocks {
+  background-color: color($grey, 100);
+
+  .application-wrap {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .application-main {
+    background-color: $white;
+    border-top-right-radius: $element-spacing / 2;
+    box-shadow: 0 0 25px rgba($black, 0.5);
+    margin: $element-spacing auto;
+    max-width: 420px;
+    padding: $element-spacing / 2;
+
+    h2 {
+      border-bottom: 2px solid color($grey, 100);
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 1;
+      margin: 0 0 $element-spacing / 3;
+      padding-bottom: $element-spacing / 3;
+    }
+
+    .field {
+      margin-bottom: $element-spacing / 3;
+
+      label {
+        color: color($grey, 600);
+        display: inline-block;
+        font-size: 14px;
+        text-transform: uppercase;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .actions {
+      border-bottom: 2px solid color($grey, 100);
+      margin: 0 0 $element-spacing / 3;
+      padding-bottom: $element-spacing / 3;
+    }
+
+    .user-links {
+
+      h6 {
+        font-size: 14px;
+        margin: 0;
+      }
+
+      a {
+        font-size: 14px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        text-decoration: none;
+      }
+    }
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+
+    .application-main {
+      margin: $element-spacing / 4;
+      max-width: 100%;
+      padding: $element-spacing / 4;
+
+      h2 {
+        margin: 0 0 $element-spacing / 4;
+        padding-bottom: $element-spacing / 4;
+      }
+
+      .actions {
+        margin: 0 0 $element-spacing / 4;
+        padding-bottom: $element-spacing / 4;
+      }
+    }
+  }
+}

app/assets/stylesheets/codelation/stylesheets/layout/forms/custom_select.scss

@@ -0,0 +1,41 @@
+.custom-select {
+  @include align-items(center);
+  @include display(flex);
+  background-color: color($grey, 100);
+  border: 1px solid color($grey, 100);
+  box-shadow: 0 0 5px rgba($black, 0.2);
+  color: color($grey, 600);
+  height: 46px;
+  margin-top: $element-spacing / 8;
+  padding-left: $element-spacing / 6;
+  padding-right: $element-spacing / 6;
+  position: relative;
+  width: 100%;
+
+  &:after {
+    content: "\f0d7";
+    font-family: FontAwesome;
+    height: 46px;
+    line-height: 46px;
+    padding-left: 15px;
+    padding-right: 15px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 10;
+  }
+
+  select {
+    -webkit-appearance: none;
+    background: transparent;
+    background-image: none;
+    border: none;
+    box-shadow: none;
+    padding: 5px 8px;
+    width: 170%;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

app/assets/stylesheets/codelation/stylesheets/layout/grid.scss

@@ -0,0 +1,34 @@
+.section-content {
+
+  &.three-column-grid {
+    @include has-grid(3, $element-spacing / 3);
+  }
+
+  &.four-column-grid {
+    @include has-grid(4, $element-spacing / 3);
+  }
+
+  &.five-column-grid {
+    @include has-grid(5, $element-spacing / 3);
+  }
+
+  &.six-column-grid {
+    @include has-grid(6, $element-spacing / 4);
+  }
+
+  &.seven-column-grid {
+    @include has-grid(7, $element-spacing / 5);
+  }
+
+  &.eight-column-grid {
+    @include has-grid(8, $element-spacing / 5);
+  }
+
+  &.nine-column-grid {
+    @include has-grid(5, $element-spacing / 6);
+  }
+
+  &.ten-column-grid {
+    @include has-grid(5, $element-spacing / 6);
+  }
+}

app/assets/stylesheets/codelation/stylesheets/layout/horizontal_rule.scss

@@ -0,0 +1,7 @@
+hr {
+  background-color: color($grey, 100);
+  border: 0;
+  height: 2px;
+  margin-bottom: $element-spacing / 6;
+  margin-top: $element-spacing / 6;
+}

app/assets/stylesheets/codelation/stylesheets/layout/row.scss

@@ -0,0 +1,11 @@
+.row {
+  margin-bottom: $element-spacing / 4;
+
+  &.actions {
+    padding-top: $element-spacing / 4;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

app/assets/stylesheets/codelation/stylesheets/layout/section_content.scss

@@ -0,0 +1,51 @@
+.section-content {
+  @include outer-container;
+  padding-bottom: $element-spacing;
+  padding-top: $element-spacing;
+  position: relative;
+  z-index: 2;
+
+  &.narrow {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 620px;
+  }
+
+  &.flat {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  &.full {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.fluid {
+    max-width: 100%;
+  }
+
+  &.tight {
+    padding-bottom: $element-spacing / 2;
+    padding-top: $element-spacing / 2;
+  }
+
+  &.tighter {
+    padding-bottom: $element-spacing / 4;
+    padding-top: $element-spacing / 4;
+  }
+
+  &.tightest {
+    padding-bottom: $element-spacing / 5;
+    padding-top: $element-spacing / 5;
+  }
+
+  &.has-aside {
+    @include has-columns(2, $element-spacing);
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    padding-bottom: $element-spacing / 4;
+    padding-top: $element-spacing / 4;
+  }
+}