skeletor_backbone 0.0.3

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

@@ -0,0 +1,38 @@
+// =============================================================================
+//  HIDPI
+//
+//  HiDPI mixin. Default value set to 1.3 to target Google Nexus 7
+//  http://bjango.com/articles/min-device-pixel-ratio/
+//
+//  Available As:
+//    +skeletor-hidpi()
+//    +s-hidpi()
+//
+// =============================================================================
+
+
+
+=skeletor-hidpi($ratio: 1.3)
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx)
+    @content
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for hidpi mixin
+// -----------------------------------------------------------------------------
+=s-hidpi($ratio: 1.3)
+  +skeletor-hidpi($ratio)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =hidpi($ratio: 1.3)
+//     +skeletor-hidpi($ratio)

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

@@ -0,0 +1,71 @@
+// =============================================================================
+//  Media Query
+//
+//  The media query mixin is used to easily add responsive design elements
+//  whenever needed in the css.
+//
+//  Available as:
+//    +skeletor-media-query()
+//    +s-media-query()
+//    +s-mq()
+//
+//  Example:
+//    +skeletor-media-query(palm)
+//      p
+//        font-size: 14px
+//
+// =============================================================================
+
+
+
+$palm-end: $lap-start - 1px
+$lap-end: $desk-start - 1px
+
+// -----------------------------------------------------------------------------
+//  Media Query
+// -----------------------------------------------------------------------------
+=skeletor-media-query($media)
+  @if $media == palm
+    @media only screen and (max-width: $palm-end)
+      @content
+
+  @if $media == lap
+    @media only screen and (min-width: $lap-start) and (max-width: $lap-end)
+      @content
+
+  @if $media == lap-and-up
+    @media only screen and (min-width: $lap-start)
+      @content
+
+  @if $media == portable
+    @media only screen and (max-width: $lap-end)
+      @content
+
+  @if $media == desk
+    @media only screen and (min-width: $desk-start)
+      @content
+
+  @if $media == desk-wide
+    @media only screen and (min-width: $desk-wide-start)
+      @content
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for media query mixin
+// -----------------------------------------------------------------------------
+=s-media-query($media)
+  +skeletor-media-query($media)
+    @content
+
+=s-mq($media)
+  +skeletor-media-query($media)
+    @content
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =media-query($media)
+//     +skeletor-media-query($media)
+//       @content

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

@@ -0,0 +1,36 @@
+// =============================================================================
+//  OPACITY
+//
+//  The opacity mixin is used to set the opacity level for all browsers
+//  including IE.
+//
+//  Available As:
+//    +skeletor-opacity()
+//    +s-opacity()
+//
+// =============================================================================
+
+
+// -----------------------------------------------------------------------------
+//  Media Query
+// -----------------------------------------------------------------------------
+=skeletor-opacity($opacity, $important: null)
+  opacity: $opacity $important
+  filter: alpha(opacity= $opacity * 100 ) $important
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for opacity mixin
+// -----------------------------------------------------------------------------
+=s-opacity($opacity, $important: null)
+  +skeletor-opacity($opacity, $important)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =opacity($opacity, $important: null)
+//     +skeletor-opacity($opacity, $important)

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

@@ -0,0 +1,65 @@
+// =============================================================================
+//  POSITION
+//
+//  The position mixin is used to easily set elements position, by providing
+//  the position type and location.
+//
+//  Available As:
+//    +skeletor-position()
+//    +s-position()
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Position
+// -----------------------------------------------------------------------------
+=skeletor-position($position: relative, $coordinates: 0 0 0 0)
+  @if type-of($position) == list
+    $coordinates: $position
+    $position: relative
+
+  $top: nth($coordinates, 1)
+  $right: nth($coordinates, 2)
+  $bottom: nth($coordinates, 3)
+  $left: nth($coordinates, 4)
+
+  position: $position
+
+  @if $top == auto
+    top: $top
+  @else if not(unitless($top))
+    top: $top
+
+  @if $right == auto
+    right: $right
+  @else if not(unitless($right))
+    right: $right
+
+  @if $bottom == auto
+    bottom: $bottom
+  @else if not(unitless($bottom))
+    bottom: $bottom
+
+  @if $left == auto
+    left: $left
+  @else if not(unitless($left))
+    left: $left
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for position mixin
+// -----------------------------------------------------------------------------
+=s-position($position: relative, $coordinates: 0 0 0 0)
+  +skeletor-position($position, $coordinates)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =position($position: relative, $coordinates: 0 0 0 0)
+//     +skeletor-position($position, $coordinates)

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

