skeletor_backbone 0.0.5 → 0.0.6

data/app/assets/stylesheets/skeletor/{base/print.sass → core/_print.sass}

@@ -1,4 +1,6 @@
-// Print Styles, Inlined to avoid required HTTP connection: h5bp.com/r
+//  Skeletor Print
+//    -> Print Styles Inlined to avoid required HTTP connection: h5bp.com/r
+// -----------------------------------------------------------------------------
 
 @media print
   *

data/app/assets/stylesheets/skeletor/{base/reset.sass → core/_reset.sass}

@@ -1,6 +1,7 @@
-// CSS Reset
-// A more conservative reset; more of a 'restart'
-// csswizardry.com/2011/10/reset-restarted
+//  Skeletor Reset
+//    -> A more conservative reset; more of a 'restart'
+//
+//  csswizardry.com/2011/10/reset-restarted
 //
 // =============================================================================
 // Table of Contents
@@ -23,6 +24,7 @@
 
 
 
+
 // -----------------------------------------------------------------------------
 //  :: VIEWPORT RESIZING
 // -----------------------------------------------------------------------------
@@ -53,6 +55,7 @@
 // -----------------------------------------------------------------------------
 //  :: BOX MODEL
 // -----------------------------------------------------------------------------
+// Box model adjustments - http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 @if $global-border-box
   *, *:before, *:after
     +skeletor-box-sizing(border-box)

data/app/assets/stylesheets/skeletor/{base/foundation.sass → core/base.sass}

@@ -1,17 +1,16 @@
-// Skeletor Base Styles
-// These are good starting 'default' styles for a base stylesheet.
+//  Skeletor Base
+//    -> Base-level tags (body, p, ect)
 //
 // =============================================================================
 // Table of Contents
 // =============================================================================
 //
 //  IMPORTS.....................Import Sass Settings and Functions
-//  CLEARFIX....................Clearfix: contain floats
-//  VERTICAL RHYTHM.............Consistent vertical rhythm, via margin-bottom
+//  VERTICAL RHYTHM.............Consistent vertical rhythm on base elements
 //  MAIN........................Main Elements
-//  HEADINGS....................Heading Elements and corresponding classes
+//  HEADINGS....................Heading Elements
 //  PARAGRAPHS..................Paragraph Elements
-//  HORIZONTAL RULES............Horizontal Rules and corresponding classes
+//  HORIZONTAL RULES............Horizontal Rules
 //  LINKS.......................Anchor/Link Elements
 //  IMAGES & OBJECTS............Image, Objects, and Embeds
 //  BLOCKQUOTE..................Blockquote style
@@ -25,8 +24,9 @@
 // -----------------------------------------------------------------------------
 //  :: IMPORTS
 // -----------------------------------------------------------------------------
-@import "skeletor/globals/mixins/position"
 @import "skeletor/globals/mixins/rem"
+@import "skeletor/globals/mixins/font_size"
+@import "skeletor/globals/mixins/vertical_spacing"
 @import "skeletor/globals/mixins/rgba"
 @import "skeletor/globals/mixins/media_query"
 @import "skeletor/globals/css3/prefixer"
@@ -40,37 +40,9 @@
 
 
 
-// -----------------------------------------------------------------------------
-//  :: CLEARFIX
-// -----------------------------------------------------------------------------
-
-// Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
-// Extend the clearfix class with Sass to avoid the `.cf` class appearing over and over in your markup.
-%clearfix
-  &:after
-    content: ""
-    clear: both
-    display: table
-
-.cf
-  @extend %clearfix
-
-
-
-
-
 // -----------------------------------------------------------------------------
 //  :: VERTICAL RHYTHM
 // -----------------------------------------------------------------------------
