bones-rails 0.1.0 → 1.0.0

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

@@ -1,6 +1,8 @@
+/* Standard Tables
+============================ */
 table {
-  width: $table-width;
-  border: $table-border;
+  width: $table-default-width;
+  border: $table-default-border;
   th, td {
     padding: $table-cell-padding;
   }
@@ -8,12 +10,12 @@ table {
     background: $table-header-background;
     th {
       color: $table-header-color;
-      font-weight: $table-header-font-weight;
+      font-weight: $table-header-fontWeight;
     }
   }
   tbody tr {
     &:nth-child(even) {
-      background: $table-cell-accent-background;
+      background: $table-cell-altBackground;
     }
   }
 }

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

@@ -0,0 +1,227 @@
+/* Headings
+============================ */
+@mixin heading($size) {
+  font-size: $size;
+  margin: $type-heading-margin;
+  color: $type-heading-color;
+  font-weight: $type-heading-fontWeight;
+  text-transform: $type-heading-textTransform;
+}
+
+h1 {
+  @include heading($type-h1-fontSize);
+}
+
+h2 {
+  @include heading($type-h2-fontSize);
+}
+
+h3 {
+  @include heading($type-h3-fontSize);
+}
+
+h4 {
+  @include heading($type-h4-fontSize);
+}
+
+h5 {
+  @include heading($type-h5-fontSize);
+}
+
+h6 {
+  @include heading($type-h6-fontSize);
+}
+
+/* Subheadings
+============================ */
+@mixin subheading($size) {
+  font-size: $size * $type-subheading-sizeFactor;
+  font-weight: $type-subheading-fontWeight;
+  color: $type-subheading-color;
+}
+
+h1.subheading {
+  @include subheading($type-h1-fontSize);
+}
+
+h2.subheading {
+  @include subheading($type-h2-fontSize);
+}
+
+h3.subheading {
+  @include subheading($type-h3-fontSize);
+}
+
+h4.subheading {
+  @include subheading($type-h4-fontSize);
+}
+
+h5.subheading {
+  @include subheading($type-h5-fontSize);
+}
+
+h6.subheading {
+  @include subheading($type-h6-fontSize);
+}
+
+/* Block-Level Elements
+============================ */
+p {
+  font-weight: $type-paragraph-fontWeight;
+  margin: $type-paragraph-margin;
+  line-height: $type-paragraph-lineHeight;
+  color: $type-paragraph-color;
+}
+
+blockquote {
+  padding: $type-blockquote-padding;
+  margin: $type-blockquote-margin;
+  background: $type-blockquote-background;
+  border-left: $type-blockquote-borderLeft;
+  font-size: $type-blockquote-fontSize;
+  code {
+    border: none;
+    background: transparent;
+    font-size: $type-blockquote-fontSize;
+  }
+}
+
+pre {
+  margin: $type-codeBlock-margin;
+  padding: $type-codeBlock-padding;
+  font-family: $type-codeBlock-fontFamily;
+  background: $type-codeBlock-background;
+  color: $type-codeBlock-color;
+  @include border($type-codeBlock-border);
+  font-size: $type-codeBlock-fontSize;
+  line-height: $type-codeBlock-lineHeight;
+  display: block;
+  white-space: pre;
+  overflow: auto;
+  code {
+    color: $type-codeBlock-color;
+    background: transparent;
+    padding: 0;
+    border: none;
+  }
+  span {
+    font-family: $type-codeBlock-fontFamily;
+    font-size: $type-codeBlock-fontSize;
+  }
+}
+
+/* Inline Elements
+============================ */
+a {
+  color: $type-link-color;
+  @if $type-link-underline == true {
+    text-decoration: underline;
+  }
+  @else {
+    text-decoration: none;
+  }
+  &:hover {
+    color: $type-link-color-hover;
+    @if $type-link-underline-hover == true {
+      text-decoration: underline;
+    }
+    @else {
+      text-decoration: none;
+    }
+  }
+}
+
+code {
+  font-family: $type-code-font-family;
+  color: $type-code-color;
+  font-size: $type-code-fontSize;
+  background: $type-code-background;
+  padding: $type-code-padding;
+  @include border($type-code-border)
+}
+
+small {
+  font-size: $type-small-fontFactor;
+}
+
+big {
+  font-size: $type-big-fontFactor;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: $type-strong-fontWeight;
+}
+
+/* Lists
+============================ */
+@mixin unordered-list($list-type) {
+  list-style-type: $list-type;
+  ul, ul ul {
+    list-style-type: $list-type;
+  }
+}
+
+ul {
+  margin-left: $type-ul-marginLeft-1;
+  list-style-type: $type-ul-styleType;
+  ul, ul ul {
+    margin-left: $type-ul-marginLeft-2;
+  }
+  li {
+    line-height: $type-ul-lineHeight;
+  }
+}
+
+ol {
+  margin: 0;
+  margin-left: $type-ol-marginLeft-1;
+  ol, ol ol {
+    margin-left: $type-ol-marginLeft-2;
+  }
+  li {
+    line-height: $type-ol-lineHeight;
+  }
+}
+
+ul.disc {
+  @include unordered-list(disc);
+}
+
+ul.circle {
+  @include unordered-list(circle);
+}
+
+ul.square {
+  @include unordered-list(square);
+}
+
+ul.no-bullet {
+  @include unordered-list(none);
+  margin-left: $type-ul-marginLeft-1 - 20px;
+  ul, ul ul {
+    margin-left: $type-ul-marginLeft-2 - 20px;
+  }
+}
+
+ul.horizontal {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  li {
+    display: inline-block;
+    padding: 0 1em;
+  }
+}
+
+/* Horizontal Rule
+============================ */
+hr {
+  border: none;
+  background: $type-hr-color;
+  margin: $type-hr-margin;
+  height: $type-hr-height;
+}

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

