malvolio 0.1.0

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/grid/_block-grid.scss

@@ -0,0 +1,32 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group block-grid
+////
+
+/// The highest number of `.x-up` classes available when using the block grid CSS.
+/// @type Number
+$block-grid-max: 8 !default;
+
+/// Gutter between elements in a block grid.
+/// @type Number
+$block-grid-gutter: $global-gutter !default;
+
+.block-grid {
+  width: 100%;
+  max-width: $global-width;
+
+  td {
+    display: inline-block;
+    padding: $block-grid-gutter / 2;
+  }
+}
+
+// Sizing classes
+@for $i from 2 through $block-grid-max {
+  .up-#{$i} td {
+    width: floor(($global-width - $i * $block-grid-gutter) / $i) !important;
+  }
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/grid/_grid.scss

@@ -0,0 +1,180 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Default number of columns for an email.
+/// @type Number
+$grid-column-count: 12 !default;
+
+/// Default padding for the bottom of a column.
+/// @type Number
+$column-padding-bottom: $global-padding !default;
+
+/// Default border radius for the container. Use a px value
+/// @type Number
+$container-radius: 0 !default;
+
+//For viewing email in browser
+@media only screen {
+  html {
+    min-height: 100%;
+    background: $body-background;
+  }
+}
+
+table {
+  &.body {
+    background: $body-background;
+    height: 100%;
+    width: 100%;
+  }
+
+  &.container {
+    background: $container-background;
+    width: $global-width;
+    margin: 0 auto;
+    Margin: 0 auto;
+    text-align: inherit;
+  }
+
+  &.row {
+    padding: 0;
+    width: 100%;
+    position: relative;
+  }
+
+  &.spacer {
+    width: 100%;
+    td {
+      mso-line-height-rule: exactly;
+    }
+  }
+}
+
+table.container table.row {
+  display: table;
+}
+
+td.columns,
+td.column,
+th.columns,
+th.column {
+  margin: 0 auto;
+  Margin: 0 auto;
+  padding-left: $global-gutter;
+  padding-bottom: $column-padding-bottom;
+
+  // Prevents Nested columns from double the padding
+  .column,
+  .columns {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+
+    center {
+      min-width: none !important;
+    }
+  }
+}
+
+td.columns.last,
+td.column.last,
+th.columns.last,
+th.column.last {
+  padding-right: $global-gutter;
+}
+
+//makes sure nested tables are 100% width
+td.columns,
+td.column,
+th.columns,
+th.column {
+  table {
+    width: 100%;
+
+    &.button {
+      width:auto;
+
+      &.expanded{
+        width: 100%;
+      }
+    }
+  }
+}
+
+@for $i from 1 through $grid-column-count {
+  td.large-#{$i},
+  th.large-#{$i} {
+    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
+    padding-left: $global-gutter / 2;
+    padding-right: $global-gutter / 2;
+  }
+
+  td.large-#{$i}.first,
+  th.large-#{$i}.first {
+    padding-left: $global-gutter;
+  }
+
+  td.large-#{$i}.last,
+  th.large-#{$i}.last {
+    padding-right: $global-gutter;
+  }
+
+  //Collapsed logic
+  .collapse {
+    > tbody > tr > td.large-#{$i},
+    > tbody > tr > th.large-#{$i} {
+      padding-right: 0;
+      padding-left: 0;
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
+    }
+
+    //Gotta give it that extra love for the first and last columns.
+    td.large-#{$i}.first,
+    th.large-#{$i}.first,
+    td.large-#{$i}.last,
+    th.large-#{$i}.last {
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
+    }
+  }
+
+  td.large-#{$i} center,
+  th.large-#{$i} center {
+    min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
+  }
+
+  .body .columns td.large-#{$i},
+  .body .column td.large-#{$i},
+  .body .columns th.large-#{$i},
+  .body .column th.large-#{$i} {
+    width: -zf-grid-calc-pct($i, $grid-column-count);
+  }
+}
+
+@for $i from 1 through ($grid-column-count - 1) {
+  td.large-offset-#{$i},
+  td.large-offset-#{$i}.first,
+  td.large-offset-#{$i}.last,
+  th.large-offset-#{$i},
+  th.large-offset-#{$i}.first,
+  th.large-offset-#{$i}.last {
+    //1.5 takes in effect a whole empty cell.
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
+  }
+}
+
+td.expander,
+th.expander {
+  visibility: hidden;
+  width: 0;
+  padding: 0 !important;
+}
+
+// adds radius to container
+table.container.radius {
+  border-radius: $container-radius;
+  border-collapse: separate;
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/settings/_settings.scss

@@ -0,0 +1,148 @@
+//  Foundation for Emails Settings
+//  ------------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Grid
+//   3. Block Grid
+//   4. Typography
+//   5. Button
+//   6. Callout
+//   7. Menu
+//   8. Thumbnail
+
+
+// 1. Global
+// ---------
+
+$primary-color: #2199e8;
+$secondary-color: #777777;
+$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;
+$global-width: 580px;
+$global-width-small: 95%;
+$global-gutter: 16px;
+$body-background: $light-gray;
+$container-background: $white;
+$global-padding: 16px;
+$global-margin: 16px;
+$global-radius: 3px;
+$global-rounded: 500px;
+$global-breakpoint: $global-width + $global-gutter;
+
+// 2. Grid
+// -------
+
+$grid-column-count: 12;
+$column-padding-bottom: $global-padding;
+$container-radius: 0;
+
+// 3. Block Grid
+// -------------
+
+$block-grid-max: 8;
+$block-grid-gutter: $global-gutter;
+
+// 4. Typography
+// -------------
+
+$global-font-color: $black;
+$body-font-family: Helvetica, Arial, sans-serif;
+$global-font-weight: normal;
+$header-color: inherit;
+$global-line-height: 130%;
+$global-font-size: 16px;
+$body-line-height: $global-line-height;
+$header-font-family: $body-font-family;
+$header-font-weight: $global-font-weight;
+$h1-font-size: 34px;
+$h2-font-size: 30px;
+$h3-font-size: 28px;
+$h4-font-size: 24px;
+$h5-font-size: 20px;
+$h6-font-size: 18px;
+$header-margin-bottom: 10px;
+$paragraph-margin-bottom: 10px;
+$small-font-size: 80%;
+$small-font-color: $medium-gray;
+$lead-font-size: $global-font-size * 1.25;
+$lead-line-height: 160%;
+$text-padding: 10px;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-font-weight;
+$subheader-margin-top: 4px;
+$subheader-margin-bottom: 8px;
+$hr-width: $global-width;
+$hr-border: 1px solid $black;
+$hr-margin: 20px auto;
+$anchor-text-decoration: none;
+$anchor-color: $primary-color;
+$anchor-color-visited: $anchor-color;
+$anchor-color-hover: darken($primary-color, 10%);
+$anchor-color-active: $anchor-color-hover;
+$stat-font-size: 40px;
+$remove-ios-blue: true;
+
+// 5. Button
+// ---------
+
+$button-padding: (
+  tiny: 4px 8px 4px 8px,
+  small: 5px 10px 5px 10px,
+  default: 8px 16px 8px 16px,
+  large: 10px 20px 10px 20px,
+);
+$button-font-size: (
+  tiny: 10px,
+  small: 12px,
+  default: 16px,
+  large: 20px,
+);
+$button-color: $white;
+$button-color-alt: $medium-gray;
+$button-font-weight: bold;
+$button-margin: 0 0 $global-margin 0;
+$button-background: $primary-color;
+$button-border: 2px solid $button-background;
+$button-radius: $global-radius;
+$button-rounded: $global-rounded;
+
+// 6. Callout
+// ----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-padding: 10px;
+$callout-margin-bottom: $global-margin;
+$callout-border: 1px solid darken($callout-background, 20%);
+$callout-border-secondary: 1px solid darken($secondary-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($alert-color, 20%);
+
+// 7. Menu
+// -------
+
+$menu-item-padding: 10px;
+$menu-item-gutter: 10px;
+$menu-item-color: $primary-color;
+
+// 8. Thumbnail
+// ------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/util/_util.scss

@@ -0,0 +1,22 @@
+// Foundation for Emails by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+/// Calculates a percentage value for a grid column width.
+/// @access private
+/// @param {number} $colNumber - Column count of the column.
+/// @param {number} $totalColumns - Column count of the entire row.
+/// @returns {number} A percentage width value.
+@function -zf-grid-calc-pct($colNumber, $totalColumns) {
+  @return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000;
+}
+
+/// Calculates a pixel value for a grid column width.
+/// @access private
+/// @param {number} $columnNumber - Column count of the column.
+/// @param {number} $totalColumns - Column count of the entire row.
+/// @param {number} $containerWidth - Width of the surrounding container, in pixels.
+/// @returns {number} A pixel width value.
+@function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
+  @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter);
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/index.scss

@@ -0,0 +1 @@
+@import "foundation_emails/foundation_emails";

data/lib/malvolio.rb

@@ -0,0 +1,7 @@
+require "malvolio/version"
+require "malvolio/cli"
+require "malvolio/compiler"
+
+module Malvolio
+	class CompilationError < StandardError; end
+end

data/lib/malvolio/cli.rb

@@ -0,0 +1,50 @@
+require "thor"
+require "rails/generators"
+require "filewatcher"
+
+module Malvolio
+	class CLI < Thor
+		option :inky, type: :boolean
+		desc "new NAME [--inky]", "creates a new email project"
+		def new(name)
+			if options[:inky]
+				::Rails::Generators.invoke("malvolio:create_with_inky", [name])
+			else
+				::Rails::Generators.invoke("malvolio:create", [name])
+			end
+		end
+
+		option :no_warnings, type: :boolean
+		desc "build [PATH] [--no-warnings]", "compile the project to a finished HTML email"
+		def build(path = nil)
+			safely do
+				Malvolio::Compiler.new(path, options[:no_warnings]).run!
+			end
+		end
+
+		option :no_warnings, type: :boolean
+		desc "watch [PATH] [--no-warnings]", "watch the project files and build and file changes"
+		def watch(path = nil)
+			path = File.expand_path(path || ".")
+			compiler = Malvolio::Compiler.new(path, options[:no_warnings])
+			html_files = Dir[File.join(path, "src", "**", "*.html")]
+			css_files = Dir[File.join(path, "src", "**", "*.css")]
+			sass_files = Dir[File.join(path, "src", "**", "*.scss")]
+			files = html_files + css_files + sass_files
+			puts "Now watching project for changes at #{path}"
+			Filewatcher.new(files).watch do
+				safely { compiler.run! }
+			end
+		end
+
+		private
+
+		def safely(&block)
+			begin
+				yield
+			rescue Malvolio::CompilationError => e
+				puts e
+			end
+		end
+	end
+end