bones-rails 0.0.2 → 0.1.0

data/app/assets/stylesheets/bones/helpers/_size.scss

@@ -0,0 +1,34 @@
+// width
+.full-width {
+  width: 100%;
+}
+.width-100 {
+  width: 100px;
+}
+.width-200 {
+  width: 200px;
+}
+.width-300 {
+  width: 300px;
+}
+.width-400 {
+  width: 400px;
+}
+.width-500 {
+  width: 500px;
+}
+.width-600 {
+  width: 600px;
+}
+.width-700 {
+  width: 700px;
+}
+.width-800 {
+  width: 800px;
+}
+.width-900 {
+  width: 900px;
+}
+.width-1000 {
+  width: 1000px;
+}

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

@@ -0,0 +1,19 @@
+@mixin button($color: $accent-light, $background-color: $primary, $hover-background-color: $primary-dark, $active-background-color: $primary-darker) {
+  color: $color;
+  background-color: $background-color;
+  display: inline-block;
+  border: $button-border;
+  padding: $button-padding;
+  margin: $button-margin;
+  font-size: $button-font-size;
+  line-height: $button-font-size;
+  &:hover {
+    background-color: $hover-background-color;
+    cursor: pointer;
+  }
+  &:active {
+    background-color: $active-background-color;
+    outline: none;
+  }
+}
+

data/app/assets/stylesheets/bones/mixins/_forms.scss

@@ -0,0 +1,15 @@
+@mixin form-global() {
+  display: block;
+  margin: $form-margin;
+  width: $form-width;
+  box-sizing: $form-box-sizing;
+  border: $form-border;
+  &:focus {
+    outline: $form-focus-outline;
+    border: $form-focus-border;
+  }
+}
+
+@mixin form-input() {
+  padding: $form-input-padding;
+}

data/app/assets/stylesheets/bones/mixins/_globals.scss

@@ -0,0 +1,15 @@
+@mixin clearfix() {
+  display: inline-block;  
+  &:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+ }
+}
+
+@mixin border($color: $accent-light-dark, $weight: 1px, $style: solid) {
+  border: $weight $style $color;
+}

data/app/assets/stylesheets/bones/mixins/_grid.scss

@@ -0,0 +1,4 @@
+@mixin column-width($cols) {
+  $col-width: percentage( (100 / $grid-cols) / 100 );
+  width: ($col-width * $cols) - (2 * $grid-col-margin) - (2 * $grid-col-padding);
+}

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