-
-// Where `margin-bottom` is concerned, this value will be the same as the
-// base line-height. This allows us to keep a consistent vertical rhythm.
-// As per: csswizardry.com/2012/06/single-direction-margin-declarations
-
-%sass-margin-bottom
-  +skeletor-vertical-spacing($base-line-height)
-
-// Set 'vertical rhythm' on Base elements
 h1,h2,h3,h4,h5,h6,hgroup,
 ul,ol,dl,blockquote,p,address,
 table, fieldset,figure,pre, hr
@@ -81,14 +53,17 @@ table, fieldset,figure,pre, hr
 //  :: MAIN
 // -----------------------------------------------------------------------------
 html
-  font: #{skeletor-calculate-em($base-font-size)}/#{$line-height-ratio} $base-font-family
+  // font: #{skeletor-calculate-rem($base-font-size)}/#{$line-height-ratio} $base-font-family
+  +skeletor-font-size($base-font-size)
+  font-family: $base-font-family
+  line-height: $line-height-ratio
   overflow-y: scroll
   text-size-adjust: 100%
-  // TODO: Does font-size need to adjust by media-query?
 
 html, body
   height: 100%
   min-height: 100%
+  position: relative
 
 html, button, input,
 select, textarea
@@ -99,6 +74,10 @@ select, textarea
   background: #b3d4fc
   text-shadow: none
 
+::-webkit-selection
+  background: #b3d4fc
+  text-shadow: none
+
 ::selection
   background: #b3d4fc
   text-shadow: none
@@ -122,46 +101,28 @@ img::-moz-selection
 //  :: HEADINGS
 // -----------------------------------------------------------------------------
 
-// As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
-// When we define a heading we also define a corresponding class to go with it.
-// This allows us to apply, say, `class=kilo` to a `h3`.
-
 // Use `text-rendering` with caution - http://cbrac.co/SJt8p1
 h1, h2, h3, h4, h5, h6
   color: $header-font-color
   font-family: $header-font-family
   font-weight: 700
+  //line-height: 1.333
   text-rendering: optimizeLegibility
 
-h1, .kilo
+// Font Sizes extended in content.sass
+h1
   +skeletor-font-size($h1-size)
-h2, .hecto
+h2
   +skeletor-font-size($h2-size)
-h3, .deca
+h3
   +skeletor-font-size($h3-size)
-h4, .deci
+h4
   +skeletor-font-size($h4-size)
-h5, .centi
+h5
   +skeletor-font-size($h5-size)
-h6, .milli
+h6
   +skeletor-font-size($h6-size)
 
-// Larger font-sizes
-.tera
-  +skeletor-font-size($tera-size)
-.giga
-  +skeletor-font-size($giga-size)
-.mega
-  +skeletor-font-size($mega-size)
-
-//Smaller font-sizes
-.micro
-  +skeletor-font-size($micro-size)
-.nano
-  +skeletor-font-size($nano-size)
-.pico
-  +skeletor-font-size($pico-size)
-
 
 
 
@@ -180,8 +141,7 @@ p
 // -----------------------------------------------------------------------------
 //  :: HORIZONTAL RULES
 // -----------------------------------------------------------------------------
-// A better looking horizontal rule
-hr, .rule
+hr
   +skeletor-vertical-spacing($base-line-height - 2px)
   border: none
   border-bottom-width: 1px
@@ -189,27 +149,6 @@ hr, .rule
   color: $gray
   //display: block
 
-// Extends `hr` element/class
-.rule--dotted
-  border-bottom-style: dotted
-.rule--dashed
-  border-bottom-style: dashed
-
-// Extend `hr` element/class and adds section sign
-.rule--ornament
-  position: relative
-
-  &:after
-    +skeletor-position(absolute, 0px 0px 0 0px)
-    content: "\00A7"
-    line-height: 0
-    text-align: center
-
-  // Pass in arbitrary ornament through a data attribute.
-  // hr.rule--ornament{data-ornament="!"}
-  &[data-ornament]
-    content: attr(data-ornament)
-
 
 
 
