bones-rails 0.1.0 → 1.0.0

data/app/assets/stylesheets/bones/config/_tables.scss

@@ -0,0 +1,12 @@
+/* Standard Tables
+============================ */
+// default
+$table-default-width: 100%;
+$table-default-border: 1px solid $color-light-darker;
+// headers
+$table-header-background: $color-1;
+$table-header-color: $color-light;
+$table-header-fontWeight: 400;
+// cells
+$table-cell-padding: 5px 10px;
+$table-cell-altBackground: $color-light; // each even row will have this background

data/app/assets/stylesheets/bones/config/_typography.scss

@@ -0,0 +1,83 @@
+/* Headings
+============================ */
+// default
+$type-heading-margin: $default-margin;
+$type-heading-color: $default-color;
+$type-heading-textTransform: none;
+$type-heading-fontWeight: 600;
+// individual headings
+$type-h1-fontSize: 2.75em;
+$type-h2-fontSize: 2.4em;
+$type-h3-fontSize: 2.05em;
+$type-h4-fontSize: 1.7em;
+$type-h5-fontSize: 1.35em;
+$type-h6-fontSize: 1.0em;
+
+/* Subheadings
+============================ */
+$type-subheading-color: $color-dark-lightest;
+$type-subheading-fontWeight: 200;
+$type-subheading-sizeFactor: 0.75;
+
+/* Block-Level Elements
+============================ */
+// paragraph
+$type-paragraph-font: $default-fontSize;
+$type-paragraph-fontWeight: $default-fontWeight;
+$type-paragraph-margin: $default-margin;
+$type-paragraph-lineHeight: $default-lineHeight;
+$type-paragraph-color: $default-color;
+// blockquote
+$type-blockquote-padding: 0.25em 0.75em;
+$type-blockquote-margin: $default-margin;
+$type-blockquote-background: $color-light;
+$type-blockquote-borderLeft: 7.5px solid $color-light-dark;
+$type-blockquote-fontSize: $default-fontSize;
+// code block
+$type-codeBlock-margin: 1.25em 0;
+$type-codeBlock-padding: 1.25em 0.75em;
+$type-codeBlock-fontFamily: Consolas, monospace;
+$type-codeBlock-color: $default-color;
+$type-codeBlock-background: $color-light;
+$type-codeBlock-border: $color-light-dark;
+$type-codeBlock-fontSize: 13px;
+$type-codeBlock-lineHeight: 19px;
+
+/* Inline Elements
+============================ */
+// links
+$type-link-color: $color-1;
+$type-link-color-hover: $color-1-darker;
+$type-link-underline: false;
+$type-link-underline-hover: false;
+// code
+$type-code-font-family: Consolas, monospace;
+$type-code-color: $color-2;
+$type-code-fontSize: 12px;
+$type-code-background: $color-light;
+$type-code-padding: 1px 2px;
+$type-code-border: $color-light-dark;
+// small
+$type-small-fontFactor: 60%;
+// big
+$type-big-fontFactor: 140%;
+// strong
+$type-strong-fontWeight: 600;
+
+/* Lists
+============================ */
+// unordered lists
+$type-ul-marginLeft-1: -20px;
+$type-ul-marginLeft-2: 0;
+$type-ul-styleType: disc;
+$type-ul-lineHeight: 1.5;
+// ordered lists
+$type-ol-marginLeft-1: $type-ul-marginLeft-1;
+$type-ol-marginLeft-2: $type-ul-marginLeft-2;
+$type-ol-lineHeight: $type-ul-lineHeight;
+
+/* Horizontal Rule
+============================ */
+$type-hr-color: $color-light-dark;
+$type-hr-height: 1px;
+$type-hr-margin: $default-margin;

data/app/assets/stylesheets/bones/config/_wireframe.scss

@@ -0,0 +1,18 @@
+/* Containers
+============================ */
+$wireframe-container-width: 1200px; // maximum container width -- container will shrink as needed
+$wireframe-container-margin: 0 auto;
+$wireframe-container-padding: 20px;
+
+/* Content
+============================ */
+$wireframe-content-margin: $wireframe-container-margin;
+$wireframe-content-padding: $wireframe-container-padding;
+
+/* Grid
+============================ */
+$wireframe-grid-numberOfCols: 12; // number of columns as base of building grid -- any number is permitted
+$wireframe-column-marginLeftRight: 0.5%; // margin on each column -- must be one percentage
+$wireframe-column-paddingLeftRight: 0.5%; // padding on each column -- must be one percentage
+$wireframe-column-marginTopBottom: 0.5%; // top/bottom margin on each column
+$wireframe-column-paddingTopBottom: 0.5%; // top/bottom padding on each column

