skeletor_backbone 0.0.3

data/app/assets/stylesheets/skeletor/globals/mixins/_size.sass

@@ -0,0 +1,71 @@
+// =============================================================================
+//  SIZE
+//
+//  The size mixin is 'shorthand' for setting the width and height of elements.
+//  Size mixin can accept a single or double value.  A single value will assign
+//  that size to the height and width and two values will asign as width &
+//  height accordingly.
+//
+//  Available As:
+//    +skeletor-size(wh)
+//    +s-size(wh)
+//    +s-wh(w,h)
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Size
+// -----------------------------------------------------------------------------
+=skeletor-size($size)
+  @if length($size) == 1
+    @if $size == auto or not(unitless($size))
+      width:  $size
+      height: $size
+
+    @else if unitless($size)
+      width:  $size + px
+      height: $size + px
+
+  // Width x Height
+  @if length($size) == 2
+    $width:  nth($size, 1)
+    $height: nth($size, 2)
+
+    @if $width == auto or not(unitless($width))
+      width: $width
+
+    @else if unitless($width)
+      width: $width + px
+
+    @if $height == auto or not(unitless($height))
+      height: $height
+
+    @else if unitless($height)
+      height: $height + px
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for size mixin
+// -----------------------------------------------------------------------------
+=s-size($size)
+  =skeletor-size($size)
+
+// Width/Height alias for size mixin
+=s-wh($w, $h)
+  +skeletor-size($w $h)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =size($size)
+//     +skeletor-size($size)
+
+//   // Width/Height alias for size mixin
+//   =wh($w, $h)
+//     +skeletor-size($w $h)

data/app/assets/stylesheets/skeletor/globals/mixins/_triangle.sass

@@ -0,0 +1,69 @@
+// =============================================================================
+//  TRIANGLE
+//
+//  The triangle mixin is for easily creating css triangles
+//
+//  Available As:
+//    +skeletor-triangle()
+//    +s-triangle()
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Triangles
+// -----------------------------------------------------------------------------
+=skeletor-triangle($size, $color, $direction)
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left)
+    border-color: transparent
+    border-style: solid
+    border-width: $size / 2
+
+    @if $direction == up
+      border-bottom-color: $color
+
+    @else if $direction == right
+      border-left-color:   $color
+
+    @else if $direction == down
+      border-top-color:    $color
+
+    @else if $direction == left
+      border-right-color:  $color
+
+  @else if ($direction == up-right) or ($direction == up-left)
+    border-top: $size solid $color
+
+    @if $direction == up-right
+      border-left:  $size solid transparent
+
+    @else if $direction == up-left
+      border-right: $size solid transparent
+
+  @else if ($direction == down-right) or ($direction == down-left)
+    border-bottom: $size solid $color
+
+    @if $direction == down-right
+      border-left:  $size solid transparent
+
+    @else if $direction == down-left
+      border-right: $size solid transparent
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for triangle mixin
+// -----------------------------------------------------------------------------
+=s-triangle($size, $color, $direction)
+  +skeletor-triangle($size, $color, $direction)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =triangle($size, $color, $direction)
+//     +skeletor-triangle($size, $color, $direction)

data/app/assets/stylesheets/skeletor/globals/mixins/_truncate_text.sass

@@ -0,0 +1,41 @@
+// =============================================================================
+//  TRUNCATE TEXT
+//
+//  The truncate text mixin sets up an easier way to truncate text with
+//  an ellipsis default.
+//
+//  Available As:
+//    +skeletor-truncate-text()
+//    +s-truncate-text()
+//    +s-tt()
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Truncate Text
+// -----------------------------------------------------------------------------
+=skeletor-truncate-text($text: ellipsis)
+  overflow: hidden
+  text-overflow: $text
+  white-space: nowrap
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for truncate text mixin
+// -----------------------------------------------------------------------------
+=s-truncate-text($text: ellipsis)
+  +skeletor-truncate-text($text)
+
+=s-tt($text: ellipsis)
+  +skeletor-truncate-text($text)
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =truncate-text($text: ellipsis)
+//     +skeletor-truncate-text($text)

data/app/assets/stylesheets/skeletor/globals/settings/_easing.sass

