skeletor_backbone 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 49be89ea9c13e6a90e337a01ec58014f1e9c76c8
-  data.tar.gz: 443e9b9c9b00fd2608236edc078705d3b3982827
+  metadata.gz: b248d88bea62a490633c35c76ce6044ba6acd8b5
+  data.tar.gz: e5bb985168d836ba863cce6930a8b102a2e23ece
 SHA512:
-  metadata.gz: 4c17da6e0327cea8ac37a2120369d84ee74f9cb9be45d22974b97a54b4205a826d1eaf256439d04db11fa3c3cf8bbea3cea7080f0fc937b44e7afa981f6a3e65
-  data.tar.gz: 3bac464952ec7566c9597165a857b1dd62ae3ef5bfea3c0d7339e4c4b299b7df5a474d259179bae6089e10d903d2c37f9089258df33bf436cf56d583e20aff47
+  metadata.gz: e247b657e52912c0f727f2583ae18dbe5487390517cdd227a9c5dc1d8ea8e4ec8d718dea237286a1d9a471ccba62d7b1c2c4a950ce9c2a1ab044619ba3272cb2
+  data.tar.gz: 6e5bd3e33ec9272c8318bcceeb96682733af9d76e114405a0bd37eefa679ea8345ad70b8ef57a4251a549384dd229ffabe5b0d66159f4de1fd4481228f8c9170

data/README.md

@@ -9,6 +9,9 @@ This project is currently in beta, I still have a list of features and some
 bugs I am working out.  I wanted to get this out in the wild in the hopes that
 people will provide feedback and report any issues I may have missed.
 
+I will be writing more thorough documentation on how to call and use the various mixins and functions.
+
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/app/assets/stylesheets/skeletor-preview.sass

@@ -0,0 +1,17 @@
+@charset "UTF-8"
+//
+// Skeletor Test CSS
+//    -> Manifest file used for testing Skeletor Preview pages.
+//
+
+@import "normalize"
+@import "skeletor/settings"
+@import "skeletor/core/reset"
+@import "skeletor/core/helpers"
+@import "skeletor/core/base"
+@import "skeletor/core/content"
+@import "skeletor/core/layout"
+@import "skeletor/modules"
+@import "skeletor/core/print"
+@import "skeletor/core/debug"
+@import "pesticide"

data/app/assets/stylesheets/skeletor.sass

@@ -1,21 +1,72 @@
-// Make sure charset is set appropriately
 @charset "UTF-8"
+//
+//  Skeletor
+//    -> Manifest file that is compiled into a single compressed file.
+//
+//  This project is built with SMACSS, MVCSS, and BEM in mind
+//  http://smacss.com/book/
+//  http://mvcss.github.io/
+//
+// =============================================================================
+//  Table of Contents
+// =============================================================================
+//
+//  CORE........................Styles/Classes for project
+//  INBOX.......................Temporary Style Location (to sort later)
+//  SHAME.......................Quick Fix, Hack, or Technique (to fix later)
+//
 
-// SMACSS 'Base' Structure
-@import "skeletor/base/reset"
-@import "skeletor/base/foundation"
 
-// SMACSS 'Layout' Structure
-@import "skeletor/layout/skeleton"
+// -----------------------------------------------------------------------------
+//  :: CORE
+// -----------------------------------------------------------------------------
 
-// SMACSS 'Modules' Structure
+// ----- Normalize - Cross browser consistency ----- //
+@import "normalize"
+
+// ----- Reset - A more conservative reset ----- //
+@import "skeletor/core/reset"
+
+// ----- Helpers - Extendable Global Classes ----- //
+@import "skeletor/core/helpers"
+
+// ----- Base - Base-level tags (defaults) ----- //
+@import "skeletor/core/base"
+
+// ----- Content - Base-level typography (colors, fonts, ect) ----- //
+@import "skeletor/core/content"
+
+// ----- Layout - Base-level layout (margin, padding, sizing, ect) ----- //
+@import "skeletor/core/layout"
+
+// ----- Modules - Styled page components ----- //
 @import "skeletor/modules"
 
-// Print Styles
-@import "skeletor/base/print"
+// ----- Print - Styles for print use ----- //
+@import "skeletor/core/print"
+
+// ----- Debugger - CSS debug elements 'automatically' ----- //
+@import "skeletor/core/debug"
+
+// ----- Pesticide Debugger - CSS Layout debugger ----- //
+@import "pesticide"
+
+
+
+// -----------------------------------------------------------------------------
+//  :: INBOX
+// -----------------------------------------------------------------------------
+// ----- The inbox allows developers, and those not actively working on the CSS,
+// to quickly add styles that are easily seen by the maintainer of the file.
+// Comment the code with your name and date.
+
+
+
+
 
-// CSS Global Helpers
-@import "skeletor/base/helpers"
+// -----------------------------------------------------------------------------
+//  :: SHAME
+// -----------------------------------------------------------------------------
+// ----- Need to add a quick fix, hack, or questionable technique?
+// Add it here, fix it later.  Comment the code with your name, date & reason.
 
