skeletor_backbone 0.0.3

data/app/assets/stylesheets/skeletor/base/helpers.sass

@@ -0,0 +1,203 @@
+// Helper Classes
+// A series of helper classes to use arbitrarily. Only use a helper class if an
+// element/component doesn’t already have a class to which you could apply this
+// styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
+// that ruleset as opposed to adding the `.float--left` class to the markup.
+//
+// A lot of these classes carry `!important` as you will always want them to win
+// out over other selectors.
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  IMPORTS.......................Imported Sass Methods
+//  FLOATS........................Add & remove floats (right left none)
+//  TEXT ALIGNMENT................Text alignment (left right center)
+//  FONT WEIGHTS..................Font weights (light, normal semibold bold)
+//  SPACING.......................Margin and Padding classes
+//  IMAGE REPLACEMENT.............Image Replacement classes
+//  VISUALLY......................Visually show/hide elements
+//  MISC CLASSES..................Misc classes (muted, caps, ect)
+//  DEBUGGING.....................Debug classes for layout
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/mixins/accessibility"
+@import "skeletor/globals/mixins/media_query"
+@import "skeletor/globals/mixins/opacity"
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: FLOATS
+// -----------------------------------------------------------------------------
+.float--right
+  float: right !important
+.float--left
+  float: left !important
+.float--center
+  float: none
+  margin-left: auto
+  margin-right: auto
+.float--none
+  float: none !important
+
+.clear--right
+  clear: right !important
+.clear--left
+  clear: left !important
+.clear--both
+  clear: both !important
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: TEXT ALIGNMENT
+// -----------------------------------------------------------------------------
+.text--left
+  text-align: left  !important
+.text--center
+  text-align: center !important
+.text--right
+  text-align: right !important
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: FONT WEIGHTS
+// -----------------------------------------------------------------------------
+.weight--light
+  font-weight: 300 !important
+.weight--normal
+  font-weight: 400 !important
+.weight--semibold
+  font-weight: 600 !important
+.weight--bold
+  font-weight: 700 !important
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: SPACING
+// -----------------------------------------------------------------------------
+.margin--top
+  margin-top: 1rem !important
+.margin--right
+  margin-right: 1rem !important
+.margin--bottom
+  margin-bottom: 1rem !important
+.margin--left
+  margin-left: 1rem !important
+.margin--none
+  margin: 0 !important
+
+.padding--top
+  padding-top: 1rem !important
+.padding--right
+  padding-right: 1rem !important
+.padding--bottom
+  padding-bottom: 1rem !important
+.padding--left
+  padding-left: 1rem !important
+.padding--none
+  padding: 0 !important
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: IMAGE REPLACEMENT
+// -----------------------------------------------------------------------------
+.ir
+  border: 0
+  background-color: transparent
+  overflow: hidden
+
+  &:before
+    display: block
+    content: ""
+    height: 100%
+    width: 0
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: VISUALLY
+// -----------------------------------------------------------------------------
+// Show/Hide Classes
+.hide
+  display: none !important
+.show
+  display: block !important
+
+// Hide from both screenreaders and browsers
+.hidden
+  display: none !important
+  visibility: hidden !important
+
+// Hide visually and from screenreaders, but maintain layout
+.invisible
+  visibility: hidden !important
+
+// Hide content off-screen without resorting to `display: none;`, also provide
+// breakpoint specific hidden elements.
+.accessibility,
+.visuallyHidden
+  +skeletor-accessibility
+
+@if $responsive
+  @each $state in $breakpoints
+    +skeletor-media-query(#{$state})
+      .accessibility--#{$state},
+      .visuallyHidden--#{$state}
+        +skeletor-accessibility
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: MISC CLASSES
+// -----------------------------------------------------------------------------
+// Add a help cursor to any element that gives the user extra information on `:hover`.
+.informative, .info
+  cursor: help !important
+
+// Mute an object by reducing its opacity.
+.muted, .mute
+  +skeletor-opacity(0.5, !important)
+
+// Apply capital case to an element
+.capitalize, .caps
+  text-transform: uppercase !important
+
+// Add right-anggled quote to links that imply movement,
+.go:after
+  content: "\00A0" "\00BB" !important
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: DEBUGGING
+// -----------------------------------------------------------------------------
+.debug
+  outline: 1px dashed red
+.debug--blue
+  outline: 1px dashed blue
+.debug--green
+  outline: 1px dashed green

data/app/assets/stylesheets/skeletor/base/print.sass

@@ -0,0 +1,46 @@
+// Print Styles, Inlined to avoid required HTTP connection: h5bp.com/r
+
+@media print
+  *
+    background: transparent !important
+    // Black prints faster: h5bp.com/s
+    color: #000 !important
+    box-shadow: none !important
+    text-shadow: none !important
+
+  a, a:visited
+    text-decoration: underline
+
+  a[href]:after
+    content: " (" attr(href) ")"
+
+  abbr[title]:after
+    content: " (" attr(title) ")"
+
+  /* Don't show links for images, or javascript/internal links */
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after
+    content: ""
+
+  pre, blockquote
+    border: 1px solid #999
+    page-break-inside: avoid
+
+  thead
+    /* h5bp.com/t */
+    display: table-header-group
+
+  tr, img
+    page-break-inside: avoid
+
+  img
+    max-width: 100% !important
+
+  @page
+    margin: 0.5cm
+
+  p, h2, h3
+    orphans: 3
+    widows: 3
+
+  h2, h3
+    page-break-after: avoid

data/app/assets/stylesheets/skeletor/base/reset.sass

@@ -0,0 +1,125 @@
+// CSS Reset
+// A more conservative reset; more of a 'restart'
+// csswizardry.com/2011/10/reset-restarted
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  IMPORTS.....................Import Sass Settings and Functions
+//  VIEWPORT RESIZING...........Resize Viewport by browser
+//  BOX MODEL...................Make the box model nice
+//  STYLE RESETS................Reset Styles
+//
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/css3/prefixer"
+@import "skeletor/globals/css3/box_sizing"
+@import "skeletor/globals/css3/hyphens"
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: VIEWPORT RESIZING
+// -----------------------------------------------------------------------------
+@-webkit-viewport
+  width: device-width
+  zoom: 1.0
+
+@-moz-viewport
+  width: device-width
+  zoom: 1.0
+
+@-ms-viewport
+  width: device-width
+  zoom: 1.0
+
+@-o-viewport
+  width: device-width
+  zoom: 1.0
+
+@viewport
+  width: device-width
+  zoom: 1.0
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: BOX MODEL
+// -----------------------------------------------------------------------------
+@if $global-border-box
+  *, *:before, *:after
+    +skeletor-box-sizing(border-box)
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: Style Resets
+// -----------------------------------------------------------------------------
+// Reset some margin and padding
+h1,h2,h3,h4,h5,h6,
+p,blockquote,pre,
+dl,dd,ol,ul,
+form,fieldset,legend,
+table,th,td,caption,hr
+  margin: 0
+  padding: 0
+
+// Help cursor to abbr & dfn
+abbr[title], dfn[title], acronym
+  cursor: help
+
+abbr a
+  text-decoration: none
+
+acronym
+  text-transform: uppercase
+
+// Remove underlines from some troublesome elements.
+u, ins
+  text-decoration: none
+
+em, i, cite
+  font-style: italic
+
+// Apply faux underline
+ins
+  border-bottom: 1px solid
+
+details
+  cursor: pointer
+
+del
+  color: $darker-gray
+  text-decoration: line-through
+
+// So that `alt` text is visually offset if images don't load.
+img
+  font-style: italic
+
+// Give form elements some cursor interactions
+label, input, textarea,
+button, select, option
+  cursor: pointer
+
+input:active,
+input:focus,
+textarea:active,
+textarea:focus
+  cursor: text
+  outline: none
+
+// typography word break points
+caption, p, table, textarea, td, th
+  +skeletor-hyphens(auto)
+  -ms-word-break: break-all
+  word-break: break-all
+  word-break: break-word

data/app/assets/stylesheets/skeletor/globals/css3/_animation.sass

@@ -0,0 +1,34 @@
+// =============================================================================
+//  Animation
+//
+//  The animation property is used to call and control an '@keyframe' animation.
+//
+//  http://www.w3.org/TR/css3-animations/
+//  http://css-tricks.com/almanac/properties/a/animation/
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Animation
+// -----------------------------------------------------------------------------
+=skeletor-animation($args)
+  +skeletor-prefixer(animation, unquote($args))
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for animation classes
+// -----------------------------------------------------------------------------
+=s-animation($args)
+  +skeletor-animation($args)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =animation($args)
+//     +skeletor-animation($args)

data/app/assets/stylesheets/skeletor/globals/css3/_appearance.sass

@@ -0,0 +1,39 @@
+// =============================================================================
+//  Appearance
+//
+//  The appearance property is used to display an element using a platform-native
+//  styling based on the users operating systems theme.
+//
+//  Available As:
+//    +skeletor-appearance()
+//    +s-appearance()
+//
+//  http://www.w3.org/TR/css3-ui/#appearance
+//  http://css-tricks.com/almanac/properties/a/appearance/
+//
+// =============================================================================
+
+
+
+// -----------------------------------------------------------------------------
+//  Appearance
+// -----------------------------------------------------------------------------
+=skeletor-appearance($args)
+  +skeletor-prefixer(appearance, unquote($args))
+
+
+
+// -----------------------------------------------------------------------------
+//  Alias for appearance classes
+// -----------------------------------------------------------------------------
+=s-appearance($args)
+  +skeletor-appearance($args)
+
+
+
+// -----------------------------------------------------------------------------
+//  If no-conflict set to allow shorter mixin names
+// -----------------------------------------------------------------------------
+// @if $no-conflict
+//   =appearance($args)
+//     +skeletor-appearance($args)