@@ -290,12 +229,11 @@ svg
 //  :: BLOCKQUOTE
 // -----------------------------------------------------------------------------
 blockquote
+  border-left: 1px solid #ddd
   padding-left: 1rem
-  border-left: 5px solid #e5e5e5
-  font-style: italic
-  font-family: $garamond
 
   p
+    color: $darker-gray
     margin: 0
     + p
       margin-top: 1rem
@@ -308,7 +246,7 @@ blockquote
 
     // Add an m-dash character before the footer or cit tags
     &:before
-      content: "\2014 \2009"
+      content: "\2014 \0020"
 
 
 
@@ -323,13 +261,13 @@ code, kbd, pre, samp
   font-family: $monospace
 
 code, kbd
-  font-size: 75%
+  font-size: 0.875rem
 
 code
   +skeletor-border-radius(3px)
   background: $lightest-gray
   border: 1px solid $light-gray
-  padding: 0 0.3rem
+  padding: 0.064rem 0.317rem
   white-space: nowrap
 
 // Increase `padding` at larger viewport widths
@@ -344,7 +282,7 @@ kbd
   background: $lightest-gray
   border: 1px solid $light-gray
   margin-bottom: 1px
-  padding: 0 0.3rem
+  padding: 0.064rem 0.317rem
   position: relative
   top: -1px
   white-space: nowrap
@@ -389,7 +327,7 @@ pre code
 //  :: LISTS
 // -----------------------------------------------------------------------------
 // Where `margin-left` is concerned try and indent elements by a consistent amount.
-ul, ol, dd
+ul, ol
   +skeletor-rem(margin-left, (2 * $base-line-height))
 
 // Remove Vertical spacing from nested lists.
@@ -401,6 +339,9 @@ dl dt
   color: $black
   font-weight: 700
 
+dd
+  +skeletor-rem(margin-left, $base-line-height)
+
 // Nested list-style types for ordered lists
 ol
   list-style: decimal
@@ -414,6 +355,10 @@ ol
 nav ul, nav ol
   list-style: none
 
+// Overwrite default vertical rhythm for nested list elements.
+ol ol, ul ul, ul ol, ol ul
+  margin-bottom: 0
+
 
 
 
@@ -426,10 +371,11 @@ table
   width: 100%
 
 table th, table td
-  overflow: visible
   +skeletor-rem(padding, ($base-line-height / 3))
+  overflow: visible
   text-align: left
   vertical-align: top
+
   @if $responsive
     +skeletor-media-query(palm)
       +skeletor-rem(padding, ($base-line-height / 2))
@@ -459,42 +405,6 @@ caption
 [rowspan="1"]
   vertical-align: top
 
-// Basic table styling
-
-// Outer border only
-.table-stripes tbody > tr:nth-child(odd) > td
-  background-color: $lightest-gray
-
-.table-border
-  border: 1px solid $light-gray
-
-// Border for rows
-.table-border__rows
-  th, td
-    border-top: 1px solid $light-gray
-
-// Border for rows and columns
-.table-border__cells
-  th, td
-    border-left: 1px solid $light-gray
-    border-top: 1px solid $light-gray
-
-// Remove top border to avoid 'double' border on tables
-.table-border .table-border_cells, .table-border .table-border__rows
-  thead:first-child tr:first-child th, thead:first-child tr:first-child td
-    border-top: 0
-
-// Cleanup outside borders
-.table-border__cells
-  tr th:first-child, tr td:first-child
-    border-left: 0
-
-  tr:first-child th, thead:first-child tr:first-child th
-    border-top: 0
-
-.table-border__rows tr:last-child td
-  border-bottom: 1px solid $light-gray
-
 
 
 
@@ -503,35 +413,58 @@ caption
 //  :: FORMS
 // -----------------------------------------------------------------------------
 fieldset
+  +skeletor-font-size($base-font-size+2)
   +skeletor-rem(padding, $base-line-height)