-// CSS Debugger
-@import "skeletor/base/debug"

data/app/assets/stylesheets/skeletor/_css3.sass

@@ -8,19 +8,19 @@
 //
 // =============================================================================
 
-@import "globals/css3/prefixer"
-@import "globals/css3/flexbox"
-@import "globals/css3/box_sizing"
-@import "globals/css3/user_select"
-@import "globals/css3/tab_size"
-@import "globals/css3/hyphens"
-@import "globals/css3/appearance"
-@import "globals/css3/border_radius"
-@import "globals/css3/box_shadow"
-@import "globals/css3/text_shadow"
-@import "globals/css3/gradients"
-@import "globals/css3/transform"
-@import "globals/css3/perspective"
-@import "globals/css3/backface_visibility"
-@import "globals/css3/transition"
-@import "globals/css3/animation"
+@import "skeletor/globals/css3/prefixer"
+@import "skeletor/globals/css3/flexbox"
+@import "skeletor/globals/css3/box_sizing"
+@import "skeletor/globals/css3/user_select"
+@import "skeletor/globals/css3/tab_size"
+@import "skeletor/globals/css3/hyphens"
+@import "skeletor/globals/css3/appearance"
+@import "skeletor/globals/css3/border_radius"
+@import "skeletor/globals/css3/box_shadow"
+@import "skeletor/globals/css3/text_shadow"
+@import "skeletor/globals/css3/gradients"
+@import "skeletor/globals/css3/transform"
+@import "skeletor/globals/css3/perspective"
+@import "skeletor/globals/css3/backface_visibility"
+@import "skeletor/globals/css3/transition"
+@import "skeletor/globals/css3/animation"

data/app/assets/stylesheets/skeletor/_functions.sass

@@ -1,13 +1,13 @@
-// =============================================================================
-//  SASS Functions
+// Skeletor Functions
+//    -> SASS Function used throughout skeletor.
 //
 //  These functions are loading individually throughout skeletor.  To load all
 //  functions just load this functions.sass file.
 //
-// =============================================================================
+// -----------------------------------------------------------------------------
 
-@import "globals/functions/strip_units"
-@import "globals/functions/calculate_rem"
-@import "globals/functions/calculate_percent"
-@import "globals/functions/calculate_em"
-@import "globals/functions/calculate_modular_scale"
+@import "skeletor/globals/functions/strip_units"
+@import "skeletor/globals/functions/calculate_rem"
+@import "skeletor/globals/functions/calculate_percent"
+@import "skeletor/globals/functions/calculate_em"
+@import "skeletor/globals/functions/calculate_modular_scale"

data/app/assets/stylesheets/skeletor/_mixins.sass

@@ -1,23 +1,25 @@
-// =============================================================================
-//  SASS MIXINS
+//  Skeletor Mixins
+//    -> SASS Mixins used throughout skeletor.
 //
 //  These mixins are loading individually throughout skeletor.  To load all
 //  mixins just load this mixins.sass file.
 //
-// =============================================================================
+// -----------------------------------------------------------------------------
 
-@import "globals/mixins/media_query"
-@import "globals/mixins/silent_relative"
-@import "globals/mixins/rgba"
-@import "globals/mixins/grid_pull"
-@import "globals/mixins/grid_push"
-@import "globals/mixins/grid_widths"
-@import "globals/mixins/opacity"
-@import "globals/mixins/position"
-@import "globals/mixins/hidpi"
-@import "globals/mixins/retina_image"
-@import "globals/mixins/size"
-@import "globals/mixins/triangle"
-@import "globals/mixins/truncate_text"
-@import "globals/mixins/rem"
-@import "globals/mixins/accessibility"
+@import "skeletor/globals/mixins/media_query"
+@import "skeletor/globals/mixins/silent_relative"
+@import "skeletor/globals/mixins/rgba"
+@import "skeletor/globals/mixins/grid_pull"
+@import "skeletor/globals/mixins/grid_push"
+@import "skeletor/globals/mixins/grid_widths"
+@import "skeletor/globals/mixins/opacity"
+@import "skeletor/globals/mixins/position"
+@import "skeletor/globals/mixins/hidpi"
+@import "skeletor/globals/mixins/retina_image"
+@import "skeletor/globals/mixins/size"
+@import "skeletor/globals/mixins/triangle"
+@import "skeletor/globals/mixins/truncate_text"
+@import "skeletor/globals/mixins/rem"
+@import "skeletor/globals/mixins/font_size"
+@import "skeletor/globals/mixins/vertical_spacing"
+@import "skeletor/globals/mixins/accessibility"

data/app/assets/stylesheets/skeletor/_modules.sass

