2.0.0-a5

Beginning to covert fonts into relative units instead of absolute units, added some functions, added some mixins, blah blah...

README.md

@@ -1,5 +1,5 @@
-Skeleton SASS
-=============
+Skeleton SASS 2 α
+=======================
 
 Skeleton SASS is a "SASSification" of Dave Gamache's [Skeleton CSS](http://getskeleton.com) responsive front-end framework.
 
@@ -40,13 +40,11 @@ Skeleton SASS is organized into **three** major categories:
 3. Vanilla Sass Version
 	* Requires Sass 3.3.x
 
-### Requirements
-
-Both of these versions are organized the same exact way to ensure maximum usability:
-
-* Project organization needs updating
-
 ### File Overview
+* `skeleton_template.scss` houses **all** custom code.
+	* **Note:** this file name is meant to be changed. // add link to how to
+* `_MYconfig.scss` houses all of your global configuration (e.g. mixins, functions, variables, etc.)
+	* **Note:** this file name is meant to be changed. // add link to how to
 * `core`
 	* `_config.scss` houses all of the global configuration and variable options. Any change here will alter all flavors
 	* `_dependencies.scss` houses all of the logic behind the front-facing mixins (e.g. grid generation, conversion, etc.)
@@ -76,17 +74,20 @@ Both of these versions are organized the same exact way to ensure maximum usabil
 		* `_vars.scss` houses all flavor-specific variables
 
 ### Bower
-> Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat — bower.io
+> Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat — [bower.io](http://bower.io/)
+
+Install Skeleton Sass with bower via command line:
 
-For more info on bower, checkout [bower.io](http://bower.io/).
+	bower install skeleton-sass
 
-Skeleton Sass is now available on Bower because we want to make your life easier. You can now add Skeleton Sass to any project easily by issuing `bower install skeleton-sass`.
+You can also install alpha, beta, rc, and previous versions by looking at the [releases](https://github.com/atomicpages/skeleton-sass/releases) page and install with the following syntax:
+
+	bower install skeleton-sass#[tag]
+	bower install skeleton-sass#2.0.0-a4
 
 ### Demo
 Live demo can be seen here: [http://atomicpages.github.io/skeleton-sass](http://atomicpages.github.io/skeleton-sass). Be sure to resize your browser window and see the responsive goodness in action!
 
-Want to see spin on the default 16-column fixed-grid system? See the [demo here](http://atomicpages.github.io/skeleton-sass/demo.html)!
-
 ### Documentation
 Skeleton SASS is heavily documented! If you're looking for a detailed description (or just want more info) you can checkout the [wiki pages](https://github.com/atomicpages/skeleton-sass/wiki/_pages)!
 
@@ -119,6 +120,11 @@ Changelog
 * All of the different implementations of Skeleton Sass have been moved to the `flavors` folder
 * All core/shared files have been moved to the `core` folder.
 * Ability to choose between bourbon, compass, and vanilla sass by changing the preferred flavor in `skeleton.scss`
+* Added shell scripts to aid in setting up and upgrading Skeleton Sass for you *nix/OS X users who use command line.
+	* Batch scripts for Windows users coming soon
+	* Manual configuration documentation coming soon
+* Completely removed `layout.scss` and added predefined media queries to `skeleton_template.scss`
+
 
 Authors
 -------

_MYconfig.scss

@@ -1,11 +1,16 @@
-// This file is just a placeholder and not actually used. Please rename to _functions.scss
-// and write custom functions that you wish to be scoped globally across all flavors (except css)
-// This file can be used to override any and all mixins and functions. Please override variables in the project
-// directories in _vars.scss in any given flavor (except css).
-
-// Once file has been renamed to _functions.scss do the following:
-// 		1. Open _config.scss and scroll to the bottom
-//		2. Uncomment @import "functions"; to enable the use of custom code
-//		3. Enjoy!
-
-// @function myFunction() { }
+// This file stores all of your global project configuration options
+// and will not be wiped out by upgrading skeleton sass. Run the
+// setup.sh script from command line or follow the steps below
+// to manually configure:
+//
+// MANUAL CONFIGURATON
+// 1. Rename _MYconfig.scss to _[projectname].config.scss
+// 2. Rename skeleton_template.scss to skeleton.scss
+// 3. Navigate to core and edit _config.scss using your favorite
+//    text editor. Add the following to the end of _config.scss:
+//    @import " _[projectname].config.scss";
+//
+// HOW TO RUN AUTOMATED SETUP
+// 1. Open terminal and issue the following command:
+//    bin/setup.sh
+// 2. Follow prompts from script

bin/setup.sh

@@ -2,7 +2,7 @@
 
 cwd=${PWD##*/}
 
-if [ $cwd == "bin" ]; then
+if [[ $cwd = "bin" ]]; then
 	cd ../
 fi
 

bin/upgrade.sh

@@ -3,7 +3,7 @@
 echo "Upgrade utility working..."
 cwd=${PWD##*/}
 
-if [ $cwd == "bin" ]; then
+if [[ $cwd = "bin" ]]; then
 	cd ../
 fi
 

core/_config.scss

@@ -12,7 +12,7 @@ $use-percent: false; // use percentage as default unit?
 
 $use-px-fallback: true; // allow for pixel fall back
 
-$fontSize: 1.4rem;  // default font size. Change here will adjust sizes across the board.
+$fontSize: 14px;  // default font size. Change here will adjust sizes across the board.
 $fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; // default fonts
 $fontColor: #444;  // default font color
 
@@ -42,7 +42,7 @@ $isFluid: false; // want a fluid grid by default?
 
 // ------ CHANGE MAY CAUSE UNDESIRED RESULTS
 $baseColCount: 16; // number of cols to generate
-$baseFontSize: 16px;
+$baseFontSize: 10px;
 
 // media query dimensions
 $tabletWidth: 768px;

core/_dependencies.scss

@@ -171,9 +171,14 @@
 	@return $number;
 }
 
-// TODO once Compass 1.x becomes stable, this function will include substring searching
-// to determine the unit. If it's a percentage, then our equation changes.
-@function em($px, $base: $baseFontSize) {
+@function calcRU($px, $base, $unit) {
+	$unit: quote($unit);
+
+	@if not $unit == "em" or not $unit == "rem" or not $unit == "%" {
+		@debug "Invalid unit, choose 'em' or 'rem'";
+		@return null;
+	}
+
 	@if not unitless($px) {
 		$px: strip-units($px);
 	}
@@ -182,18 +187,24 @@
 		$base: strip-units($base);
 	}
 
-	@return ($px / $base) * 1em;
+	@if($unit == "%") {
+		@return percentage($px / $base);
+	}
+
+	@return ($px / $base) * 1#{$unit};
+}
+
+// TODO once Compass 1.x becomes stable, this function will include string slicing
+// to determine the unit. If it's a percentage, then our equation changes.
+@function em($px, $base: $baseFontSize) {
+	@return calcRU($px, $base, "em");
 }
 
 // TOOD create a more general function that both em and rem uses. Keep it DRY
 @function rem($px, $base: $baseFontSize) {
-	@if not unitless($px) {
-		$px: strip-units($px);
-	}
-
-	@if not unitless($base) {
-		$base: strip-units($base);
-	}
+	@return calcRU($px, $base, "rem");
+}
 
-	@return ($px / $base) * 1rem;
+@function percent($px, $base: $baseFontSize) {
+	@return calcRU($px, $base, "%");
 }

core/_mixins.scss

@@ -14,16 +14,27 @@
 	}
 }
 
-// mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ]  ] )
+// mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ] ] )
 @mixin mobileGrid($width: $baseWidth, $colCount: $baseColCount) {
 	@include _mobileGrid($width, $colCount);
 }
 
-@mixin getFontSize {
-	@if($use-rem == true) {
-		font-size: strip-units($fontSize)rem;
-		@if($use-px-fallback == true) {
-			font-size: (strip-units($fontSize) * 10);
+// font-size ( [ number $size, [ bool $fallback: true ] ] )
+@mixin font-size($size, $fallback: $use-px-fallback) {
+	@if($fallback == true) {
+		font-size: $size;
+	}
+
+	@if($use-rem == true and $use-em == false and $use-percent == false) {
+		font-size: rem($size);
+	} @elseif($use-em == true and $use-rem == false and $use-percent == false) {
+		font-size: em($size);
+	} @elseif($use-percent == true and $use-rem == false and $use-em == false) {
+		font-size: percent($size);
+	} @else {
+		@debug "More than one option is chosen for the default unit. Choose only one. Defaulting to px.";
+		@if($fallback == false) {
+			font-size: $size;
 		}
 	}
 }

core/flavors/_bourbon.scss

@@ -1,4 +1,3 @@
 @import "../../flavors/bourbon/vars";
 @import "../../flavors/bourbon/base";
 @import "../../flavors/bourbon/skeleton";
-@import "../../flavors/bourbon/layout";

core/flavors/_compass.scss

@@ -1,4 +1,3 @@
 @import "../../flavors/compass/vars";
 @import "../../flavors/compass/base";
 @import "../../flavors/compass/skeleton";
-@import "../../flavors/compass/layout";

core/flavors/_sass.scss

@@ -1,4 +1,3 @@
 @import "../../flavors/sass/vars";
 @import "../../flavors/sass/base";
 @import "../../flavors/sass/skeleton";
-@import "../../flavors/sass/layout";

flavors/compass/_base.scss

@@ -1,13 +1,4 @@
-/**
- * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid
- * originally authored by Dave Gamache. This translation offers
- * mixins that support fluid and as well as fixed grids to supplement
- * the work that Dave Gamache has done.
- * @author Dennis Thompson <http://www.atomicpages.net>
- * @copyright Copyright (c) 2013 AtomicPages LLC
- * @license MIT
- * @version 1.7.0
- */
+// Skeleton Sass base styles
 
 // IMPORTS
 @import "compass/css3";
@@ -20,15 +11,29 @@
 
 /* BASIC STYLES
  * ------------------------------------------------ */
+html {
+	font-size: percentage(strip-units($baseFontSize) / 16);
+	overflow-y: scroll;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	line-height: 1.2;
+}
+*,
+*:before,
+*:after {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
 body {
 	background: $backgroundColor;
 	font: {
-		size: $fontSize;
 		family: $fontFamily;
 		weight: normal;
 		style: normal;
 	}
-	line-height: $fontSize * 1.5;
+	@include font-size(14px);
+	line-height: $fontSize * 2.6;
 	color: $fontColor;
 	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
 	-webkit-text-size-adjust: 100%;
@@ -48,32 +53,32 @@ h4, h5, h6 {
 	a { font-weight: inherit; }
 }
 h1 {
-	font-size: round($fontSize * 3.8333);
-	line-height: round($fontSize * 4.1666);
-	margin-bottom: round($fontSize * 1.1666);
+	@include font-size($fontSize * 3.8333);
+	line-height: $fontSize * 4.1666;
+	margin-bottom: $fontSize * 1.1666;
 }
 h2 {
-	font-size: round($fontSize * 2.9166);
-	line-height: round($fontSize * 3.333);
-	margin-bottom: round($fontSize * 0.833);
+	@include font-size($fontSize * 2.9166);
+	line-height: $fontSize * 3.333;
+	margin-bottom: $fontSize * 0.833;
 }
 h3 {
-	font-size: round($fontSize * 2.333);
-	line-height: round($fontSize * 2.833);
-	margin-bottom: round($fontSize * 0.666);
+	@include font-size($fontSize * 2.333);
+	line-height: $fontSize * 2.833;
+	margin-bottom: $fontSize * 0.666;
 }
 h4 {
-	font-size: round($fontSize * 1.75);
-	line-height: round($fontSize * 2.5);
-	margin-bottom: round($fontSize * 0.333);
+	@include font-size($fontSize * 1.75);
+	line-height: $fontSize * 2.5;
+	margin-bottom: $fontSize * 0.333;
 }
 h5 {
-	font-size: round($fontSize * 1.4166);
+	@include font-size($fontSize * 1.4166);
 	line-height: $fontSize * 2;
 }
 h6 {
-	font-size: round($fontSize * 1.1666);
-	line-height: round($fontSize * 1.75);
+	@include font-size($fontSize * 1.1666);
+	line-height: $fontSize * 1.75;
 }
 .subheader { color: #777; }
 p {