3.1.0-beta2

* Adding sassdoc

.gitignore

@@ -6,3 +6,4 @@ bower_components/
 .editorconfig
 main.scss
 index.html
+sassdoc/

README.md

@@ -66,7 +66,7 @@ Inside of `skeleton.scss` we need to add our components:
 @import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/vars"; // theme variable overrides
 
 // import default theme styles
-@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/include\_components"; // theme base styles
+@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/include_components"; // theme base styles
 @import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/grid"; // theme grid styles
 ~~~
 
@@ -85,7 +85,7 @@ my_project
             ├── _loader.scss 	# Contains all of the imports
             └── my_theme
                 ├── _grid.scss # Theme grid, replaces shipped grids
-                ├── \_include_components.scss # Includes all of the components in the components folder
+                ├── _include_components.scss # Includes all of the components in the components folder
                 ├── _vars.scss # Theme-scoped variables and overrides
                 ├── components
                 │   ├── _base.scss # Default html and body styles
@@ -185,7 +185,7 @@ skeleton/ # Where all of the magic happens
 └── themes # Where all of the themes live
     ├── fresh
     │   ├── _grid.scss
-    │   ├── \_include_components.scss # partial to import all of the components
+    │   ├── _include_components.scss # partial to import all of the components
     │   ├── _vars.scss # Project-scoped configuration options and variables
     │   ├── components
     │   │   ├── _base.scss
@@ -202,7 +202,7 @@ skeleton/ # Where all of the magic happens
     │       └── _mixins.scss
     ├── original
     │   ├── _grid.scss
-    │   ├── \_include_components.scss # partial to import all of the components
+    │   ├── _include_components.scss # partial to import all of the components
     │   ├── _vars.scss # Project-scoped configuration options and variables
     │   ├── components
     │   │   ├── _base.scss
@@ -217,7 +217,7 @@ skeleton/ # Where all of the magic happens
     │       └── _public.scss
     └── wing
         ├── _grid.scss
-        ├── \_include_components.scss # partial to import all of the components
+        ├── _include_components.scss # partial to import all of the components
         ├── _vars.scss # Project-scoped configuration options and variables
         └── components
             ├── _base.scss
@@ -308,6 +308,7 @@ Changelog
     * Renaming `sphenoid` theme to `original`
     * Renaming `marrow` folders to `mixins`
     * Renaming `_skeleton.scss` to `_grid.scss`
+* Moving to [sassdoc](http://sassdoc.com/); no more manual documentation!
 
 ### 3.0.3
 * Addressing issue #24

bower.json

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

gulpfile.js

@@ -1,9 +1,11 @@
 const gulp = require('gulp');
 const sass = require('gulp-sass');
 const del = require('del');
+const sassdoc = require('sassdoc');
 const sourcemaps = require('gulp-sourcemaps');
 
 gulp.task('clean', function () {
+    del('sassdoc');
     return del('main.css*');
 });
 
@@ -15,4 +17,17 @@ gulp.task('sass', ['clean'], function () {
         .pipe(gulp.dest('.'));
 });
 
-gulp.task('default', ['sass']);
+gulp.task('doc', function () {
+    return gulp.src('skeleton/**/*.scss')
+        .pipe(sassdoc({
+            display: {
+                alias: true,
+                watermark: true
+            },
+            groups: {
+                core: 'Core'
+            }
+        }));
+});
+
+gulp.task('default', ['sass', 'doc']);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "skeleton-sass-official",
-	"version": "3.1.0",
+	"version": "3.1.0-beta2",
 	"description": "Skeleton Sass is a highly modular version of Skeleton CSS",
 	"main": "skeleton/core/_config.scss",
 	"scripts": {
@@ -33,6 +33,6 @@
 		"gulp-cli": ">=1.2.2",
 		"gulp-sass": ">=3.1.0",
 		"gulp-sourcemaps": "^2.4.0",
-		"sassdoc": ">=2.1.20"
+		"sassdoc": "^2.1.20"
 	}
 }

skeleton/core/_config.scss

@@ -1,46 +1,192 @@
+////
+/// Skeleton Sass 3.1.0
+/// @author Dennis Thompson
+////
+
 // GLOBAL VARIABLES - default global variables in this file.
 // If you wish to change the default value of these variables,
 // please do so in your _MYconfig.scss.
 
-// background vars
+/// The default background color as defined in `body`
+/// @type color
+/// @group core
+/// @access public
 $background-color: #fff !global; // default background color
 
 // GENERAL
+
+/// Set true to use wildcard `border-box`
+/// @type bool
+/// @group core
+/// @access public
 $use-global-border-box: true !global; // use global border box?
+
+/// Set true to use `rem` units as the default relative unit
+/// @type bool
+/// @group core
+/// @access public
 $use-rem: true !global; // use rem as default unit?
