2.0.0-a3

Changed some files, added some functions, updated the readme, and more.

README.md

@@ -31,15 +31,49 @@ If you have tried other SASS ports of Skeleton CSS you've probably seen a ports
 Skeleton SASS is organized into **three** major categories:
 
 1. [Compass Version](http://compass-style.org/)
+	* Requires Sass 3.2.x
+	* Compass 0.12.6
+		* **Note:** At the time of writing, Compass 0.12.x does *not* support Sass 3.3.x. Therefore, the dependency for Compass is Sass 3.2.x. There are alpha builds of Compass 1.x which *do* support Sass 3.3.x. However, we will wait until a stable release is out before making it a requirement.
 2. [Bourbon Version](http://bourbon.io/)
-3. Non-Compass Version
+	* Requires Sass 3.3.x
+	* Requires Bourbon 4.x
+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
-* Needs updating
+* `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.)
+	* `_mixins.scss` houses all of the global mixins that are shared between all flavors
+	* `_MYconfig.scss` houses all of your custom logic, functions, mixins, variables, etc. Simply change to another name (i.e. _projectname_config.sass) and import in `_config.scss`.
+	* `flavors`
+		* `_bourbon.scss` loads all the necessary files for the bourbon flavor to function
+		* `_compass.scss` loads all the necessary files for the compass flavor to function
+		* `_sass.scss` loads all the necessary files for the sass flavor to function
+* `flavors`
+	* `bourbon`
+		* `bourbon` houses the bourbon framework
+		* `deps` houses flavor-specific functionality
+		* `_base.scss` handles all of the base styles for skeleton
+		* `_bourbon.scss` houses all of the imports for bourbon
+		* `_skeleton.scss` houses the skeleton grid
+		* `_vars.scss` houses all flavor-specific variables
+	* `compass`
+		* `_base.scss` handles all of the base styles for skeleton
+		* `_skeleton.scss` houses the skeleton grid
+		* `_vars.scss` houses all flavor-specific variables
+	* `sass`
+		* `deps` houses flavor-specific functionality
+		* `dev` houses all development files for custom functions and mixins not yet released
+		* `_base.scss` handles all of the base styles for skeleton
+		* `_skeleton.scss` houses the skeleton grid
+		* `_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

core/_config.scss

@@ -2,49 +2,54 @@
 // See skeleton file for copyright info
 // Changes to these variables will alter ALL flavors EXCEPT css. If you wish to override for any given flavor, please edit the vars partial in that flavor.
 
-$library: "sass";																// Default library to use. Acceptable values are none, compass, or bourbon
-
 // background vars
-$backgroundColor: #fff; 														// default background information
+$backgroundColor: #fff; // default background information
 
 // font vars
-$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
+$use-rem: true; // use rem as default unit?
+$use-em: false; // use em as default unit?
+$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.
+$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; // default fonts
+$fontColor: #444;  // default font color
 
 // form vars
-$formFont: $fontFamily; 														// default font font
+$formFont: $fontFamily; // default font font
 
 // link vars
-$linkColor: #333;																// default link INERT color
-$linkHoverColor: #000;															// default link HOVER color
-$linkDecoration: underline;														// default link decoration
+$linkColor: #333; // default link INERT color
+$linkHoverColor: #000; // default link HOVER color
+$linkDecoration: underline; // default link decoration
 
 // heading vars
-$headingFamily: "Georgia", "Times New Roman", serif;							// default heading font
-$headingColor: #181818;															// default heading color
+$headingFamily: "Georgia", "Times New Roman", serif; // default heading font
+$headingColor: #181818; // default heading color
 
 // grid variables
-$baseWidth: 		960px; 														// change this to alter the overall width of the grid
+$baseWidth: 960px;  // change this to alter the overall width of the grid
 
 
 // DEPCREATED: will be removed in 2.0
-$baseWidthMQ:		960px;														// base width for media query calculations in layout file
+$baseWidthMQ: 960px; // base width for media query calculations in layout file
 
 
-$baseColWidth: 		40px;														// change this the alter the grid calculation, see _mixins file for more details
-$baseGutterWidth:	20px;														// calculation has changed, this is mainly here for consistency with 960.gs
-$isFluid: 			false;														// want a fluid grid by default?
+$baseColWidth: 40px; // change this the alter the grid calculation, see _mixins file for more details
+$baseGutterWidth:20px; // calculation has changed, this is mainly here for consistency with 960.gs
+$isFluid: false; // want a fluid grid by default?
 
 // ------ CHANGE MAY CAUSE UNDESIRED RESULTS
-$baseColCount: 		16;															// number of cols to generate
+$baseColCount: 16; // number of cols to generate
+$baseFontSize: 16px;
 
 // media query dimensions
-$tabletWidth: 			768px;
-$mobilePortraitWidth: 	300px;
-$mobileLandscapeWidth: 	420px;
+$tabletWidth: 768px;
+$mobilePortraitWidth: 300px;
+$mobileLandscapeWidth: 420px;
 
 // ------ IMPORTS. DO NOT CHANGE
 @import "dependencies";
 @import "mixins";
-// @import "functions";
+ // @import "MYconfig";

core/_dependencies.scss

@@ -170,3 +170,30 @@
 	}
 	@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) {
+	@if not unitless($px) {
+		$px: strip-units($px);
+	}
+
+	@if not unitless($base) {
+		$base: strip-units($base);
+	}
+
+	@return ($px / $base) * 1em;
+}
+
+// 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 ($px / $base) * 1rem;
+}

core/_mixins.scss

@@ -18,3 +18,12 @@
 @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);
+		}
+	}
+}