Compile (#11)

* Move items around a bit
* Compile SassDoc

Gruntfile.js

@@ -13,13 +13,19 @@ module.exports = function(grunt) {
       options: {
         configFile: '.sass-lint.yml'
       },
-      target: ['\*\*/\*.scss']
+      target: ['core/\*\*/\*.scss']
+    },
+    sassdoc: {
+      default: {
+        src: 'core',
+      }
     }
   });
 
   // This is where we tell Grunt we plan to use this plug-in.
   grunt.loadNpmTasks('grunt-sass-lint');
   grunt.loadNpmTasks('grunt-available-tasks');
+  grunt.loadNpmTasks('grunt-sassdoc');
 
   // This is where we tell Grunt what to do when we type "grunt" into the terminal.
   grunt.registerTask('default', ['availabletasks']);

README.md

@@ -41,7 +41,8 @@ module.exports = function(grunt) {
         includePaths: [
           "node_modules/bourbon/core",
           "node_modules/bourbon-neat/core",
-          "node_modules" // <-- this one will allow you to import decanter.
+          "node_modules/decanter/core", // <-- this one will allow you to import decanter.
+          "node_modules"
         ],
         sourceMap: true,
         // This controls the compiled css and can be changed to nested, compact or compressed.
@@ -73,7 +74,7 @@ Example:
 Configuration
 ---
 
-Please see _VARIABLES.scss_ configuration document.
+Please see [docs/CONFIGURATION.md](docs/CONFIGURATION.md) document.
 
 
 Troubleshooting

core/base/README.md

@@ -0,0 +1,15 @@
+# Base
+
+Base rules consist of styling for HTML elements only, such as used in a CSS
+reset or Normalize.css. Base rules should never include class selectors.
+To avoid ‘undoing’ styles in components, base styles should reflect the
+simplest possible appearance of each element. For example, the simplest usage
+of the ul element may be completely unstyled, removing list markers and
+indents and relying on a component class for other applications.
+
+The `base/` folder holds what we might call the boilerplate code for the project.
+In there, you might find some typographic rules, and probably a stylesheet
+(that I’m used to calling `base.scss`), defining some standard styles for
+commonly used HTML elements.
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Base folder](http://sass-guidelin.es/#base-folder)

core/base/_box-model.scss

@@ -0,0 +1,28 @@
+////
+/// Box model default styles.
+/// @group html
+////
+
+@charset "UTF-8";
+@import '../utilities/settings/settings';
+
+// Set up a decent box model on the root element.
+html {
+  font-size: 62.5%; // 1rem = 10px;
+  box-sizing: border-box;
+}
+
+// Make all elements from the DOM inherit from the parent box-sizing
+// Since `*` has a specificity of 0, it does not override the `html` value
+// making all elements inheriting from the root box-sizing value
+// See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+/// Set the base body font size.
+/// @require {function} em Relative unit function
+/// @require {variable} $base-font-size Base font size
+body {
+  font-size: em($base-font-size, 10px);
+}

base/_buttons.scss → core/base/_buttons.scss

@@ -1,12 +1,19 @@
-@charset "UTF-8";
-
-@import '../utilities/settings';
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the button element.
-// -----------------------------------------------------------------------------
-
+////
+/// Button base styles.
+/// @group base
+////
 
+@charset "UTF-8";
+@import '../utilities/utilities';
+
+/// Generic Button Styles.
+/// @require {function} color Returns a color from the color map.
+/// @require {function} em normalized relative values.
+/// @require {mixin} material-shadow adds a shadow.
+/// @require {variable} $base-font-family The default base font styles.
+/// @require {variable} $base-line-height Base line height setting.
+/// @require {variable} $base-transition Base transition setting.
+/// @require {variable} $small-spacing Base small space setting.
 %button__generic {
   $_font-family: $base-font-family;
   $_line-height: $base-line-height;
@@ -54,6 +61,11 @@
   }
 }
 
+/// Primary Button Styles.
+/// @require {function} em normalized relative values.
+/// @require {function} color Returns a color from the color map.
+/// @require {placeholder} button__generic
+/// @require {variable} $base-spacing
 %button__primary {
   $_spacing: $base-spacing;
 
@@ -71,6 +83,11 @@
   }
 }
 
+/// Secondary Button Styles.
+/// @require {function} em normalized relative values.
+/// @require {function} color Returns a color from the color map.
+/// @require {placeholder} button__generic
+/// @require {variable} $base-spacing
 %button__secondary {
   $_spacing: $base-spacing;
 
@@ -90,6 +107,8 @@
   }
 }
 
+/// Apply all button styles.
+/// @require {placeholder} button__generic
 #{$all-buttons} {
   @extend %button__generic;
 }

core/base/_fonts.scss

@@ -0,0 +1,23 @@
+////
+/// Base font styles.
+/// This file contains all @font-face declarations, if any.
+/// @group base
+////
+
+@charset "UTF-8";
+@import '../utilities/settings/settings';
+
+/// Needs description.
+@if(global-variable-exists(monospace-source)) {
+  @import url($monospace-source);
+}
+
+/// Needs description.
+@if(global-variable-exists(sans-serif-source)) {
+  @import url($sans-serif-source);
+}
+
+/// Needs description.
+@if(global-variable-exists(serif-source)) {
+  @import url($serif-source);
+}

base/_forms.scss → core/base/_forms.scss

@@ -1,29 +1,39 @@
-@charset "UTF-8";
+////
+/// Form base styles.
+/// @group html
+////
 
-// Dependencies
-@import '../utilities/settings';
+@charset "UTF-8";
+@import '../utilities/settings/settings';
 
+// Fieldset defaults.
 fieldset {
   background-color: transparent;
   border: 0;
   margin: 0;
   padding: 0;
 }
 
+/// Legend defaults.
+/// @require {variable} $small-spacing
 legend {
   $_spacing: $small-spacing;
   font-weight: 600;
   margin-bottom: $_spacing / 2;
   padding: 0;
 }
 
+/// Label defaults.
+/// @require {variable} $small-spacing
 label {
   $_spacing: $small-spacing;
   display: block;
   font-weight: 600;
   margin-bottom: $_spacing / 2;
 }
 
+/// Input defaults.
+/// @require {variable} $base-font-family
 input,
 select,
 textarea {
@@ -32,6 +42,18 @@ textarea {
   font-family: $_font-family;
 }
 
+/// All Text Input defaults.
+/// @require {variable} $base-border
+/// @require {variable} $base-border-radius
+/// @require {variable} $form-box-shadow
+/// @require {variable} $base-spacing
+/// @require {variable} $base-duration
+/// @require {variable} $base-timing
+/// @require {function} color
+/// @require {function} shade
+/// @require {function} tint
+/// @require {mixin} on-event
+/// @group base
 #{$all-text-inputs} {
   $_border: $base-border;
   $_border-radius: $base-border-radius;
@@ -70,23 +92,30 @@ textarea {
   }
 }
 
+// Text area styles.
 textarea {
   resize: vertical;
 }
 
+/// Checkboxes and radios
+/// @require {variable} $small-spacing
 [type="checkbox"],
 [type="radio"] {
   $_spacing: $small-spacing;
   display: inline;
   margin-right: $_spacing / 2;
 }
 
+/// File fields.
+/// @require {variable} $small-spacing
 [type="file"] {
   $_spacing: $small-spacing;
   margin-bottom: $_spacing;
   width: 100%;
 }
 
+/// Select styles.
+/// @require {variable} $small-spacing
 select {
   $_spacing: $small-spacing;
   margin-bottom: $_spacing;