@@ -1,9 +1,7 @@
-// =============================================================================
-//  Modules
-//
-//  These modules are loaded as a whole through the main skeletor file.  You
-//  could also break them down and load only the modules you want.
-//
-// =============================================================================
+//  Skeletor Modules
+//    -> Import all neccesary modules/components
+// -----------------------------------------------------------------------------
 
-// TODO: Add commonly needed modules/components
+@import "skeletor/modules/rules"
+@import "skeletor/modules/tables"
+@import "skeletor/modules/forms"

data/app/assets/stylesheets/skeletor/_settings.sass

@@ -27,9 +27,13 @@
 //  :: SETTINGS
 // -----------------------------------------------------------------------------
 // DEBUG-MODE
-// Set to true if you would like to test your CSS/HTML
+// Set to true if you would like to test your CSS/HTML elements.
 $debug-mode: false !default
 
+// PESTICIDE DEBUG-MODE
+// Set to true if you would like to debug your CSS layout.
+$pesticide-debug: false !default
+
 // RESPONSIVE
 // Set to false if building a non-responsive site
 $responsive: true !default
@@ -54,10 +58,10 @@ $pull: false !default
 
 // Browser Support
 // Set to false to not support specific browsers
-$webkitSupport: true !default
-$firefoxSupport: true !default
-$explorerSupport: true !default
-$operaSupport: true !default
+$webkit-support: true !default
+$firefox-support: true !default
+$explorer-support: true !default
+$opera-support: true !default
 
 
 
@@ -121,9 +125,9 @@ $ms-base-size: $base-font-size !default
 $ms-round-pixels: false !default
 
 // Heading Sizes
-$tera-size: skeletor-modular-scale(8) !default
-$giga-size: skeletor-modular-scale(7) !default
-$mega-size: skeletor-modular-scale(6) !default
+$giga-size: skeletor-modular-scale(8) !default
+$mega-size: skeletor-modular-scale(7) !default
+$kilo-size: skeletor-modular-scale(6) !default
 
 $h1-size: skeletor-modular-scale(5) !default
 $h2-size: skeletor-modular-scale(4) !default
@@ -149,5 +153,8 @@ $lap-start: 481px !default
 $desk-start: 1024px !default
 $desk-wide-start: 1200px !default
 
+// Used to set the max-width for the site layout.
+$base-width: $desk-wide-start !default
+
 // Media Query Breakpoints
 $breakpoints: ("palm", "lap", "lap-and-up", "portable", "desk", "desk-wide") !default

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

@@ -1,27 +1,19 @@
-// Debug Styles
-// Enable this stylesheet to visually detect any improperly nested or potentially
-// invalid markup or inaccessible code.
+//  Skeletor Debugger
+//    -> Visually detect/debug invalid markup
 //
-//   * Red       == definite error
-//   * Yellow    == double-check
-//   * None      == should be fine
+//  Enable this stylesheet to visually detect any improperly nested or potentially
+//  invalid markup or inaccessible code.
 //
-// Please note that this method of checking markup quality should not be relied
-// upon entirely.  Validate your markup!
+//    * Red       == definite error
+//    * Yellow    == double-check
+//    * None      == should be fine
 //
-// =============================================================================
-// Table of Contents
-// =============================================================================
+//  Please note that this method of checking markup quality should not be relied
+//  upon entirely.  Validate your markup!
 //
-//  DEBUG.......................Debug Styles/Classes
-
-
+// -----------------------------------------------------------------------------
 
 @if $debug-mode
-  // ---------------------------------------------------------------------------
-  //  :: DEBUG
-  // ---------------------------------------------------------------------------
-
   /**
     * Are there any empty elements in your page? */
   \:empty

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

@@ -0,0 +1,142 @@
+//  Skeletor Helpers
+//    -> Common 'helper' classes and extensions
+//
+//  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,
+//
+//  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
+//  CLEARFIX......................Micro Clearfix hack
+//  VERTICAL RHYTHM...............Evenly set `margin-bottom`
+//  ELLIPSIS......................Ellipsis Class
+//  IMAGE REPLACEMENT.............Image Replacement classes
+//  VISUALLY......................Visually show/hide elements
+//  DEBUG.........................Debug classes for layout
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/mixins/vertical_spacing"
+@import "skeletor/globals/mixins/accessibility"
+@import "skeletor/globals/mixins/media_query"
+
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: CLEARFIX
+// -----------------------------------------------------------------------------
+//  Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+//  Extend the clearfix class with Sass to avoid classes appearing all over.
+%clearfix, .clearfix
+  &:after
+    clear: both
+    content: ''
+    display: table
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: 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)
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: ELLIPSIS
+// -----------------------------------------------------------------------------
+%ellipsis, .ellipsis
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: IMAGE REPLACEMENT
+// -----------------------------------------------------------------------------
+%ir, .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
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: DEBUG
+// -----------------------------------------------------------------------------
+.debugger
+  background-color: pink !important
+
+.debug
+  outline: 1px dashed red !important
+
+.debug--blue
+  outline-color: blue !important
+
+.debug--green
+  outline-color: green !important