@@ -0,0 +1,41 @@
+@mixin nav-core() {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin horizontal-list-core() {
+  @include nav-core();
+  li {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin horizontal-nav-core($bg, $fg, $bg-hover, $fg-hover, $padding, $font-size) {
+  @include horizontal-list-core;
+  li {
+    a {
+      display: inline-block;
+      font-size: $font-size;
+      margin: 0;
+      padding: $padding;
+      background-color: $bg;
+      color: $fg;
+      &:hover {
+        text-decoration: none;
+        background: $bg-hover;
+        color: $fg-hover;
+        span, i {
+          background: $bg-hover;
+          color: $fg-hover;
+        }
+      }
+      span, i {
+        background-color: $bg;
+        color: $fg;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+@mixin heading($size) {
+  font-size: $size;
+}
+
+@mixin subheading($size) {
+  font-size: $size * $subheading-size-factor;
+}
+
+@mixin unordered-list($type) {
+  list-style-type: $type;
+  ul, ul ul {
+    list-style-type: $type;
+  }
+}
+

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

@@ -0,0 +1,86 @@
+// default buttons
+button {
+  @include button($button-color, $button-background-color, $button-hover-background-color, $button-active-background-color);
+}
+
+a.button, .button {
+  @include button($button-color, $button-background-color, $button-hover-background-color, $button-active-background-color);
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+input[type=submit], form > input[type=submit] {
+  @include button($button-color, $button-background-color, $button-hover-background-color, $button-active-background-color);
+}
+
+// sizes
+button.huge, a.button.huge {
+  font-size: $button-huge-font-size;
+}
+
+button.large, a.button.large {
+  font-size: $button-large-font-size;
+}
+
+button.small, a.button.small {
+  font-size: $button-small-font-size;
+}
+
+// colors
+button.primary, a.button.primary {
+  @include button($accent-light, $primary, $primary-dark, $primary-darker);
+}
+
+button.accent-1, a.button.accent-1 {
+  @include button($accent-light, $accent-1, $accent-1-dark, $accent-1-darker);
+}
+
+button.accent-2, a.button.accent-2 {
+  @include button($accent-light, $accent-2, $accent-2-dark, $accent-2-darker);
+}
+
+button.dark, a.button.dark {
+  @include button($accent-light, $accent-dark, $accent-dark-light, $accent-dark-lightest);
+}
+
+button.light, a.button.light {
+  @include button($accent-dark, $accent-light-dark, $accent-light-darker, $accent-light-darkest);
+}
+
+button.success, a.button.success {
+  @include button($accent-light, $success, $success-dark, $success-darker);
+}
+
+button.notice, a.button.notice {
+  @include button($accent-light, $warning, $warning-dark, $warning-darker);
+}
+
+button.alert, a.button.alert {
+  @include button($accent-light, $danger, $danger-dark, $danger-darker);
+}
+
+// block
+button.block, a.button.block, input[type=submit].block, form > input[type=submit].block {
+  @include button($button-color, $button-background-color, $button-hover-background-color, $button-active-background-color);
+  display: block;
+  width: 100%;
+}
+
+// disabled
+button, input[type=submit], form > input[type=submit] {
+  &:disabled {
+    @include button($accent-dark-lightest, $accent-dark-lighter, $accent-dark-lighter, $accent-dark-lighter);
+    &:hover {
+      cursor: default;
+    }
+  }
+}
+
+a.button.disabled, .button.disabled {
+  @include button($accent-dark-lightest, $accent-dark-lighter, $accent-dark-lighter, $accent-dark-lighter);
+  &:hover {
+    cursor: default;
+  }
+}

data/app/assets/stylesheets/bones/partials/_code.scss

@@ -0,0 +1,99 @@
+code {
+  font-family: $code-font-family;
+  color: $code-color;
+  font-size: $code-font-size;
+  background: $code-background;
+  padding: $code-padding;
+  @include border($code-border)
+}
+
+pre {
+  margin: $code-block-margin;
+  padding: $code-block-padding;
+  font-family: $code-font-family;
+  background: $code-block-background;
+  color: $code-block-color;
+  @include border($code-block-border);
+  font-size: $code-block-font-size;
+  line-height: $code-block-line-height;
+  display: block;
+  white-space: pre;
+  overflow: auto;
+  
+  code {
+    color: $code-block-color;
+    background: transparent;
+    padding: 0;
+    border: none;
+  }
+  
+  span {
+    font-family: $code-block-font-family;
+    font-size: $code-block-font-size;
+  }
+}
+
+// syntax highlighting (GitHub theme)
+.hll { background-color: #f8f8f8; border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; }
+.c { color: #999988; font-style: italic; }
+.err { color: #a61717; background-color: #e3d2d2; }
+.k { font-weight: bold; }
+.o { font-weight: bold; }
+.cm { color: #999988; font-style: italic; }
+.cp { color: #999999; font-weight: bold; }
+.c1 { color: #999988; font-style: italic; }
+.cs { color: #999999; font-weight: bold; font-style: italic; }
+.gd { color: #000000; background-color: #ffdddd; }
+.gd .x { color: #000000; background-color: #ffaaaa; }
+.ge { font-style: italic; }
+.gr { color: #aa0000; }
+.gh { color: #999999; }
+.gi { color: #000000; background-color: #ddffdd; }
+.gi .x { color: #000000; background-color: #aaffaa; }
+.go { color: #888888; }
+.gp { color: #555555; }
+.gs { font-weight: bold; }
+.gu { color: #800080; font-weight: bold; }
+.gt { color: #aa0000; }
+.kc { font-weight: bold; }
+.kd { font-weight: bold; }
+.kn { font-weight: bold; }
+.kp { font-weight: bold; }
+.kr { font-weight: bold; }
+.kt { color: #445588; font-weight: bold; }
+.m { color: #009999; }
+.s { color: #dd1144; }
+.n { color: #333333; }
+.na { color: teal; }
+.nb { color: #0086b3; }
+.nc { color: #445588; font-weight: bold; }
+.no { color: teal; }
+.ni { color: purple; }
+.ne { color: #990000; font-weight: bold; }
+.nf { color: #990000; font-weight: bold; }
+.nn { color: #555555; }
+.nt { color: navy; }
+.nv { color: teal; }
+.ow { font-weight: bold; }
+.w { color: #bbbbbb; }
+.mf { color: #009999; }
+.mh { color: #009999; }
+.mi { color: #009999; }
+.mo { color: #009999; }
+.sb { color: #dd1144; }
+.sc { color: #dd1144; }
+.sd { color: #dd1144; }
+.s2 { color: #dd1144; }
+.se { color: #dd1144; }
+.sh { color: #dd1144; }
+.si { color: #dd1144; }
+.sx { color: #dd1144; }
+.sr { color: #009926; }
+.s1 { color: #dd1144; }
+.ss { color: #990073; }
+.bp { color: #999999; }
+.vc { color: teal; }
+.vg { color: teal; }
+.vi { color: teal; }
+.il { color: #009999; }
+.gc { color: #999; background-color: #EAF2F5; }

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

@@ -0,0 +1,22 @@
+@mixin notification($bg) {
+  background: $bg;
+  padding: 0.5em 1em;
+  width: 100%;
+  color: $accent-light;
+}
+
+.alert {
+  @include notification($danger);
+}
+.notice {
+  @include notification($primary);
+}
+.danger {
+  @include notification($danger);
+}
+.warning {
+  @include notification($warning);
+}
+.success {
+  @include notification($success);
+}

data/app/assets/stylesheets/bones/partials/_forms.scss

@@ -0,0 +1,49 @@
+form {
+  input[type=text] {
+    @include form-global();
+    @include form-input();
+  }
+  input[type=email] {
+    @include form-global();
+    @include form-input();
+  }
+  input[type=password] {
+    @include form-global();
+    @include form-input();
+  }
+  input[type=search] {
+    @include form-global();
+    @include form-input();
+  }
+  textarea {
+    @include form-global();
+    @include form-input();
+    height: 350px;
+  }
+  select {
+    @include form-global();
+  }
+  input[type=radio], input[type=checkbox] {
+    @include form-global();
+    display: inline;
+    width: auto;
+    margin: $form-radio-margin;
+  }
+  label {
+    display: block;
+  }
+  label.inline {
+    display: inline;
+  }
+  label.boolean {
+    display: inline;
+    margin-left: 5px;
+  }
+  fieldset {
+    border: $form-fieldset-border;
+    legend {
+      font-weight: $form-fieldset-legend-font-weight;
+      padding: $form-fieldset-legend-padding;
+    }
+  }
+}

data/app/assets/stylesheets/bones/partials/_globals.scss

@@ -0,0 +1,27 @@
+* {
+  font-family: $default-font-family;
+  font-size: $default-font-size;
+  font-weight: $default-font-weight;
+  color: $default-color;
+  line-height: $default-line-height;
+}
+
+.container {
+  max-width: $container-width;
+  margin: auto;
+  padding: $container-padding;
+  @include clearfix;
+  clear: both;
+  display: block;
+}
+
+hr {
+  border: none;
+  background: $hr-color;
+  margin: $hr-margin;
+  height: $hr-height;
+}
+
+div {
+  box-sizing: border-box;
+}