@@ -0,0 +1,57 @@
+/* Containers
+============================ */
+@mixin container() {
+  clear: both;
+  display: block;
+}
+
+html, body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+div {
+  box-sizing: border-box;
+}
+
+.container {
+  max-width: $wireframe-container-width;
+  margin: $wireframe-container-margin;
+  padding: $wireframe-container-padding;
+  @include container;
+}
+
+/* Content
+============================ */
+.content {
+  width: 100%;
+  @include container;
+}
+
+/* Grid
+============================ */
+.row {
+  @include clearfix;
+  width: 100%;
+  position: relative;
+}
+
+/*
+ * This loop enables us to adjust to any value as the base
+ * number of columns.
+ *
+ */
+@for $i from 1 through $wireframe-grid-numberOfCols {
+  .column-#{$i} {
+    $col-width: percentage( (100 / $wireframe-grid-numberOfCols) / 100 );
+    width: ($col-width * $i) - (2 $wireframe-column-marginLeftRight);
+    display: inline-block;
+    float: left;
+    height: 100%;
+    margin: $wireframe-column-marginTopBottom $wireframe-column-marginLeftRight;
+    padding: $wireframe-column-paddingTopBottom $wireframe-column-paddingLeftRight;
+  }
+}

data/app/assets/stylesheets/bones/styles/helpers/_background.scss

