skeletor_backbone 0.0.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b2c2f93a6aa37c885350f30bb263f347415361f8
+  data.tar.gz: d5355975ce8559810869fb97167b17b67a5eee8f
+SHA512:
+  metadata.gz: 5d3d9dc5a827a1c13924f7cf4c60cb555b463325f8470ebf355b6da1c83c7fbd714453d0abc64144b50ecd641ab3df1f5ce0f2b511cfdf98bc0c282621e416a6
+  data.tar.gz: 86a5f3fa40e1899e6f4046f7ce8f9d775f23cd157a37097bea37944e9fe45d855840843a83ce12fb73b73b69edfc2f418a74cdd32deb17dd74a2c111579c9825

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in skeletor_backbone.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Mike Reinmiller
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,43 @@
+# Skeletor Backbone
+
+The goal of Skeletor is to provide a small unobtrusive CSS framework.  This project
+is an excellent starting point to help get new applications off the ground
+quickly.  It uses recommended styles and best practices from around the web.
+
+#### Please Note
+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.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'skeletor_backbone'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install skeletor_backbone
+
+## Usage
+
+After Skeletor has been added to your Gemfile you can install it into your project by running:
+
+```
+rails g skeletor:install
+```
+
+This will create a skeletor settings file in your stylesheets directory.  It will
+also add the appropriate requirements to your application.css file.
+
+## Contributing
+
+1. Fork it ( http://github.com/<my-github-username>/skeletor_backbone/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/stylesheets/skeletor.sass

@@ -0,0 +1,21 @@
+// Make sure charset is set appropriately
+@charset "UTF-8"
+
+// SMACSS 'Base' Structure
+@import "skeletor/base/reset"
+@import "skeletor/base/foundation"
+
+// SMACSS 'Layout' Structure
+@import "skeletor/layout/skeleton"
+
+// SMACSS 'Modules' Structure
+// TODO: Add commonly needed modules/components
+
+// Print Styles
+@import "skeletor/base/print"
+
+// CSS Global Helpers
+@import "skeletor/base/helpers"
+
+// CSS Debugger
+@import "skeletor/base/debug"

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

@@ -0,0 +1,5 @@
+// Imports All Variables, All Functions, and All Mixins
+@import "settings"
+@import "functions"
+@import "mixins"
+@import "css3"

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

@@ -0,0 +1,26 @@
+// =============================================================================
+//  SASS CSS3 MIXINS
+//
+//  These mixins are some common css3 properties with the appropriate
+//  browser prefixes (see prefixer)
+//
+//  Based on work by Bourbon/Thoughtbox and Matthew Wagerfield
+//
+// =============================================================================
+
+@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"

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

@@ -0,0 +1,13 @@
+// =============================================================================
+//  SASS Functions
+//
+//  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"

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

@@ -0,0 +1,23 @@
+// =============================================================================
+//  SASS MIXINS
+//
+//  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"

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

@@ -0,0 +1,153 @@
+// Skeletor Variables & Settings
+// Config file containing variable defaults and settings for the skeletor gem.
+//
+// =============================================================================
+//  Table of Contents
+// =============================================================================
+//
+//  IMPORTS.....................Import Additional SASS Settings
+//  SETTINGS....................Enable/Disable Skeletor Features
+//  COLORS......................Base Color Styles
+//  TYPOGRAPHY..................Font Families
+//  SIZES.......................Font sizes, including Modular Scale
+//  BREAKPOINTS.................Responsive Breakpoint Settings
+//
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/settings/font_stacks"
+@import "skeletor/globals/settings/html5_input_types"
+@import "skeletor/functions"
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: SETTINGS
+// -----------------------------------------------------------------------------
+// DEBUG-MODE
+// Set to true if you would like to test your CSS/HTML
+$debug-mode: false !default
+
+// RESPONSIVE
+// Set to false if building a non-responsive site
+$responsive: true !default
+
+// BORDER-BOX - paulirish.com/2012/box-sizing-border-box-ftw
+// Set to false to disable border-box (this will still be enabled on grid system)
+$global-border-box: true !default
+
+// SASS CLASS STYLE
+// Set to false if you do not want to use the Sass 'silent' class types
+$use-silent-classes: true !default
+
+// GRID SYSTEM
+// Set to false if you do not intend to use the grid system.
+$grid: true !default
+
+// PUSH && PULL
+// Set to true if you would like push and pull classes enabled
+// These produce a lot of code, make sure you actually need them
+$push: false !default
+$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
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: COLORS
+// -----------------------------------------------------------------------------
+// Grayscale
+$black: #222 !default
+$darkest-gray: #444 !default
+$darker-gray: #777 !default
+$dark-gray: #aaa !default
+$gray: #ccc !default
+$light-gray: #dedede !default
+$lighter-gray: #efefef !default
+$lightest-gray: #f8f8f8 !default
+$white: #fff !default
+
+// Base Font Colors
+$base-font-color: $darkest-gray !default
+$header-font-color: $base-font-color !default
+
+// Base Link Colors
+$base-link-color: #477DCA !default
+$hover-link-color: darken($base-link-color, 15%) !default
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: TYPOGRAPHY
+// -----------------------------------------------------------------------------
+$sans-serif: $verdana !default
+$serif: $georgia !default
+
+$base-font-family: $sans-serif !default
+$header-font-family: $base-font-family !default
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: SIZES
+// -----------------------------------------------------------------------------
+$base-font-size: 16px !default
+$base-line-height: $base-font-size * 1.5 !default
+
+// http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
+$line-height-ratio: $base-line-height / $base-font-size !default
+
+// Set the Modular Scale Ratio calculation
+$ms-ratio: major_third() !default
+
+// Set the Base font size for the modular scale
+$ms-base-size: $base-font-size !default
+
+// Set to true if modular scale pixel calculations should be rounded
+$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
+
+$h1-size: skeletor-modular-scale(5) !default
+$h2-size: skeletor-modular-scale(4) !default
+$h3-size: skeletor-modular-scale(3) !default
+$h4-size: skeletor-modular-scale(2) !default
+$h5-size: skeletor-modular-scale(1) !default
+$h6-size: skeletor-modular-scale(0) !default
+
+$micro-size: skeletor-modular-scale(-1) !default
+$nano-size: skeletor-modular-scale(-2) !default
+$pico-size: skeletor-modular-scale(-3) !default
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: BREAKPOINTS
+// -----------------------------------------------------------------------------
+
+// Other breakpoints for palm, lap-and-up, portable are calculated in media-query mixin
+$lap-start: 481px !default
+$desk-start: 1024px !default
+$desk-wide-start: 1200px !default
+
+// Media Query Breakpoints
+$breakpoints: ("palm", "lap", "lap-and-up", "portable", "desk", "desk-wide") !default

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

@@ -0,0 +1,132 @@
+// Debug Styles
+// Enable this stylesheet to visually detect any improperly nested or potentially
+// invalid markup or inaccessible code.
+//
+//   * Red       == definite error
+//   * Yellow    == double-check
+//   * None      == should be fine
+//
+// Please note that this method of checking markup quality should not be relied
+// upon entirely.  Validate your markup!
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  DEBUG.......................Debug Styles/Classes
+
+
+
+@if $debug-mode
+  // ---------------------------------------------------------------------------
+  //  :: DEBUG
+  // ---------------------------------------------------------------------------
+
+  /**
+    * Are there any empty elements in your page? */
+  \:empty
+    outline: 5px solid yellow
+
+  /**
+    * Images require `alt` attributes, empty `alt`s are fine but should be
+    * double-checked, no `alt` is bad and is flagged red. */
+  img
+    outline: 5px solid red
+
+  img[alt]
+    outline: none
+
+  img[alt=""]
+    outline: 5px solid yellow
+
+  /**
+    * Links sometimes, though not always, benefit from `title` attributes. Links
+    * without are never invalid but it’s a good idea to check. */
+  a
+    outline: 5px solid yellow
+
+  a[title]
+    outline: none
+
+  /**
+    * Double-check any links whose `href` is something questionable. */
+  a[href=""],
+  a[href="#"],
+  a[href*="javascript"]
+    outline: 5px solid yellow
+
+  /**
+    * The `target` attribute ain’t too nice... */
+  a[target]
+    outline: 5px solid yellow
+
+  /**
+    * Ensure any lists only contain `li`s as children. */
+  ul,
+  ol
+    > *:not(li)
+      outline: 5px solid red
+
+  /**
+    * It’s always nice to give `th`s `scope` attributes. */
+  th
+    outline: 5px solid yellow
+
+  th[scope]
+    outline: none
+
+  /**
+    * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`? */
+  table > tr
+    outline: 5px solid yellow
+
+  /**
+    * `tfoot` needs to come *before* `tbody`. */
+  tbody + tfoot
+    outline: 5px solid yellow
+
+  /**
+    * Forms require `action` attributes */
+  form
+    outline: 5px solid red
+
+  form[action]
+    outline: none
+
+  /**
+    * Various form-field types have required attributes. `input`s need `type`
+    * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
+    * need a `value` attribute. */
+  textarea,
+  input
+    outline: 5px solid red
+
+  input[type]
+    outline: none
+
+  textarea[rows][cols]
+    outline: none
+
+  input[type=submit]
+    outline: 5px solid red
+
+  input[type=submit][value]
+    outline: none
+
+  /**
+    * Avoid inline styles where possible. */
+  [style]
+    outline: 5px solid yellow
+
+  /**
+    * You should avoid using IDs for CSS, is this doing any styling? */
+  [id]
+    outline: 5px solid yellow
+
+  /**
+    * Are you using the grid system correctly? */
+  //.gw > :not(.g),
+  //.grid-wrapper > :not(.grid),
+  //.gw--rev > :not(.g),
+  //.grid-wrapper--rev > :not(.grid)
+  //  outline:5px solid red