2.0.0-a1

First serious commit for the 2.x branch

bower.json

@@ -0,0 +1,20 @@
+{
+	"name": "skeleton-sass",
+	"version": "1.7.0",
+	"author": "Dennis Thompson",
+	"homepage": "http://atomicpages.github.io/skeleton-sass/",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/atomicpages/skeleton-sass.git"
+	},
+	"licenses": [
+		{
+			"type": "MIT",
+			"url": "http://opensource.org/licenses/MIT"
+		}
+	],
+	"ignore": [
+		"demo",
+		"flavors/sass/dev"
+	]
+}

core/_MYfunctions.scss

@@ -0,0 +1,11 @@
+// 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() { }

core/_config.scss

@@ -0,0 +1,50 @@
+// GLOBAL VARIABLES - include your variables here or alter the predefined vars
+// 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
+
+// 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
+
+// form vars
+$formFont: $fontFamily; 														// default font font
+
+// link vars
+$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
+
+// grid variables
+$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
+
+
+$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
+
+// media query dimensions
+$tabletWidth: 			768px;
+$mobilePortraitWidth: 	300px;
+$mobileLandscapeWidth: 	420px;
+
+// ------ IMPORTS. DO NOT CHANGE
+@import "dependencies";
+@import "mixins";
+// @import "functions";

core/_dependencies.scss