@@ -0,0 +1,201 @@
+.bg-1 {
+  background-color: $color-1 !important;
+}
+.bg-1-light {
+  background-color: $color-1-light !important;
+}
+.bg-1-lighter {
+  background-color: $color-1-lighter !important;
+}
+.bg-1-lightest {
+  background-color: $color-1-lightest !important;
+}
+.bg-1-dark {
+  background-color: $color-1-dark !important;
+}
+.bg-1-darker {
+  background-color: $color-1-darker !important;
+}
+.bg-1-darkest {
+  background-color: $color-1-darkest !important;
+}
+
+.bg-2 {
+  background-color: $color-2 !important;
+}
+.bg-2-light {
+  background-color: $color-2-light !important;
+}
+.bg-2-lighter {
+  background-color: $color-2-lighter !important;
+}
+.bg-2-lightest {
+  background-color: $color-2-lightest !important;
+}
+.bg-2-dark {
+  background-color: $color-2-dark !important;
+}
+.bg-2-darker {
+  background-color: $color-2-darker !important;
+}
+.bg-2-darkest {
+  background-color: $color-2-darkest !important;
+}
+
+.bg-3 {
+  background-color: $color-3 !important;
+}
+.bg-3-light {
+  background-color: $color-3-light !important;
+}
+.bg-3-lighter {
+  background-color: $color-3-lighter !important;
+}
+.bg-3-lightest {
+  background-color: $color-3-lightest !important;
+}
+.bg-3-dark {
+  background-color: $color-3-dark !important;
+}
+.bg-3-darker {
+  background-color: $color-3-darker !important;
+}
+.bg-3-darkest {
+  background-color: $color-3-darkest !important;
+}
+
+.bg-4 {
+  background-color: $color-4 !important;
+}
+.bg-4-light {
+  background-color: $color-4-light !important;
+}
+.bg-4-lighter {
+  background-color: $color-4-lighter !important;
+}
+.bg-4-lightest {
+  background-color: $color-4-lightest !important;
+}
+.bg-4-dark {
+  background-color: $color-4-dark !important;
+}
+.bg-4-darker {
+  background-color: $color-4-darker !important;
+}
+.bg-4-darkest {
+  background-color: $color-4-darkest !important;
+}
+
+.bg-5 {
+  background-color: $color-5 !important;
+}
+.bg-5-light {
+  background-color: $color-5-light !important;
+}
+.bg-5-lighter {
+  background-color: $color-5-lighter !important;
+}
+.bg-5-lightest {
+  background-color: $color-5-lightest !important;
+}
+.bg-5-dark {
+  background-color: $color-5-dark !important;
+}
+.bg-5-darker {
+  background-color: $color-5-darker !important;
+}
+.bg-5-darkest {
+  background-color: $color-5-darkest !important;
+}
+
+.bg-light {
+  background-color: $color-light !important;
+}
+.bg-light-dark {
+  background-color: $color-light-dark !important;
+}
+.bg-light-darker {
+  background-color: $color-light-darker !important;
+}
+.bg-light-darkest {
+  background-color: $color-light-darkest !important;
+}
+
+.bg-dark {
+  background-color: $color-dark !important;
+}
+.bg-dark-light {
+  background-color: $color-dark-light !important;
+}
+.bg-dark-lighter {
+  background-color: $color-dark-lighter !important;
+}
+.bg-dark-lightest {
+  background-color: $color-dark-lightest !important;
+}
+
+.bg-success {
+  background-color: $color-success !important;
+}
+.bg-success-light {
+  background-color: $color-success-light !important;
+}
+.bg-success-lighter {
+  background-color: $color-success-lighter !important;
+}
+.bg-success-lightest {
+  background-color: $color-success-lightest !important;
+}
+.bg-success-dark {
+  background-color: $color-success-dark !important;
+}
+.bg-success-darker {
+  background-color: $color-success-darker !important;
+}
+.bg-success-darkest {
+  background-color: $color-success-darkest !important;
+}
+
+.bg-warning {
+  background-color: $color-warning !important;
+}
+.bg-warning-light {
+  background-color: $color-warning-light !important;
+}
+.bg-warning-lighter {
+  background-color: $color-warning-lighter !important;
+}
+.bg-warning-lightest {
+  background-color: $color-warning-lightest !important;
+}
+.bg-warning-dark {
+  background-color: $color-warning-dark !important;
+}
+.bg-warning-darker {
+  background-color: $color-warning-darker !important;
+}
+.bg-warning-darkest {
+  background-color: $color-warning-darkest !important;
+}
+
+.bg-danger {
+  background-color: $color-danger !important;
+}
+.bg-danger-light {
+  background-color: $color-danger-light !important;
+}
+.bg-danger-lighter {
+  background-color: $color-danger-lighter !important;
+}
+.bg-danger-lightest {
+  background-color: $color-danger-lightest !important;
+}
+.bg-danger-dark {
+  background-color: $color-danger-dark !important;
+}
+.bg-danger-darker {
+  background-color: $color-danger-darker !important;
+}
+.bg-danger-darkest {
+  background-color: $color-danger-darkest !important;
+}