3.1.0-beta3

* Adding doc
* Removing some mixins

README.md

@@ -309,6 +309,7 @@ Changelog
     * Renaming `marrow` folders to `mixins`
     * Renaming `_skeleton.scss` to `_grid.scss`
 * Moving to [sassdoc](http://sassdoc.com/); no more manual documentation!
+* Removing graident support in theme mixins
 
 ### 3.0.3
 * Addressing issue #24

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "skeleton-sass",
-	"version": "3.1.0-beta2",
+	"version": "3.1.0-beta3",
 	"author": "Dennis Thompson",
 	"homepage": "http://atomicpages.github.io/skeleton-sass/",
 	"repository": {

gulpfile.js

@@ -5,7 +5,7 @@ const sassdoc = require('sassdoc');
 const sourcemaps = require('gulp-sourcemaps');
 
 gulp.task('clean', function () {
-    del('sassdoc');
+    del('docs');
     return del('main.css*');
 });
 
@@ -20,12 +20,14 @@ gulp.task('sass', ['clean'], function () {
 gulp.task('doc', function () {
     return gulp.src('skeleton/**/*.scss')
         .pipe(sassdoc({
+            dest: './docs',
             display: {
                 alias: true,
                 watermark: true
             },
             groups: {
-                core: 'Core'
+                core: 'Core API',
+                theme: 'Theme API'
             }
         }));
 });

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "skeleton-sass-official",
-	"version": "3.1.0-beta2",
+	"version": "3.1.0-beta3",
 	"description": "Skeleton Sass is a highly modular version of Skeleton CSS",
 	"main": "skeleton/core/_config.scss",
 	"scripts": {

skeleton/core/_functions.scss

@@ -2,29 +2,51 @@
 
 @import "dependencies";
 
-// addresses https://github.com/nex3/sass/issues/533
-// number strip-units ( number $number )
+/// Strips the units from strings
+/// @param {string|number} $number - The number to remove units from.
+/// @return {number} Unitless number.
+/// @group core
+/// @access public
+/// @link https://github.com/nex3/sass/issues/533
 @function strip-units($number) {
 	@return $number / ($number * 0 + 1);
 }
 
-// to determine the unit. If it's a percentage, then our equation changes.
-// number em ( number $px, [ number $base: $base-font-size ] )
+/// Takes in an absolute unit and gives back a relative one.
+/// @param {number} $px - A absolute unit.
+/// @param {number} $base [ $base-font-size ] - The base font size to calculate with.
+/// @return {number} Realtive `em` unit.
+/// @group core
+/// @access public
 @function em($px, $base: $base-font-size) {
 	@return _calcRU($px, $base, "em");
 }
 
-// number rem ( number $px, [ number $base: $base-font-size ] )
+/// Takes in an absolute unit and gives back a relative one.
+/// @param {number} $px - A absolute unit.
+/// @param {number} $base [ $base-font-size ] - The base font size to calculate with.
+/// @return {number} Realtive `rem` unit.
+/// @group core
+/// @access public
 @function rem($px, $base: $base-font-size) {
 	@return _calcRU($px, $base, "rem");
 }
 
-// number percent ( number $px, [ number $base: $base-font-size ] )
+/// Takes in an absolute unit and gives back a relative one.
+/// @param {number} $px - A absolute unit.
+/// @param {number} $base [ $base-font-size ] - The base font size to calculate with.
+/// @return {number} Realtive `%` unit.
+/// @group core
+/// @access public
 @function percent($px, $base: $base-font-size) {
 	@return _calcRU($px, $base, "%");
 }
 
-// number relative ( number $size )
+/// Takes in an absolute unit and gives back a relative one.
+/// @param {number} $size - A absolute unit.
+/// @group core
+/// @access public
+/// @return {number} A relative unit based on the values of `$use-rem`, `$use-em`, and `$use-percent`.
 @function relative($size) {
 	@if($use-rem == true and $use-em == false and $use-percent == false) {
 		@return rem($size);
@@ -37,7 +59,11 @@
 	@return $size; // we're still using pixels
 }
 
-// list triad ( color $color )
+/// Takes in a color and provides a list of triad-compatible colors.
+/// @param {color} $color - The color to calculate traid colors for.
+/// @return {list} A list of triad colors.
+/// @group core
+/// @access public
 @function triad($color) {
 	@if(type-of($color) != "color") {
 		@warn "Type must be color to continue. Aborting.";
@@ -60,7 +86,11 @@
 	@return $triad;
 }
 
-// list square ( color $color )
+/// Takes in a color and provides a list of square-compatible colors.
+/// @param {color} $color - The color to calculate traid colors for.
+/// @return {list} A list of square colors.
+/// @group core
+/// @access public
 @function square($color) {
 	@if(type-of($color) != "color") {
 		@warn "Type must be color to continue. Aborting.";

skeleton/core/_mixins.scss

@@ -1,7 +1,13 @@
 // Core mixins with global scope.
 // Note: all logic for private mixins are in _dependencies.scss
 
-// grid ( [ number $width: 960px, [ boolean $fluid: false, [  number $gutterWidth: 20px, [ number $colCount: 16 ] ] ] ] )
+/// Creates the grid
+/// @param {number} $width [ $base-width ] - The with of the grid as defined in `.container`
+/// @param {bool} $fluid [ $is-fluid ] - Set true to generate a fluid grid.
+/// @param {number} $gutterWidth [ $base-gutter-width ] - Adjusts the gutter width.
+/// @param {number} $colCount [ $base-col-count ] - Adjusts the number of columns to generate.
+/// @group core
+/// @access public
 @mixin grid($width: $base-width, $fluid: $is-fluid, $gutterWidth: $base-gutter-width, $colCount: $base-col-count) {
 	@if($fluid) {
 		@include _fluidGrid($colCount, $new: $use-new-grid);
@@ -13,12 +19,21 @@
 	}
 }
 
-// mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ] ] )
+/// Creates the mobile grid.
+/// @param {number} $width [ $base-width ] - The with of the grid as defined in `.container`
+/// @param {bool} $fluid [ $is-fluid ] - Set true to generate a fluid grid.
+/// @param {number} $colCount [ $base-col-count ] - Adjusts the number of columns to generate.
+/// @group core
+/// @access public
 @mixin mobileGrid($width: $base-width, $isFluid: $is-fluid, $colCount: $base-col-count) {
 	@include _mobileGrid($width, $colCount, $isFluid);
 }
 
-// font-size ( [ number $size, [ boolean $fallback: true ] ] )
+/// Calculates the font-size automatically based on config settings.
+/// @param {number} $size - The font size to convert.
+/// @param {bool} $fallback [ $use-px-fallback ] - Set true to fallback to px for legacy browsers.
+/// @group core
+/// @access public
 @mixin font-size($size, $fallback: $use-px-fallback) {
 	@if($fallback) {
 		font-size: $size;
@@ -38,7 +53,9 @@
 	}
 }
 
-// hide-text ( )
+/// Helper mixin to easily hide text.
+/// @group core
+/// @access public
 @mixin hide-text {
 	text-indent: 100%;
 	white-space: nowrap;

skeleton/themes/fresh/_vars.scss

@@ -3,9 +3,9 @@
 // stored in the marrow folder, but to also create project-level
 // variables.
 
-@import "mixins/mixins";
+@import "../original/mixins/private";
+@import "../original/mixins/public";
 
-// Yep, taken right from bourbon - https://github.com/thoughtbot/bourbon/blob/master/dist/settings/_prefixer.scss
 $prefix-for-webkit:    true !default;
 $prefix-for-mozilla:   true !default;
 $prefix-for-microsoft: true !default;

skeleton/themes/original/mixins/_private.scss

@@ -1,74 +1,15 @@
-// Private mixins scoped at the theme level. Change with discretion.
+// Private mixins scoped at the theme level
 
 // ---------- MIXIN DEPENDENCIES
+
+/// Sets prefixes for border-radius
+/// @param {string} $vert - The vertical direction of the border radius.
+/// @param {string} $horiz - The horizontal direction of the border radius.
+/// @param {number} $radius - The radius to set.
+/// @group theme
+/// @access private
 @mixin _bd($vert, $horiz, $radius) {
 	-webkit-border-#{$vert}-#{$horiz}-radius: $radius;
 	-moz-border-radius-#{$vert}#{$horiz}: $radius;
 	border-#{$vert}-#{$horiz}-radius: $radius;
 }
-
-// _buildRadialGradient ( mixed $start, mixed $stop, boolean $ie )
-@mixin _buildRadialGradient($start, $stop, $ie) {
-	// TODO: needs multiple stop support
-	// TODO: needs center adjustment support
-
-	@if type-of($start) != "list" {
-		$start: append($start, 0%, space);
-	}
-
-	@if type-of($stop) != "list" {
-		$stop: append($stop, 100%, space);
-	}
-
-	background: nth($start, 1);
-	background: -moz-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
-	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(nth($start, 2), nth($start, 1)), color-stop(nth($stop, 2), nth($stop, 1)));
-	background: -webkit-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
-	background: -o-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
-	background: -ms-radial-gradient(center, ellipse cover, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
-	background: radial-gradient(ellipse at center, nth($start, 1) nth($start, 2), nth($stop, 1) nth($stop, 2));
-
-	@if($ie) {
-		@include filter-gradient($start, $stop, 1);
-	}
-}
-
-// needs multiple stop support
-// _buildGradient ( string $direction, list $start, list $stop, boolean $ie )
-@mixin _buildGradient($direction, $start, $stop, $ie) {
-	$direction: unquote($direction);
-	$webkitGradientDirection: "";
-	$linearGradientDirection: "";
-	$ieDirection: 0;
-
-	@if($direction == left or $direction == horizontal) {
-		$webkitGradientDirection: linear, left top, right top;
-		$linearGradientDirection: to right;
-		$ieDirection: 1;
-	} @else if($direction == top or $direction == vertical) {
-		$webkitGradientDirection: linear, left top, left bottom;
-		$linearGradientDirection: to bottom;
-	} @else if($direction == left top) {
-		$direction: -45deg;
-		$webkitGradientDirection: linear, left top, right bottom;
-		$linearGradientDirection: 135deg;
-		$ieDirection: 1;
-	} @else if($direction == left bottom) {
-		$direction: 45deg;
-		$webkitGradientDirection: linear, left bottom, right top;
-		$linearGradientDirection: $direction;
-		$ieDirection: 1;
-	}
-
-	background: nth($start, 1);
-	background: -moz-linear-gradient($direction, $start, $stop);
-	background: -webkit-gradient($webkitGradientDirection, color-stop(nth($start, 1), nth($start, 2)), color-stop(nth($stop, 1), nth($stop, 2)));
-	background: -webkit-linear-gradient($direction, $start, $stop);
-	background: -o-linear-gradient($direction, $start, $stop);
-	background: -ms-linear-gradient($direction, $start, $stop);
-	background: linear-gradient($linearGradientDirection, $start, $stop);
-
-	@if($ie) {
-		@include filter-gradient(nth($start, 1), nth($stop, 1), $ieDirection);
-	}
-}