@@ -0,0 +1,172 @@
+// Core dependencies shared by all flavors (except css) are here. Any changes to these
+// dependencies will reflect on ALL flavors. Alter with discretion.
+
+// ---------- MIXIN DEPENDENCIES
+
+// _fluidGrid ( number $colCount )
+@mixin _fluidGrid($colCount) {
+	// override only for fluid
+	/* Overrides */
+	.container {
+		.column,
+		.columns {
+			margin: {
+				left: 1%;
+				right: 1%;
+			}
+		}
+	}
+	// Grid
+	.container {
+		@for $i from 1 through $colCount {
+			@if ( $i == 1 ) {
+				.#{numToString($i)}.column,
+				.#{numToString($i)}.columns { width: percentage( $i / $colCount ) - 2; }
+			} @else {
+				.#{numToString($i)}.columns { width: percentage( $i / $colCount ) - 2; }
+			}
+		}
+		$top: percentage( 16 / $colCount ) - 2;
+		.columns.one-third { width: $top * (1 / 3) - 2; }
+		.columns.two-thirds { width: $top * (2 / 3) - 2; }
+		// Offsets
+		@include _offset(true, $colCount, false);
+	}
+}
+
+// _fixedGrid ( number $width, number $colWidth, number $gutterWidth, number $colCount )
+@mixin _fixedGrid($width, $colWidth, $gutterWidth, $colCount) {
+	.container {
+		.column,
+		.columns {
+			margin: {
+				left: $gutterWidth / 2;
+				right: $gutterWidth / 2;
+			};
+		}
+	}
+	/* The Grid */
+	.container {
+		@for $i from 1 through $colCount {
+			 @if ( $i == 1 ) {
+				.#{numToString($i)}.column,
+				.#{numToString($i)}.columns { width: $colWidth; }
+			} @else {
+				.#{numToString($i)}.columns { width: $colWidth + ( ( $colWidth + $gutterWidth ) * ( $i - 1 ) ); }
+			}
+		}
+		.one-third.column { width: ( $width / 3 ) - 20}
+		.two-thirds.column { width: ( ( $width * 2 ) / 3 ) - 20 }
+		@include _offset(false, $colCount, $colWidth);
+	}
+}
+
+// _offset ( bool $isFluid, number $colCount, number $colWidth )
+@mixin _offset($isFluid, $colCount, $colWidth) {
+	@if ( $isFluid == true ) {
+		@for $i from 1 through ( $colCount - 1 ) {
+			.offset-by-#{numToString($i)} { padding-left: percentage( $i / $colCount ); }
+		}
+	} @else {
+		@for $i from 1 through ( $colCount - 1 ) {
+			.offset-by-#{numToString($i)} { padding-left: ( $colWidth + 20 ) * $i; }
+		}
+	}
+}
+
+// _mobileGrid ( number $width, number $colCount )
+@mixin _mobileGrid($width, $colCount) {
+	.container {
+		width: $width;
+		.column,
+		.columns {
+			// fixes https://github.com/atomicpages/skeleton-sass/issues/9
+			margin: {
+				left: 0;
+				right: 0;
+			};
+		}
+		@for $i from 1 through $colCount {
+			@if ($i == 1) {
+				.#{numToString($i)}.column { width: $width; }
+			}
+		}
+		@include _group($colCount, ".columns", "after") { width: $width; }
+		.one-third.column { width: $width; }
+		.two-thirds.column { width: $width; }
+		@include _mobileOffset($colCount);
+	}
+}
+
+// _mobileOffset ( number $colCount )
+@mixin _mobileOffset($colCount) {
+	@include _group($colCount - 1, "offset-by-") { padding-left: 0; }
+}
+
+// _group ( number $stop, string $selector, [ string $pos: "before" ] )
+@mixin _group($stop, $selector, $pos: "before") {
+	$store: "";
+	@if(type-of($stop) != "number") {
+		@warn "Stop must be a number! #{type-of($stop)} was provided.";
+	}
+	@if($pos == "after") {
+		@for $i from 1 through $stop {
+			$store: $store + "." + numToString($i) + $selector + ",";
+		}
+	} @else {
+		@for $i from 1 through $stop {
+			$store: $store + "." + $selector + numToString($i) + ",";
+		}
+	}
+	#{$store} {
+		@content;
+	}
+}
+
+// ---------- FUNCTION DEPENDENCIES
+
+// addresses https://github.com/nex3/sass/issues/533
+// number strip-units ( number $number )
+@function strip-units($number) {
+	@return $number / ($number * 0 + 1);
+}
+
+// Converts a number from 0 to 100 to the English word
+// string numToString ( number $int )
+@function numToString($int) {
+	// set up lists
+	$ones: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine";
+	$teens: "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen";
+	$tens: "", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety";
+
+	$int: abs($int); // no nonnegative numbers
+	$number: "";
+	$temp: $int / 10;
+	$temp: floor($temp);
+	@if($int >= 1 and $int <= 100) {
+		@if($temp < 1) { // it's a one!
+			$number: nth($ones, $int % 10);
+		}
+		@if($temp == 1) { // in the teen range
+			@if($int % 10 == 0) {
+				$number: "ten";
+			} @else {
+				$number: nth($teens, $int % 10);
+			}
+		}
+		@if($temp >= 2 and $temp <= 9) { // more than our teens
+			@if($int % 10 == 0) {
+				// means it's a number evenly divisible by 10
+				$number: nth($tens, $int / 10);
+			} @else {
+				$number: "#{nth($tens, floor($int / 10))}-#{nth($ones, $int % 10)}";
+			}
+		}
+		@if($temp == 10) { // this is the end...
+			$number: "one-hundred";
+		}
+	} @else {
+		$number: "Invalid parameter passed. Number must be between 1 and 100."
+	}
+	@return $number;
+}

core/_mixins.scss

@@ -0,0 +1,20 @@
+// Core mixins shared by all flavors (except css) are here. Any changes to these
+// mixins will reflect on ALL flavors. Alter with discretion.
+// Note: all logic for "private" mixins are in _dependencies.scss
+
+// grid ( [ number $width: 960px, [ bool $fluid: false, [  number $gutterWidth: 20px, [ number $colCount: 16 ] ] ] ] )
+@mixin grid($width: $baseWidth, $fluid: $isFluid, $gutterWidth: $baseGutterWidth, $colCount: $baseColCount) {
+	@if ( $fluid == true ) {
+		@include _fluidGrid($colCount);
+	} @else {
+		// we no longer need to set a value for $colWdith because it is generated dynamically right here!
+		// @see https://github.com/atomicpages/skeleton-sass/issues/7
+		$colWidth: ($width / $colCount) - $gutterWidth;
+		@include _fixedGrid($width, $colWidth, $gutterWidth, $colCount);
+	}
+}
+
+// mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ]  ] )
+@mixin mobileGrid($width: $baseWidth, $colCount: $baseColCount) {
+	@include _mobileGrid($width, $colCount);
+}

core/flavors/_bourbon.scss

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

core/flavors/_compass.scss

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

core/flavors/_sass.scss

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