Add standalone Sass file for testbed folder

diff --git a/gulpfile.js b/gulpfile.js
index e60043e58eae999133c849d5677f092492c90092..12b925abc2e35617d414c926be2a5610a8b59bcb 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -58,7 +58,8 @@ gulp.task('sass:foundation', function() {
 gulp.task('settings', function() {
   octophant('scss/**/*.scss', {
     title: 'Foundation for Emails Settings',
-    output: 'scss/ink/_settings.scss'
+    output: 'test/scss/_settings.scss',
+    sort: ['global', 'grid']
   });
 });
 

diff --git a/scss/ink.scss b/scss/ink.scss
index 7eeab1128bf016bf48eab0b38acc44cdd7aec057..fcd1c9a66cf2c793e55febd27276f99bd4c7fffb 100755 (executable)
--- a/scss/ink.scss
+++ b/scss/ink.scss
@@ -7,7 +7,6 @@ $foundation-version: '2.0.0-alpha';
 @charset 'UTF-8';
 
 @import
-'ink/settings',
 'ink/components/normalize',
 'ink/components/grid',
 'ink/components/block-grid',

diff --git a/scss/ink/components/_global.scss b/scss/ink/components/_global.scss
index 2f85a75f255343f8a6100e4327354546155be352..9881869821a1f46d29c726311cc2f6f32df3e71e 100755 (executable)
--- a/scss/ink/components/_global.scss
+++ b/scss/ink/components/_global.scss
@@ -2,9 +2,9 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-///
+////
 /// @group global
-///
+////
 
 @import '../functions';
 

diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss
index bf0ed2619d7a18d679739394161b4df62e611882..d58a735224cedc17d08da07cba432348b1dec364 100755 (executable)
--- a/scss/ink/components/_media-query.scss
+++ b/scss/ink/components/_media-query.scss
@@ -62,9 +62,9 @@ $small-range: $container-width !default;
     width: 100% !important;
   }
 
-  @for $i from 1 through $total-columns {
+  @for $i from 1 through $grid-column-count {
     .wrapper > table.small-#{$i} {
-      width: grid-calc-pct($i, $total-columns) !important;
+      width: grid-calc-pct($i, $grid-column-count) !important;
     }
   }
 
@@ -73,21 +73,21 @@ $small-range: $container-width !default;
   }
 
 
-  @for $i from 1 through $total-columns {
+  @for $i from 1 through $grid-column-count {
     .body .columns td.small-#{$i},
     .body .column td.small-#{$i},
     table.small-#{$i} center {
-      width: grid-calc-pct($i, $total-columns) !important;
+      width: grid-calc-pct($i, $grid-column-count) !important;
     }
   }
-  @for $i from 1 through $total-columns {
+  @for $i from 1 through $grid-column-count {
     table[class="body"] .columns td.small-#{$i},
     table[class="body"] .column td.small-#{$i} {
-      width: grid-calc-pct($i, $total-columns) !important;
+      width: grid-calc-pct($i, $grid-column-count) !important;
     }
   }
 
-  @for $i from 1 through ($total-columns - 1) {
+  @for $i from 1 through ($grid-column-count - 1) {
     table[class="body"] td.offset-by-#{$i} {
       padding-left: 0 !important;
     }

diff --git a/test/gulpfile.js b/test/gulpfile.js
index 8c4355e0b8bd6cf060cf183500108a3fbcacaea6..7be3f4adf687d9969099a6f2d86bb16c613863ff 100644 (file)
--- a/test/gulpfile.js
+++ b/test/gulpfile.js
@@ -21,6 +21,7 @@ gulp.task('clean', function(done) {
 gulp.task('pages', function() {
   return gulp.src('./pages/**/*.html')
     .pipe(panini({
+      root: './pages',
       layouts: './layouts'
     }))
     .pipe($.inky())
@@ -29,7 +30,7 @@ gulp.task('pages', function() {
 
 // Compile Sass into CSS
 gulp.task('sass', function() {
-  return gulp.src('../scss/ink.scss')
+  return gulp.src('./scss/app.scss')
     .pipe($.sass().on('error', $.sass.logError))
     .pipe(gulp.dest('../_build/css'));
 });
@@ -60,7 +61,7 @@ gulp.task('build', function(cb) {
 // Build emails, run the server, and watch for file changes
 gulp.task('default', ['server'], function() {
   gulp.watch('./pages/**/*.html', ['pages', browser.reload]);
-  gulp.watch('../scss/**/*.scss', ['sass', browser.reload]);
+  gulp.watch(['../scss/**/*.scss', './scss/**/*.scss'], ['sass', browser.reload]);
 });
 
 function inline(options) {

diff --git a/test/layouts/default.html b/test/layouts/default.html
index a0cf374240b04bf9f50726a3777be626b8f19272..7c02b63da6595ee073af03dfe5d7dc317042bf78 100644 (file)
--- a/test/layouts/default.html
+++ b/test/layouts/default.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" type="text/css" href="css/ink.css">
+  <link rel="stylesheet" type="text/css" href="css/app.css">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width"/>
   <!-- inject:css -->

diff --git a/scss/ink/_settings.scss b/test/scss/_settings.scss
similarity index 88%
rename from scss/ink/_settings.scss
rename to test/scss/_settings.scss
index 107776ccc3061b6efe4677f16bd435ec3a2fd18a..c7231ed00f5c777e13c27261d2e782c48ea4ecda 100644 (file)
--- a/scss/ink/_settings.scss
+++ b/test/scss/_settings.scss
@@ -3,24 +3,51 @@
 //
 //  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
+//   1. Global
+//   2. Grid
+//   3. Block Grid
+//   4. Button
+//   5. Callout
+//   6. Media Query
+//   7. Normalize
+//   8. Thumbnial
+//   9. Typography
+
+
+// 1. Global
+// ---------
+
+$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;
+
+// 2. Grid
+// -------
+
+$grid-column-count: 12;
+$wrapper-padding-top: 10px;
+$column-padding-bottom: 10px;
+$sub-column-padding-right: $column-gutter / 2;
+
+// 3. Block Grid
 // -------------
 
 $block-grid-elements: 8;
 $block-grid-spacing: $column-gutter;
 
-// 2. Button
+// 4. Button
 // ---------
 
 $button-padding: 12px 0 12px 0;
@@ -36,7 +63,7 @@ $button-font-size-large: 24px;
 $button-background-color: $primary-color;
 $button-border: 1px solid darken($button-background-color, 10%);
 
-// 3. Callout
+// 5. Callout
 // ----------
 
 $callout-background-color: $light-gray;
@@ -46,27 +73,19 @@ $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
+// 6. Media Query
 // --------------
 
 $small-container-width: 95%;
 $small-range: $container-width;
 
-// 6. Normalize
+// 7. Normalize
 // ------------
 
 $hr-color: $medium-gray;
 $hr-height: 1px;
 
-// 7. Thumbnial
+// 8. Thumbnial
 // ------------
 
 $thumbnail-shadow-h: 0;
@@ -76,7 +95,7 @@ $thumbnail-shadow-spread: 1px;
 $thumbnail-shadow-color: $primary-color;
 $thumbnail-shadow-opacity: 0.5;
 
-// 8. Typography
+// 9. Typography
 // -------------
 
 $global-font-color: $black;
@@ -102,22 +121,3 @@ $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;
-

diff --git a/test/scss/app.scss b/test/scss/app.scss
new file mode 100644 (file)
index 0000000..4fc8b0d
--- /dev/null
+++ b/test/scss/app.scss
@@ -0,0 +1,2 @@
+@import 'settings';
+@import '../../scss/ink';