data/app/assets/stylesheets/bones/styles/__default.scss

@@ -0,0 +1,27 @@
+@mixin clearfix() {
+  display: inline-block;  
+  &:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+ }
+}
+
+@mixin border($color: $color-light-dark, $weight: 1px, $style: solid) {
+  border: $weight $style $color;
+}
+
+* {
+  font-family: $default-fontFamily;
+  font-size: $default-fontSize;
+  font-weight: $default-fontWeight;
+  color: $default-color;
+  line-height: $default-lineHeight;
+}
+
+.clearfix {
+  @include clearfix();
+}

data/app/assets/stylesheets/bones/styles/_buttons.scss

@@ -0,0 +1,118 @@
+/* Default
+============================ */
+@mixin button($color: $color-light, $background-color: $color-1, $hover-background-color: $color-1-dark, $active-background-color: $color-1-darker) {
+  color: $color;
+  background-color: $background-color;
+  display: inline-block;
+  border: $button-default-border;
+  padding: $button-default-padding;
+  margin: $button-default-margin;
+  font-size: $button-default-fontSize;
+  line-height: $button-default-fontSize;
+  &:hover {
+    background-color: $hover-background-color;
+    cursor: pointer;
+  }
+  &:active {
+    background-color: $active-background-color;
+    outline: none;
+  }
+}
+
+button {
+  @include button($button-default-color, $button-default-background, $button-default-background-hover, $button-default-background-active);
+}
+
+a.button, .button {
+  @include button($button-default-color, $button-default-background, $button-default-background-hover, $button-default-background-active);
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+input[type=submit], form > input[type=submit] {
+  @include button($button-default-color, $button-default-background, $button-default-background-hover, $button-default-background-active);
+}
+
+/* Size Factors
+============================ */
+button.huge, a.button.huge {
+  font-size: $button-sizeFactor-huge;
+}
+
+button.large, a.button.large {
+  font-size: $button-sizeFactor-large;
+}
+
+button.small, a.button.small {
+  font-size: $button-sizeFactor-small;
+}
+
+/* Colors
+============================ */
+button.primary, a.button.primary {
+  @include button($color-light, $color-1, $color-1-dark, $color-1-darker);
+}
+
+button.accent-1, a.button.accent-1 {
+  @include button($color-light, $color-2, $color-2-dark, $color-2-darker);
+}
+
+button.accent-2, a.button.accent-2 {
+  @include button($color-light, $color-3, $color-3-dark, $color-3-darker);
+}
+
+button.accent-3, a.button.accent-3 {
+  @include button($color-light, $color-4, $color-4-dark, $color-4-darker);
+}
+
+button.accent-4, a.button.accent-4 {
+  @include button($color-light, $color-5, $color-5-dark, $color-5-darker);
+}
+
+button.dark, a.button.dark {
+  @include button($color-light, $color-dark, $color-dark-light, $color-dark-lightest);
+}
+
+button.light, a.button.light {
+  @include button($color-dark, $color-light-dark, $color-light-darker, $color-light-darkest);
+}
+
+button.success, a.button.success {
+  @include button($color-light, $color-success, $color-success-dark, $color-success-darker);
+}
+
+button.notice, a.button.notice {
+  @include button($color-light, $color-warning, $color-warning-dark, $color-warning-darker);
+}
+
+button.alert, a.button.alert {
+  @include button($color-light, $color-danger, $color-danger-dark, $color-danger-darker);
+}
+
+/* Block-Level
+============================ */
+button.block, a.button.block, input[type=submit].block, form > input[type=submit].block {
+  @include button($button-default-color, $button-default-background, $button-default-background-hover, $button-default-background-active);
+  display: block;
+  width: 100%;
+}
+
+/* Disabled
+============================ */
+button, input[type=submit], form > input[type=submit] {
+  &:disabled {
+    @include button($color-dark-lightest, $color-dark-lighter, $color-dark-lighter, $color-dark-lighter);
+    &:hover {
+      cursor: default;
+    }
+  }
+}
+
+a.button.disabled, .button.disabled {
+  @include button($color-dark-lightest, $color-dark-lighter, $color-dark-lighter, $color-dark-lighter);
+  &:hover {
+    cursor: default;
+  }
+}

data/app/assets/stylesheets/bones/styles/_components.scss

@@ -0,0 +1,24 @@
+/* Notifications
+============================ */
+@mixin notification($bg) {
+  width: 100%;
+  padding: $component-notification-padding;
+  margin: $component-notification-margin;  
+  background: $bg;
+  color: $color-light;
+}
+
+p, div {
+  &.notification, &.notice, &.alert {
+    @include notification($color-1);
+  }
+  &.danger {
+    @include notification($color-danger);
+  }
+  &.warning {
+    @include notification($color-warning);
+  }
+  &.success {
+    @include notification($color-success);
+  }
+}

data/app/assets/stylesheets/bones/{partials → styles}/_forms.scss

@@ -1,3 +1,19 @@
+@mixin form-global() {
+  display: block;
+  margin: $form-input-margin;
+  width: $form-input-width;
+  box-sizing: $form-input-boxSizing;
+  border: $form-input-border;
+  &:focus {
+    outline: $form-input-outline-focus;
+    border: $form-input-border-focus;
+  }
+}
+
+@mixin form-input() {
+  padding: $form-input-padding;
+}
+
 form {
   input[type=text] {
     @include form-global();
@@ -42,8 +58,8 @@ form {
   fieldset {
     border: $form-fieldset-border;
     legend {
-      font-weight: $form-fieldset-legend-font-weight;
-      padding: $form-fieldset-legend-padding;
+      font-weight: $form-legend-fontWeight;
+      padding: $form-legend-padding;
     }
   }
 }

data/app/assets/stylesheets/bones/styles/_images.scss

@@ -0,0 +1,69 @@
+/* Sizes
+============================ */
+img {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  &.thumb {
+    width: $img-thumb-width;
+  }
+  &.medium {
+    width: $img-medium-width;
+  }
+  &.large {
+    width: $img-large-width;
+  }
+}
+
+/* Styles
+============================ */
+img {
+  &.frame {
+    border: $img-frame-width solid $img-frame-color;
+    outline: $img-frame-outline;
+  }
+  &.polaroid {
+    border: $img-polaroid-frameWidth solid $img-polaroid-frameColor;
+    outline: $img-polaroid-outline;
+    border-bottom-width: $img-polaroid-bottomHeight;
+  }
+  &.center {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+div.panoramic {
+  width: 100%;
+  height: $img-panoramic-height;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+  img {
+    width: 100%;
+    position: absolute;
+    top: $img-panoramic-top;
+  }
+}
+
+@mixin img-circle($width) {
+  width: $width;
+  height: $width;
+  img {
+    width: $width;
+    height: $width;
+  }
+}
+
+div.circle {
+  border-radius: 50%;
+  overflow: hidden;
+  @include img-circle($img-thumb-width);
+  &.medium {
+    @include img-circle($img-medium-width);
+  }
+  &.large {
+    @include img-circle($img-large-width);
+  }
+}

data/app/assets/stylesheets/bones/styles/_nav.scss

@@ -0,0 +1,210 @@
+/* Mixins
+============================ */
+@mixin normalize-ul() {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin effect($bg, $color, $transition) {
+  background: $bg;
+  color: $color;
+  transition: $transition;
+}
+
+@mixin nav-a(
+  $fontSize: $nav-default-fontSize,
+  $margin: $mav-margin,
+  $padding: $nav-default-padding,
+  $background: $nav-default-background,
+  $color: $nav-default-color,
+  $underline: $nav-default-underline,
+  $transition: $nav-default-transition,
+  $hover-background: $nav-default-background-hover,
+  $hover-color: $nav-default-color-hover,
+  $hover-underline: $nav-default-underline-hover,
+  $hover-transition: $nav-default-transition-hover
+) {
+  font-size: $fontSize;
+  padding: $padding;
+  margin: $margin;
+  @include effect($background, $color, $transition);
+  border-bottom: $underline;
+  &:hover {
+    @include effect($hover-background, $hover-color, $hover-transition);
+    border-bottom: $hover-underline;
+    span, i {
+      @include effect($hover-background, $hover-color, $hover-transition);
+    }
+  }
+  span, i {
+    @include effect($background, $color, $transition)
+  }
+}
+
+/* Default Nav Menu
+============================ */
+nav, div.nav {
+  width: 100%;
+  background: $nav-default-background;
+  overflow: hidden;
+  ul {
+    @include normalize-ul();
+    float: left;
+    &.right {
+      float: right;
+    }
+    li {
+      display: inline-block;
+      a {
+        display: inline-block;
+        @include nav-a(
+          $nav-default-fontSize,
+          $nav-default-margin,
+          $nav-default-padding,
+          $nav-default-background,
+          $nav-default-color, 
+          $nav-default-underline,
+          $nav-default-transition,
+          $nav-default-background-hover,
+          $nav-default-color-hover,
+          $nav-default-underline-hover,
+          $nav-default-transition-hover
+        );
+      }
+    }
+  }
+}
+
+/* Navbar
+============================ */
+nav.bar, div.nav.bar {
+  background: $nav-bar-background;
+  ul {
+    li a {
+      @include nav-a(
+        $nav-bar-fontSize,
+        $nav-bar-margin,
+        $nav-bar-padding,
+        $nav-bar-background,
+        $nav-bar-color, 
+        $nav-bar-underline,
+        $nav-bar-transition,
+        $nav-bar-background-hover,
+        $nav-bar-color-hover,
+        $nav-bar-underline-hover,
+        $nav-bar-transition-hover
+      );
+    }
+  }
+}
+
+/* Vertical / Sidebar
+============================ */
+nav.vertical, div.nav.vertical {
+  background: $nav-vertical-background;
+  ul {
+    li {
+      display: block;
+      a {
+        display: block;
+        @include nav-a(
+          $nav-vertical-fontSize,
+          $nav-vertical-margin,
+          $nav-vertical-padding,
+          $nav-vertical-background,
+          $nav-vertical-color, 
+          $nav-vertical-underline,
+          $nav-vertical-transition,
+          $nav-vertical-background-hover,
+          $nav-vertical-color-hover,
+          $nav-vertical-underline-hover,
+          $nav-vertical-transition-hover
+        );
+      }
+    }
+  }
+}
+
+/* Filters
+============================ */
+ul.filter {
+  @include normalize-ul();
+  li {
+    display: inline-block;
+    a {
+      display: inline-block;
+      @include nav-a(
+        $nav-filter-fontSize,
+        $nav-filter-margin,
+        $nav-filter-padding,
+        $nav-filter-background,
+        $nav-filter-color, 
+        $nav-filter-underline,
+        $nav-filter-transition,
+        $nav-filter-background-hover,
+        $nav-filter-color-hover,
+        $nav-filter-underline-hover,
+        $nav-filter-transition-hover
+      );
+    }
+    &.active a {
+      background:     $nav-filter-background-active;
+      color:          $nav-filter-color-active;
+      font-weight:    $nav-filter-font-weight-active;
+      border-bottom:  $nav-filter-underline-active;
+    }
+    &.disabled a {
+      background:     $nav-filter-background-disabled;
+      color:          $nav-filter-color-disabled;
+      border-bottom:  $nav-filter-underline-disabled;
+    }
+  }
+}
+
+/* Breadcrumbs
+============================ */
+ul.breadcrumbs {
+  @include normalize-ul();
+  li {
+    display: inline-block;
+    a {
+      display: inline-block;
+      @include nav-a(
+        $nav-breadcrumbs-fontSize,
+        $nav-breadcrumbs-margin,
+        $nav-breadcrumbs-padding,
+        $nav-breadcrumbs-background,
+        $nav-breadcrumbs-color, 
+        $nav-breadcrumbs-underline,
+        $nav-breadcrumbs-transition,
+        $nav-breadcrumbs-background-hover,
+        $nav-breadcrumbs-color-hover,
+        $nav-breadcrumbs-underline-hover,
+        $nav-breadcrumbs-transition-hover
+      );
+    }
+    &:after {
+      content: $nav-breadcrumbs-separator;
+      color: $color-light-darker;
+    }
+    &:last-child:after {
+      content: "";
+    }
+    &.active a {
+      background:     $nav-breadcrumbs-background-active;
+      color:          $nav-breadcrumbs-color-active;
+      font-weight:    $nav-breadcrumbs-font-weight-active;
+      border-bottom:  $nav-breadcrumbs-underline-active;
+    }
+    &.disabled a {
+      background:     $nav-breadcrumbs-background-disabled;
+      color:          $nav-breadcrumbs-color-disabled;
+      border-bottom:  $nav-breadcrumbs-underline-disabled;
+    }
+  }
+}