@@ -0,0 +1,47 @@
+//
+// Easing
+//
+// http://robertpenner.com/
+// http://matthewlein.com/ceaser/
+//
+//============================================================
+
+// Cubic
+$easeInCubic    : cubic-bezier(0.550, 0.055, 0.675, 0.190)
+$easeOutCubic   : cubic-bezier(0.215, 0.610, 0.355, 1.000)
+$easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000)
+
+// Circ
+$easeInCirc     : cubic-bezier(0.600, 0.040, 0.980, 0.335)
+$easeOutCirc    : cubic-bezier(0.075, 0.820, 0.165, 1.000)
+$easeInOutCirc  : cubic-bezier(0.785, 0.135, 0.150, 0.860)
+
+// Expo
+$easeInExpo     : cubic-bezier(0.950, 0.050, 0.795, 0.035)
+$easeOutExpo    : cubic-bezier(0.190, 1.000, 0.220, 1.000)
+$easeInOutExpo  : cubic-bezier(1.000, 0.000, 0.000, 1.000)
+
+// Quad
+$easeInQuad     : cubic-bezier(0.550, 0.085, 0.680, 0.530)
+$easeOutQuad    : cubic-bezier(0.250, 0.460, 0.450, 0.940)
+$easeInOutQuad  : cubic-bezier(0.455, 0.030, 0.515, 0.955)
+
+// Quart
+$easeInQuart    : cubic-bezier(0.895, 0.030, 0.685, 0.220)
+$easeOutQuart   : cubic-bezier(0.165, 0.840, 0.440, 1.000)
+$easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000)
+
+// Quint
+$easeInQuint    : cubic-bezier(0.755, 0.050, 0.855, 0.060)
+$easeOutQuint   : cubic-bezier(0.230, 1.000, 0.320, 1.000)
+$easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000)
+
+// Sine
+$easeInSine     : cubic-bezier(0.470, 0.000, 0.745, 0.715)
+$easeOutSine    : cubic-bezier(0.390, 0.575, 0.565, 1.000)
+$easeInOutSine  : cubic-bezier(0.445, 0.050, 0.550, 0.950)
+
+// Back
+$easeInBack     : cubic-bezier(0.600, -0.280, 0.735, 0.045)
+$easeOutBack    : cubic-bezier(0.175,  0.885, 0.320, 1.275)
+$easeInOutBack  : cubic-bezier(0.680, -0.550, 0.265, 1.550)

data/app/assets/stylesheets/skeletor/globals/settings/_font_stacks.sass

@@ -0,0 +1,65 @@
+// =============================================================================
+//  Create variables for commonly used font stacks
+// =============================================================================
+
+
+// -----------------------------------------------------------------------------
+//  Times New Roman-based stack
+// -----------------------------------------------------------------------------
+$times: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Modern Georgia-based serif stack
+// -----------------------------------------------------------------------------
+$georgia: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Traditional Garamond-based serif stack
+// -----------------------------------------------------------------------------
+$garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Helvetica/Arial-based sans serif stack
+// -----------------------------------------------------------------------------
+$helvetica: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Verdana-based sans serif stack
+// -----------------------------------------------------------------------------
+$verdana: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Trebuchet-based sans serif stack
+// -----------------------------------------------------------------------------
+$trebuchet: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Impact-based sans serif stack
+// -----------------------------------------------------------------------------
+$impact: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif
+
+
+
+// -----------------------------------------------------------------------------
+//  Monospace stack
+// -----------------------------------------------------------------------------
+$monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace
+
+
+
+// -----------------------------------------------------------------------------
+//  Cursive Stack
+// -----------------------------------------------------------------------------
+$cursive: "Comic Sans", "Comic Sans MS", Chalkboard, ChalkboardSE-Regular, "Marker Felt", Purisa, "URW Chancery L", cursive

data/app/assets/stylesheets/skeletor/globals/settings/_html5_input_types.sass

@@ -0,0 +1,51 @@
+// =============================================================================
+//  HTML5 Input Types
+//
+//  Creates a variable for 'all text inputs' with a list of html5 input
+//  types that have a text-based input, excluding textarea.
+//  http://diveintohtml5.org/forms.html
+//
+//  You must use interpolation on these variables
+//  #{$all-text-inputs}
+//  #{$all-text-inputs-hover}
+//  #{$all-text-inputs-focus}
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Variable holder for html5 inputs
+// -----------------------------------------------------------------------------
+$inputs-list: 'input[type="email"]', 'input[type="number"]', 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', 'input[type="text"]', 'input[type="url"]', 'input[type="color"]', 'input[type="date"]', 'input[type="datetime"]', 'input[type="datetime-local"]', 'input[type="month"]', 'input[type="time"]', 'input[type="week"]'
+
+
+
+// -----------------------------------------------------------------------------
+//  Input Pseudo-class
+// -----------------------------------------------------------------------------
+$unquoted-inputs-list: ()
+@each $input-type in $inputs-list
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma)
+
+$all-text-inputs: $unquoted-inputs-list
+
+
+
+// -----------------------------------------------------------------------------
+//  Hover Pseudo-class
+// -----------------------------------------------------------------------------
+$all-text-inputs-hover: ()
+@each $input-type in $unquoted-inputs-list
+  $input-type-hover: $input-type + ":hover"
+  $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma)
+
+
+
+// -----------------------------------------------------------------------------
+//  Focus Pseudo-class
+// -----------------------------------------------------------------------------
+$all-text-inputs-focus: ()
+@each $input-type in $unquoted-inputs-list
+  $input-type-focus: $input-type + ":focus"
+  $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma)