-  //border: 0
-  //margin: 0
+  border: 0
+  min-width: 0
+
+legend
+  border: 0
+  font-weight: 700
+  padding: 0
 
 label
-  display: block
+  display: inline
 
-textarea
-  height: auto
-  resize: vertical
+input[type="checkbox"], input[type="image"], input[type="radio"]
+  display: inline-block
+  width: auto
 
-select
-  //width: 100%
+input[type="file"]
+  cursor: pointer
+  max-width: 100%
 
-#{$all-text-inputs}, textarea
-  +skeletor-rem(padding, $base-line-height)
-  +skeletor-vertical-spacing($base-line-height / 2)
-  +skeletor-transition(all 0.15s linear)
+#{$all-text-inputs}, textarea, select
+  +skeletor-border-radius(4px)
   +skeletor-rgba(color, 0, 0, 0, 0.75)
+  +skeletor-rem(padding, $base-line-height / 3)
+  +skeletor-transition(all 0.15s linear)
+  +skeletor-vertical-spacing($base-line-height / 2)
   background-color: #fff
   border: 1px solid darken(#fff, 20%)
-  border-radius: 4px
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
+  display: block
+  outline: 0 none
+  vertical-align: middle
   width: 100%
 
   &:focus
-    background-color: darken(#fff, 2%)
-    border-color: darken(#fff, 40%)
-    outline: none
+    // box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
+    background-color: darken(#fff, 1%)
+    border-color: darken(#fff, 30%)
+    outline: 0 none
 
   &[disabled]
     background-color: darken(#fff, 10%)
+
+select
+  +skeletor-rem(height, $base-line-height+20)
+  background: #f8f8f8
+
+// Fix height issue in Firefox
+@-moz-document url-prefix()
+  select
+    height: auto
+
+textarea
+  height: auto
+  resize: vertical

data/app/assets/stylesheets/skeletor/core/content.sass

@@ -0,0 +1,93 @@
+//  Skeletor Content
+//    -> Base-level typography (fonts, colors, ect)
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  IMPORTS.....................Import Sass Settings and Functions
+//  FONT SIZING.................Font Class & heading extensions
+//  UTILITIES....................Helper Classes for quick layouts.
+//
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/mixins/font_size"
+@import "skeletor/globals/mixins/opacity"
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: FONT SIZING
+// -----------------------------------------------------------------------------
+
+// Extend h1 with classes to allow more flexibility with headings and font sizes.
+.c-h1, %c-h1
+  @extend h1
+
+.c-h2, %c-h2
+  @extend h2
+
+.c-h3, %c-h3
+  @extend h3
+
+.c-h4, %c-h4
+  @extend h4
+
+.c-h5, %c-h5
+  @extend h5
+
+.c-h6, %c-h6
+  @extend h6
+
+// Larger font-sizes
+.c-giga, %c-giga
+  +skeletor-font-size($giga-size)
+.c-mega, %c-mega
+  +skeletor-font-size($mega-size)
+.c-kilo, %c-kilo
+  +skeletor-font-size($kilo-size)
+
+//Smaller font-sizes
+.c-micro, %c-micro
+  +skeletor-font-size($micro-size)
+.c-nano, %c-nano
+  +skeletor-font-size($nano-size)
+.c-pico, %c-pico
+  +skeletor-font-size($pico-size)
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: UTILITIES
+// -----------------------------------------------------------------------------
+
+%c-right, .c-right
+  text-align: right
+
+%c-left, .c-left
+  text-align: left
+
+%c-center, .c-center
+  text-align: center
+
+%c-condense, .c-condense
+  font-size: 85%
+
+%c-lead, .c-lead
+  font-size: 125%
+
+%c-shout, .c-shout
+  text-transform: uppercase
+
+%c-info, .c-info
+  cursor: help
+
+%c-muted, .c-muted
+  +skeletor-opacity(0.5)