@@ -0,0 +1,102 @@
+// =============================================================================
+//  REM
+//
+//  The REM mixin will set the REM value with a pixel fallback for browsers
+//  that don't yet support rem.  Vertical Spacing and Fontsize are setup as
+//  shorthand for the REM mixin.  Vertical Spacing mixin uses the REM
+//  calculation to apply a rem `margin-bottom`.  Font Size mixin uses the REM
+//  calculation top apply a rem `font-size`.
+//
+//  TODO:
+//    REM should be able to accept multiple properties?  Should those multiple
+//    properties allow different values?
+//
+//  Available As:
+//    +skeletor-rem()
+//    +s-rem()
+//    +skeletor-vertical-spacing()
+//    +s-vertical-spacing()
+//    +s-vs()
+//    +skeletor-font-size()
+//    +s-font-size()
+//    +s-fs()
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  REM
+// -----------------------------------------------------------------------------
+=skeletor-rem($property, $values)
+  $px-values: ()
+  $rem-values: ()
+
+  @each $value in $values
+    @if type-of($value) == "number" and $value > 0
+      $new-rem: skeletor-calculate-rem($value)
+      $px-values: join($px-values, round($value))
+      $rem-values: join($rem-values, $new-rem)
+
+    @else if $value == 0 or $value == 0px
+      $px-values: join($px-values, 0)
+      $rem-values: join($rem-values, 0)
+
+    @else
+      $px-values: join($px-values, $value)
+      $rem-values: join($rem-values, $value)
+
+  // output the converted rules
+  #{$property}: $px-values
+  #{$property}: $rem-values
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for REM mixin
+// -----------------------------------------------------------------------------
+=s-rem($property, $values)
+  +skeletor-rem($property, $values)
+
+
+
+// -----------------------------------------------------------------------------
+//  Shorthand for rem vertical spacing (margin-bottom)
+// -----------------------------------------------------------------------------
+=skeletor-vertical-spacing($target)
+  +skeletor-rem(margin-bottom, $target)
+
+=s-vertical-spacing($target)
+  +skeletor-vertical-spacing($target)
+
+=s-vs($target)
+  +skeletor-vertical-spacing($target)
+
+
+// -----------------------------------------------------------------------------
+//  Shorthand for rem font-size
+// -----------------------------------------------------------------------------
+=skeletor-font-size($target, $line-height:false)
+  +skeletor-rem(font-size, $target)
+  @if $line-height
+    line-height: ($base-line-height / $target)
+
+=s-font-size($target, $line-height: false)
+  +skeletor-font-size($target, $line-height)
+
+=s-fs($target, $line-height: false)
+  +skeletor-font-size($target, $line-height)
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =rem($property, $values)
+//     +skeletor-rem($property, $values)
+
+//   =vertical-spacing($target)
+//     +skeletor-vertical-spacing($target)
+
+//   =font-size($target, $line-height: false)
+//     +skeletor-font-size($target, $line-height)

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

@@ -0,0 +1,53 @@
+// =============================================================================
+//  RETINA IMAGE
+//
+//  The retina image mixin will use a 'retina' image if available.
+//
+//  Available As:
+//    +skeletor-retina-image()
+//    +s-retina-image()
+//    +s-ri()
+//
+// =============================================================================
+
+
+
+@import "skeletor/globals/mixins/hidpi"
+
+// -----------------------------------------------------------------------------
+//  Retina Image
+// -----------------------------------------------------------------------------
+=skeletor-retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
+  @if $asset-pipeline
+    background-image: image-url("#{$filename}.#{$extension}")
+  @else
+    background-image:       url("#{$filename}.#{$extension}")
+
+  +skeletor-hidpi
+    @if $asset-pipeline
+      background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}")
+
+    @else {
+      background-image: url("#{$filename}#{$retina-suffix}.#{$extension}")
+
+    background-size: $background-size
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for retina image mixin
+// -----------------------------------------------------------------------------
+=s-retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
+  +skeletor-retina-image($filename, $background-size, $extension, $retina-suffix, $asset-pipeline)
+
+=s-ri($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
+  +skeletor-retina-image($filename, $background-size, $extension, $retina-suffix, $asset-pipeline)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $asset-pipeline: true)
+//     +skeletor-retina-image($filename, $background-size, $extension, $retina-suffix, $asset-pipeline)

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

@@ -0,0 +1,37 @@
+// =============================================================================
+//  RGBA MIXIN
+//
+//  The rgba mixin is used for generating rgba color with a rgb fallback for
+//  older browsers.
+//
+//  Available As:
+//    +skeletor-rgba()
+//    +s-rgba()
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  RGBA MIXIN
+// -----------------------------------------------------------------------------
+=skeletor-rgba($property, $red, $green, $blue, $alpha)
+  #{$property}: rgb($red, $green, $blue)
+  #{$property}: rgba($red, $green, $blue, $alpha)
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for rgba mixin
+// -----------------------------------------------------------------------------
+=s-rgba($property, $red, $green, $blue, $alpha)
+  +skeletor-rgba($property, $red, $green, $blue, $alpha)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =rgba($property, $red, $green, $blue, $alpha)
+//     +skeletor-rgba($property, $red, $green, $blue, $alpha)

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

@@ -0,0 +1,41 @@
+// =============================================================================
+//  Silent Relative
+//
+//  The silent relative mixin adds relative positioning into the 'silent'
+//  classes which can't take advantage of the `[class*="push--"]` and
+//  `[class*="pull--"]` selectors.  Primarily used in grid mixins.
+//
+//  Available As:
+//    +skeletor-silent-relative()
+//    +s-silent-relative()
+//    +s-sr()
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Silent Relative
+// -----------------------------------------------------------------------------
+=skeletor-silent-relative
+  @if $use-silent-classes
+    position: relative
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for silent relative mixin
+// -----------------------------------------------------------------------------
+=s-silent-relative
+  +skeletor-silent-relative
+
+=s-sr
+  +skeletor-silent-relative
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =silent-relative
+//     +skeletor-silent-relative