+
+/// Set true to use `em` units as the default relative unit
+/// @type bool
+/// @group core
+/// @access public
 $use-em: false !global; // use em as default unit?
+
+/// Set true to use `%` units as the default relative unit
+/// @type bool
+/// @group core
+/// @access public
 $use-percent: false !global; // use percentage as default unit?
+
+/// Set true to use `px` fallback when legacy browsers don't properly support `rem` or `em` units.
+/// @type bool
+/// @group core
+/// @access public
+/// @deprecated
 $use-px-fallback: true !global; // allow for pixel fall back
 
 // FONTS
+
+/// Sets the global font-size as defined in `body`
+/// @type number
+/// @group core
+/// @access public
 $font-size: 14px !global;  // default font size. Change here will adjust sizes across the board.
+
+/// Sets the global font-family as defined in `body`
+/// @type list
+/// @group core
+/// @access public
 $font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !global; // default fonts
+
+/// Sets the global heading families for `h1` through `h6`
+/// @type list
+/// @group core
+/// @access public
 $heading-family: "Georgia", "Times New Roman", serif !global; // default heading (h1-h6) font
+
+/// Sets the global font color as defined in `body`
+/// @type color
+/// @group core
+/// @access public
 $font-color: #444 !global;  // default font color
+
+/// Sets the global heading color for `h1` through `h6`
+/// @type color
+/// @group core
+/// @access public
 $heading-color: #181818 !global; // default heading (h1-h6) color
+
+/// Sets the form font-family
+/// @type bool
+/// @group core
+/// @access public
 $form-font: $font-family !global; // default form font
 
 // LINKS
+
+/// Sets the global link color as defined in `a`
+/// @type color
+/// @group core
+/// @access public
 $link-color: #333 !global; // default link color
+
+/// Sets the global link hover color
+/// @type color
+/// @group core
+/// @access public
 $link-hover: #000 !global; // default link color on :hover
+
+/// Sets the global link decoration
+/// @type string
+/// @group core
+/// @access public
 $link-decoration: underline !global; // default link decoration
 
 // GRID
+
+/// Set true to enable the fluid grid
+/// @type bool
+/// @group core
+/// @access public
 $is-fluid: false !global; // Change to true to enable the fluid grid
+
+/// Sets the base column width.
+///
+/// **Note:** only relevant when `$is-fluid` is set to false.
+/// @type number
+/// @group core
+/// @access public
 $base-col-width: 40px !global; // The width of each columns
+
+/// Sets the amount of padding between each column.
+/// @type number
+/// @group core
+/// @access public
 $base-gutter-width: 20px !global; // The space between columns
+
+/// Sets the number of columns to generate (max 99).
+/// @type number
+/// @group core
+/// @access public
 $base-col-count: 16 !global; // The number of columns
+
+/// Calculates the base width of the grid based on configured values.
+/// @type number
+/// @group core
+/// @access public
 $base-width: if($is-fluid, 98%, ($base-col-width + $base-gutter-width) * $base-col-count) !global; // Calculated
+
+/// The width of the _new_ grid used starting with the `fresh` theme.
+/// @type number
+/// @group core
+/// @access public
 $new-grid-width: 80%; // the new grid with set within the 550px breakpoint
 
 // BREAKPOINTS
+
+/// A default value for the tablet `@media` query breakpoint.
+/// @type number
+/// @group core
+/// @access public
 $tablet-width: 768px !global; // the tablet width media query
+
+/// A default value for the portrait-mode mobile `@media` query breakpoint.
+/// @type number
+/// @group core
+/// @access public
 $mobile-portrait-width: 300px !global; // the mobile portrait media query
+
+/// A default value for the landscape-mode mobile `@media` query breakpoint.
+/// @type number
+/// @group core
+/// @access public
 $mobile-landscape-width: 420px !global; // the mobile landscape media query
+
+/// The width to set the for fluid mobile grid.
+/// @type number
+/// @group core
+/// @access public
 $mobile-fluid-width: 100%; // this value is not used with breakpoints, it is used in generating a fluid grid for mobile devices
 
 // ------ CHANGE MAY CAUSE UNDESIRED RESULTS
+
+/// **Warning:** Excersize discretion when altering these values as they can cause undesired results.
+///
+/// Adjusts the base font size which is used to calculate _all_ relative units.
+/// @type number
+/// @group core
+/// @access public
 $base-font-size: 10px !global; // the font size in the html element so we can use ems and rems in a friendly way
+
+/// **Warning:** Excersize discretion when altering these values as they can cause undesired results.
+///
+/// Set `false` to use legacy grid implemented in Skeleton Sass 1
+/// @type bool
+/// @group core
+/// @access public
+/// @deprecated
 $use-new-grid: true !global; // Uses the new grid released in Skeleton CSS 2
 
 // ------ IMPORTS. DO NOT CHANGE