Add settings file generator

diff --git a/gulpfile.js b/gulpfile.js
index f49f2d3c236b897e034021b3e561866673cf3e91..e60043e58eae999133c849d5677f092492c90092 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,6 +6,7 @@ var supercollider = require('supercollider');
 var rimraf = require('rimraf');
 var browser = require('browser-sync');
 var foundationDocs = require('foundation-docs');
+var octophant = require('octophant');
 
 supercollider
   .config({
@@ -54,6 +55,13 @@ gulp.task('sass:foundation', function() {
     .pipe(gulp.dest('_build/assets/css'));
 });
 
+gulp.task('settings', function() {
+  octophant('scss/**/*.scss', {
+    title: 'Foundation for Emails Settings',
+    output: 'scss/ink/_settings.scss'
+  });
+});
+
 gulp.task('lint', function() {
   return gulp.src('scss/**/*.scss')
     .pipe($.scssLint({

diff --git a/package.json b/package.json
index dff59cb1fa0553c74a3379dd10c0eb99bbbc8954..32a7c4665a237ab17c121a76bd3158e0000e73fe 100644 (file)
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "marked": "^0.3.5",
     "media-query-extractor": "^0.1.1",
     "multiline": "^1.0.2",
-    "octophant": "^0.2.0",
+    "octophant": "^1.0.0",
     "panini": "^1.1.1",
     "rimraf": "^2.4.2",
     "run-sequence": "^1.1.2",

diff --git a/scss/ink/_settings.scss b/scss/ink/_settings.scss
old mode 100755 (executable)
new mode 100644 (file)
index 29c9cf5..107776c
--- a/scss/ink/_settings.scss
+++ b/scss/ink/_settings.scss
@@ -1,214 +1,123 @@
-// Ink by ZURB
-// zurb.com/ink/
-// Licensed under MIT Open Source
+//  Foundation for Emails Settings
+//  ------------------------------
+//
+//  Table of Contents:
+//
+//   1. Block Grid
+//   2. Button
+//   3. Callout
+//   4. Grid
+//   5. Media Query
+//   6. Normalize
+//   7. Thumbnial
+//   8. Typography
+//   9. Undefined
+
+
+// 1. Block Grid
+// -------------
+
+$block-grid-elements: 8;
+$block-grid-spacing: $column-gutter;
+
+// 2. Button
+// ---------
+
+$button-padding: 12px 0 12px 0;
+$button-padding-tiny: 5px 0 4px 0;
+$button-padding-small: 8px 0 7px;
+$button-padding-large: 21px 0 18px;
+$button-font-color: $white;
+$button-font-color-alt: $medium-gray;
+$button-font-size: 20px;
+$button-font-size-tiny: 12px;
+$button-font-size-small: 16px;
+$button-font-size-large: 24px;
+$button-background-color: $primary-color;
+$button-border: 1px solid darken($button-background-color, 10%);
+
+// 3. Callout
+// ----------
+
+$callout-background-color: $light-gray;
+$callout-padding: 10px;
+$callout-border: 1px solid darken($callout-background-color, 20%);
+$callout-border-success: 1px solid darken($success-color, 20%);
+$callout-border-warning: 1px solid darken($warning-color, 20%);
+$callout-border-alert: 1px solid darken darken($alert-color, 20%);
+
+// 4. Grid
+// -------
+
+$grid-column-count: 12;
+$wrapper-padding-top: 10px;
+$column-padding-bottom: 10px;
+$sub-column-padding-right: $column-gutter / 2;
+
+// 5. Media Query
+// --------------
+
+$small-container-width: 95%;
+$small-range: $container-width;
+
+// 6. Normalize
+// ------------
+
+$hr-color: $medium-gray;
+$hr-height: 1px;
+
+// 7. Thumbnial
+// ------------
+
+$thumbnail-shadow-h: 0;
+$thumbnail-shadow-v: 0;
+$thumbnail-shadow-blur: 6px;
+$thumbnail-shadow-spread: 1px;
+$thumbnail-shadow-color: $primary-color;
+$thumbnail-shadow-opacity: 0.5;
+
+// 8. Typography
+// -------------
+
+$global-font-color: $black;
+$global-font-family: Helvetica, Arial, sans-serif;
+$global-font-weight: normal;
+$global-line-height: 1.3;
+$body-font-size: 14px;
+$body-line-height: 19px;
+$h1-font-size: 40px;
+$h2-font-size: 36px;
+$h3-font-size: 32px;
+$h4-font-size: 28px;
+$h5-font-size: 24px;
+$h6-font-size: 20px;
+$small-font-size: 10px;
+$paragraph-lead-font-size: 18px;
+$paragraph-lead-line-height: 21px;
+$paragraph-margin-bottom: 10px;
+$text-padding: 10px;
+$anchor-text-decoration: none;
+$anchor-font-color: $primary-color;
+$anchor-font-color-visited: $anchor-font-color;
+$anchor-font-color-hover: darken($primary-color, 10%);
+$anchor-font-color-active: $anchor-font-color-hover;
+
+// 9. Undefined
+// ------------
+
+$primary-color: #2199e8;
+$secondary-color: #777;
+$success-color: #3adb76;
+$warning-color: #ffae00;
+$alert-color: #ec5840;
+$light-gray: #f3f3f3;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$pre-color: #ff6908;
+$column-gutter: 20px;
+$container-width: 580px;
+$global-radius: 3px;
+$global-rounded: 500px;
 
-//
-// INK SETTINGS
-//
-
-// Allows the use of rem-calc() or lower-bound() in your settings
-@import "functions";
-
-// $base-line-height: 1.3;
-
-// We use this to control whether or not CSS classes come through in the gem files.
-// $include-html-classes: true;
-
-
-
-//
-// $GLOBAL
-//
-
-// $include-html-global-classes: $include-html-classes;
-
-// We use these to control font styles
-// $base-font-color: #222222;
-// $base-font-family: Helvetica, Arial, sans-serif;
-// $base-font-weight: normal;
-
-// $body-font-size: 14px;
-// $body-line-height: 19px;
-
-// We use these as default colors throughout
-// $primary-color: #2795b6;
-// $secondary-color: #e9e9e9;
-// $alert-color: #c60f13;
-// $success-color: #5da423;
-
-// We use this to control how much we darken things on hover
-// $secondary-border-color: #d0d0d0;
-// $alert-border-color: #457a1a;
-// $success-border-color: #970b0e;
-
-// We use these to make sure border radius matches unless we want it different.
-// $global-radius: 3px;
-// $global-rounded: 500px;
-
-// $column-gutter: 20px;
-
-
-
-//
-// $NORMALIZE
-//
-
-// $include-html-normalize-classes: $include-html-classes;
-
-
-
-//
-// $ALIGNMENT
-//
-
-// $include-html-alignment-classes: $include-html-classes;
-
-
-
-//
-// $GRID
-//
-
-// $include-html-grid-classes: $include-html-classes;
-// $include-html-sub-colums-grid-classes: $include-html-grid-classes;
-
-$container-width: 580px;  
-// $small-container-width: 95%;
-$total-columns: 12;
-
-// $wrapper-padding-top: 10px;
-// $column-cell-padding-bottom: 10px;
-// $text-padding: 10px;
-
-// $sub-column-padding-right: $column-gutter / 2;
-
-
-
-//
-// $MEDIA-QUERY-RANGES
-//
-
-// $include-html-media-query-classes: $include-html-classes;
-
-// $small-range: (0px, $container-width * (600px / 580px));
-
-// $screen: "only screen";
-
-// $landscape: "#{$screen} and (orientation: landscape)";
-// $portrait: "#{$screen} and (orientation: portrait)";
-
-// $small-up: $screen;
-// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
-
-
-
-//
-// $OUTLOOK-FIRST
-//
-
-// $include-html-outlook-first-classes: $include-html-classes;
-
-
-
-//
-// $TYPOGRAPHY
-//
-
-// $include-html-type-classes: $include-html-classes;
-
-// We use these to control header font sizes
-// $h1-font-size: 40px;
-// $h2-font-size: 136px;
-// $h3-font-size: 32px;
-// $h4-font-size: 28px;
-// $h5-font-size: 24px;
-// $h6-font-size: 20px;
-
-// A general <small> styling
-// $small-font-size: 10px;
-
-// We use these to style lead paragraphs
-// $paragraph-margin-bottom: 10px;
-// $paragraph-lead-font-size: 18px;
-// $paragraph-lead-line-height: 21px;
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-font-color: #2ba6cb;
-// $anchor-font-color-visited: $anchor-font-color;
-// $anchor-font-color-hover: #2795b6;
-// $anchor-font-color-active: $anchor-font-color-hover;
-
-// $header-anchor-font-color: $anchor-font-color;
-// $header-anchor-font-color-visited: $header-anchor-font-color;
-// $header-anchor-font-color-active: $header-anchor-font-color;
-
-// We use these to style the <hr> element
-// $hr-color: #d9d9d9;
-// $hr-height: 1px;
-
-
-
-//
-// $BLOCK-GRID
-//
-
-// $include-html-block-grid-classes: $include-html-grid-classes;
-
-// We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 8;
-// $block-grid-default-spacing: $column-gutter;
-// $align-block-grid-to-grid: false;
-
-
-
-//
-// $BUTTONS
-//
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to build padding for buttons.
-// $button-dft: 8px 0;
-// $button-tny: 5px 0 4px;
-// $button-sml: 8px 0 7px;
-// $button-med: 12px 0 10px;
-// $button-lrg: 21px 0 18px;
-
-// We use these to control button text styles.
-// $button-font-family: $base-font-family;
-// $button-font-color: #ffffff;
-// $button-font-color-alt: #555555;
-// $button-font-tny: 12px;
-// $button-font-sml: 16px;
-// $button-font-med: 20px;
-// $button-font-lrg: 24px;
-
-// We use these to control button border styles.
-// $button-border-width: 1px;
-// $button-border-style: solid;
-// $button-bg: #2ba6cb;
-// $button-border-color: darken($button-bg, 10%);
-
-// We use this to set the default radius used throughout the core.
-// $button-radius: $global-radius;
-// $button-round: $global-rounded;
-
-
-
-//
-// $PANELS
-//
-
-// $include-html-panel-classes: $include-html-classes;
-
-// We use these to control the background and border styles
-// $panel-bg: #f2f2f2;
-// $panel-border-style: solid;
-// $panel-border-size: 1px;
-
-// We use this to control how much we darken things on hover
-// $panel-border-color: #d9d9d9;
-
-// We use this to set default padding
-// $panel-padding: 10px;
\ No newline at end of file