data/app/assets/stylesheets/skeletor/layout/_grid.sass

@@ -0,0 +1,147 @@
+// Responsive Grid System
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  IMPORTS...........................Sass Imports
+//  VARIABLES.........................Grid Specific Variables
+//  GRID ELEMENTS.....................Base grid classes and sass placeholders
+//  GRID WIDTHS.......................Widths for grids and elements
+//  PUSH & PULL.......................Push & Pull classes
+//
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/mixins/media_query"
+@import "skeletor/globals/mixins/grid_widths", "skeletor/globals/mixins/grid_push", "skeletor/globals/mixins/grid_pull"
+@import "skeletor/globals/css3/prefixer", "skeletor/globals/css3/box_sizing"
+
+
+
+
+
+@if $grid
+  // -----------------------------------------------------------------------------
+  //  :: Variables
+  // -----------------------------------------------------------------------------
+  // Set class type to either CSS classes `.` || sass placeholder classes `%`
+  $class-type: unquote(".")
+
+  @if $use-silent-classes
+    $class-type: unquote("%")
+
+
+
+
+
+  // -----------------------------------------------------------------------------
+  //  :: GRID ELEMENTS
+  // -----------------------------------------------------------------------------
+  // - 1. Set font-size 0 for Inline-Block White Space Issue.  As per: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
+  // - 1.5. Alternative fix for Inline-Block White Space Issue (buggy?)
+  // - 2. Allow the grid system to be used on lists.
+  // - 3. Remove margin from grid
+  // - 4. Apply a negative `margin-left` to negate the columns' gutters.
+
+  #{$class-type}grid
+    // [1]
+    font-size: 0
+    // [1.5]
+    //letter-spacing: -0.31em
+    // [2]
+    list-style: none
+    // [3]
+    margin-bottom: 0
+    // [4]
+    margin-left: -$base-line-height
+    // [1.5]
+    //word-spacing: -0.43em
+
+
+  // Very infrequently occuring grid wrappers as children of grid wrappers.
+  // #{$class-type}grid > #{$class-type}grid { margin-left: 0; }
+
+  // - 1. Cause columns to stack side-by-side.
+  // - 2. Set font-size from reset above.
+  // - 2.5. Set letter and word spacing if reset above.
+  // - 3. Space columns apart.
+  // - 4. Align columns to the tops of each other.
+  // - 5. Full-width (mobile first) unless told to behave otherwise.
+  // - 6. Force box-sizing.  Required to combine fluid widths and fixed gutters.
+
+  #{$class-type}grid__item
+    // [1]
+    display: inline-block
+    // [2]
+    font-size: $base-font-size
+    // [2.5]
+    //letter-spacing: normal
+    // [3]
+    padding-left: $base-line-height
+    // [4]
+    vertical-align: top
+    // [5]
+    width: 100%
+    // [2.5]
+    //word-spacing: normal
+    @if $global-border-box == false
+      // [6]
+      +box-sizing(border-box)
+
+  // - Gutterless grids have all the properties of regular grids, minus any spacing.
+  // - Extends `.grid`.
+
+  #{$class-type}grid--full
+    @extend #{$class-type}grid
+    margin-left: 0
+
+    > #{$class-type}grid__item
+      padding-left: 0
+
+
+
+
+
+  // -----------------------------------------------------------------------------
+  //  :: GRID WIDTHS
+  // -----------------------------------------------------------------------------
+  // Generate regular, width classes
+  +skeletor-grid-widths($class-type)
+
+
+
+
+
+  // -----------------------------------------------------------------------------
+  //  :: PUSH & PULL
+  // -----------------------------------------------------------------------------
+  @if $push
+    @if $use-silent-classes == false
+      [class*="push--"]
+        position: relative
+    +skeletor-grid-push($class-type)
+
+  @if $pull
+    @if $use-silent-classes == false
+      [class*="pull--"]
+        position: relative
+    +skeletor-grid-pull($class-type)
+
+
+
+
+
+  // -----------------------------------------------------------------------------
+  //  :: RESPONSIVE GRIDS, PUSH, PULL
+  // -----------------------------------------------------------------------------
+  @if $responsive
+    @each $breakpoint in $breakpoints
+      +skeletor-media-query($breakpoint)
+        +skeletor-grid-widths($class-type, '#{$breakpoint}-')
+        @if $push
+          +skeletor-grid-push($class-type, '#{$breakpoint}-')
+        @if $pull
+          +skeletor-grid-pull($class-type, '#{$breakpoint}-')