bootstrap-email 0.3.3 → 1.0.0.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b3959a73b4ef6acb7e11029e15cd44f801d7dbdbf0423cee2a28374d369771b
-  data.tar.gz: 0ed2e42216cf179bb5904dc81c9651ff92a3cb1874ea0b0821ccbcc85298e117
+  metadata.gz: 759e1882e8d2e275343ff2d3b6c92a358f350f35319c14208c26b7641ef989de
+  data.tar.gz: 6fb098dd28e51f2c962aa0c774b4948e1ad0499282d66927755a18539c1aa00e
 SHA512:
-  metadata.gz: fd9f7693c6ec24b2734c07748b78496895ca35882b4bd3bccf755fcd1f76709502ad0f833522c8009bc9758711458fa4b7645f36fccef78e4cb5de0017796406
-  data.tar.gz: c4794af7ae4dff89a25ed516cf01a99c0c89a59388b53cf1cd12ed70b126bb1e8bd89a54b00ed50f6f27ef168d75b068f6c656bb95e53124e87377e03147a1f2
+  metadata.gz: d5f19d06827848b6a1cdc3f47ed99e66f46d0465748ac7c46d49654f7815e274c3462028442518b0cf6bd6cfb58e21becbc85204eab5abd45445e1dfe962594b
+  data.tar.gz: 4b9716bca2ccc400c22b30e12a6c9b7a03be72d9e595c854d99e92ffdf8d78d4b3dd8061fe914a9e60e3d3868df0e23d7383196a10f75d24514b73ed6ccaef95

data/VERSION

@@ -1 +1 @@
-0.3.3
+1.0.0.alpha2

data/bin/bootstrap-email

@@ -0,0 +1,2 @@
+#!/usr/bin/env ruby
+require_relative '../lib/bootstrap-email/bootstrap_email_cli'

data/core/bootstrap-email.scss

@@ -1,19 +1,30 @@
-@import 'sass/functions';
-@import 'sass/variables';
+@import 'scss/functions';
+@import 'scss/colors';
+@import 'scss/variables';
+@import 'scss/utilities';
+@import 'scss/selectors_for_utils';
+@import 'scss/helper_groups';
+@import 'scss/reboot_email';
 
-@import 'sass/reboot_email';
-@import 'sass/button';
-@import 'sass/display';
-@import 'sass/grid';
-@import 'sass/card';
-@import 'sass/container';
-@import 'sass/badge';
-@import 'sass/table';
-@import 'sass/hr';
-@import 'sass/alert';
-@import 'sass/image';
-@import 'sass/typography';
-@import 'sass/color';
-@import 'sass/preview';
-@import 'sass/spacing';
-@import 'sass/border';
+@import 'scss/components/alert';
+@import 'scss/components/badge';
+@import 'scss/components/button';
+@import 'scss/components/card';
+@import 'scss/components/container';
+@import 'scss/components/grid';
+@import 'scss/components/hr';
+@import 'scss/components/image';
+@import 'scss/components/preview';
+@import 'scss/components/table';
+@import 'scss/components/stack';
+
+@import 'scss/utilities/background';
+@import 'scss/utilities/border';
+@import 'scss/utilities/border-radius';
+@import 'scss/utilities/color';
+@import 'scss/utilities/display';
+@import 'scss/utilities/sizing';
+@import 'scss/utilities/spacing';
+@import 'scss/utilities/text-decoration';
+@import 'scss/utilities/typography';
+@import 'scss/utilities/valign';

data/core/bootstrap-head.scss

@@ -0,0 +1,143 @@
+//
+// This file will be placed in the head of the document and will not be inlined
+//
+@import 'scss/functions';
+@import 'scss/colors';
+@import 'scss/variables';
+@import 'scss/utilities';
+@import 'scss/selectors_for_utils';
+@import 'scss/helper_groups';
+
+// Forces Outlook.com to display emails at full width
+.ExternalClass {
+  width: 100%;
+}
+
+// Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
+.ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+  line-height: 150%;
+}
+
+// Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
+a {
+  text-decoration: none;
+}
+
+// Inherit text color so color can be set on the body and inherited by children
+* {
+  color: inherit;
+}
+
+// Fix link colors set on automatic detection such as email addresses and phone numbers
+a[x-apple-data-detectors],
+u + #body a,
+#MessageViewBody a {
+  color: inherit;
+  text-decoration: none;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+// Use a better rendering method when resizing images in Outlook IE.
+img {
+  -ms-interpolation-mode: bicubic;
+}
+
+// Prevent Outlook from adding extra spacing to tables.
+table:not([class^=s-]) {
+  font-family: $font-family-base;
+  mso-table-lspace: 0pt;
+  mso-table-rspace: 0pt;
+  border-spacing: 0px;
+  border-collapse: collapse;
+  td {
+    border-spacing: 0px;
+    border-collapse: collapse;
+  }
+}
+
+/*! allow_purge_after */
+
+@media screen and (max-width: 600px) {
+  //  Grid
+  @each $key, $value in $grid-cols {
+    table.row > tbody > tr {
+      & > td.col-lg-#{$key},
+      & > td.col-lg {
+        display: block;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  // Display
+  @each $display in $display-type {
+    .d-lg-#{$display} {
+      display: unset !important;
+    }
+  }
+  @each $display in $display-type {
+    .d-#{$display} {
+      display: $display !important;
+    }
+  }
+
+  // Sizing
+  @each $name, $property in $sizing-types {
+    @include sizing-util('.#{$name}-lg-full') {
+      max-#{$property}: auto !important;
+      #{$property}: auto !important;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.#{$name}-lg-#{$size}') {
+        max-#{$property}: auto !important;
+        #{$property}: auto !important;
+      }
+    }
+    @include sizing-util('.#{$name}-full') {
+      max-#{$property}: 100% !important;
+      #{$property}: 100% !important;
+    }
+    @each $size, $value in $sizing {
+      @include sizing-util('.#{$name}-#{$size}') {
+        max-#{$property}: $value !important;
+        #{$property}: 100% !important;
+      }
+    }
+  }
+
+  // Spacing
+  // Reset large padding to 0 on small device
+  @each $size, $value in $spacers {
+    @include padding-group('lg-', $size, unquote('0 !important'));
+  }
+
+  // Set proper padding on small devices
+  @each $size, $value in $spacers {
+    @include padding-group('', $size, unquote('#{$value} !important'));
+  }
+
+  // Spacers
+  @include spacer-util('*[class*=s-lg-]') {
+    font-size: 0 !important;
+    line-height: 0 !important;
+    height: 0 !important;
+  }
+
+  @each $size, $value in $spacers {
+    @include spacer-util('.s-#{$size}') {
+      font-size: $value !important;
+      line-height: $value !important;
+      height: $value !important;
+    }
+  }
+}

data/core/layout.html.erb

@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
+  </head>
+  <%= contents %>
+</html>

data/core/scss/_colors.scss

@@ -0,0 +1,161 @@
+// Color system
+$white:    #ffffff !default;
+$gray-100: #f7fafc !default;
+$gray-200: #edf2f7 !default;
+$gray-300: #e2e8f0 !default;
+$gray-400: #cbd5e0 !default;
+$gray-500: #a0aec0 !default;
+$gray-600: #718096 !default;
+$gray-700: #4a5568 !default;
+$gray-800: #2d3748 !default;
+$gray-900: #1a202c !default;
+$black:    #000000 !default;
+
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+) !default;
+
+$palette-colors: (
+  "black": $black,
+  "white": $white,
+  "transparent": "transparent",
+
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+
+  "blue-100": tint-color($blue, 80%),
+  "blue-200": tint-color($blue, 60%),
+  "blue-300": tint-color($blue, 40%),
+  "blue-400": tint-color($blue, 20%),
+  "blue-500": $blue,
+  "blue-600": shade-color($blue, 20%),
+  "blue-700": shade-color($blue, 40%),
+  "blue-800": shade-color($blue, 60%),
+  "blue-900": shade-color($blue, 80%),
+
+  "indigo-100": tint-color($indigo, 80%),
+  "indigo-200": tint-color($indigo, 60%),
+  "indigo-300": tint-color($indigo, 40%),
+  "indigo-400": tint-color($indigo, 20%),
+  "indigo-500": $indigo,
+  "indigo-600": shade-color($indigo, 20%),
+  "indigo-700": shade-color($indigo, 40%),
+  "indigo-800": shade-color($indigo, 60%),
+  "indigo-900": shade-color($indigo, 80%),
+
+  "purple-100": tint-color($purple, 80%),
+  "purple-200": tint-color($purple, 60%),
+  "purple-300": tint-color($purple, 40%),
+  "purple-400": tint-color($purple, 20%),
+  "purple-500": $purple,
+  "purple-600": shade-color($purple, 20%),
+  "purple-700": shade-color($purple, 40%),
+  "purple-800": shade-color($purple, 60%),
+  "purple-900": shade-color($purple, 80%),
+
+  "pink-100": tint-color($pink, 80%),
+  "pink-200": tint-color($pink, 60%),
+  "pink-300": tint-color($pink, 40%),
+  "pink-400": tint-color($pink, 20%),
+  "pink-500": $pink,
+  "pink-600": shade-color($pink, 20%),
+  "pink-700": shade-color($pink, 40%),
+  "pink-800": shade-color($pink, 60%),
+  "pink-900": shade-color($pink, 80%),
+
+  "red-100": tint-color($red, 80%),
+  "red-200": tint-color($red, 60%),
+  "red-300": tint-color($red, 40%),
+  "red-400": tint-color($red, 20%),
+  "red-500": $red,
+  "red-600": shade-color($red, 20%),
+  "red-700": shade-color($red, 40%),
+  "red-800": shade-color($red, 60%),
+  "red-900": shade-color($red, 80%),
+
+  "orange-100": tint-color($orange, 80%),
+  "orange-200": tint-color($orange, 60%),
+  "orange-300": tint-color($orange, 40%),
+  "orange-400": tint-color($orange, 20%),
+  "orange-500": $orange,
+  "orange-600": shade-color($orange, 20%),
+  "orange-700": shade-color($orange, 40%),
+  "orange-800": shade-color($orange, 60%),
+  "orange-900": shade-color($orange, 80%),
+
+  "yellow-100": tint-color($yellow, 80%),
+  "yellow-200": tint-color($yellow, 60%),
+  "yellow-300": tint-color($yellow, 40%),
+  "yellow-400": tint-color($yellow, 20%),
+  "yellow-500": $yellow,
+  "yellow-600": shade-color($yellow, 20%),
+  "yellow-700": shade-color($yellow, 40%),
+  "yellow-800": shade-color($yellow, 60%),
+  "yellow-900": shade-color($yellow, 80%),
+
+  "green-100": tint-color($green, 80%),
+  "green-200": tint-color($green, 60%),
+  "green-300": tint-color($green, 40%),
+  "green-400": tint-color($green, 20%),
+  "green-500": $green,
+  "green-600": shade-color($green, 20%),
+  "green-700": shade-color($green, 40%),
+  "green-800": shade-color($green, 60%),
+  "green-900": shade-color($green, 80%),
+
+  "teal-100": tint-color($teal, 80%),
+  "teal-200": tint-color($teal, 60%),
+  "teal-300": tint-color($teal, 40%),
+  "teal-400": tint-color($teal, 20%),
+  "teal-500": $teal,
+  "teal-600": shade-color($teal, 20%),
+  "teal-700": shade-color($teal, 40%),
+  "teal-800": shade-color($teal, 60%),
+  "teal-900": shade-color($teal, 80%),
+
+  "cyan-100": tint-color($cyan, 80%),
+  "cyan-200": tint-color($cyan, 60%),
+  "cyan-300": tint-color($cyan, 40%),
+  "cyan-400": tint-color($cyan, 20%),
+  "cyan-500": $cyan,
+  "cyan-600": shade-color($cyan, 20%),
+  "cyan-700": shade-color($cyan, 40%),
+  "cyan-800": shade-color($cyan, 60%),
+  "cyan-900": shade-color($cyan, 80%),
+) !default;
+
+$all-colors: map-merge($theme-colors, $palette-colors);

data/core/scss/_functions.scss

@@ -0,0 +1,29 @@
+@mixin color-contrast($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= 150) {
+    color: #111111;
+  } @else {
+    color: $white;
+  }
+}
+
+@function tint-color($color, $level) {
+  @return mix(white, $color, $level);
+}
+
+@function shade-color($color, $level) {
+  @return mix(black, $color, $level);
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}

data/core/scss/_helper_groups.scss

@@ -0,0 +1,21 @@
+@mixin padding-group($prefix, $size, $value) {
+  @include padding-util('.p-#{$prefix}#{$size}') {
+    padding: $value;
+  }
+
+  @include padding-util('.pt-#{$prefix}#{$size}, .py-#{$prefix}#{$size}') {
+    padding-top: $value;
+  }
+
+  @include padding-util('.pr-#{$prefix}#{$size}, .px-#{$prefix}#{$size}') {
+    padding-right: $value;
+  }
+
+  @include padding-util('.pb-#{$prefix}#{$size}, .py-#{$prefix}#{$size}') {
+    padding-bottom: $value;
+  }
+
+  @include padding-util('.pl-#{$prefix}#{$size}, .px-#{$prefix}#{$size}') {
+    padding-left: $value;
+  }
+}

data/core/{sass → scss}/_reboot_email.scss

@@ -1,7 +1,7 @@
-/* Based on https://templates.mailchimp.com/development/css/reset-styles/ by Mailchimp */
+// Based on https://templates.mailchimp.com/development/css/reset-styles/ by Mailchimp
 body, .body {
   margin: 0;
-  Margin: 0; // For compatibility with Outlook https://www.emailonacid.com/blog/article/email-development/outlook-com-does-support-margins/
+  Margin: 0; // For compatibility with Outlook
   padding: 0;
   border: 0;
   outline: 0;
@@ -27,26 +27,7 @@ img {
   line-height: 100%;
   outline: none;
   text-decoration: none;
-}
-
-a img {
-  border: 0 none;
-}
-
-// don't apply to spacers
-table:not([class^=s-]) {
-  font-family: $font-family-base;
-  mso-table-lspace: 0pt;
-  mso-table-rspace: 0pt;
-}
-
-table:not([class^=s-]) {
-  border-spacing: 0px;
-  border-collapse: collapse;
-  td {
-    border-spacing: 0px;
-    border-collapse: collapse;
-  }
+  display: block;
 }
 
 // to fix centering in yahoo
@@ -62,3 +43,7 @@ p {
   font-size: $font-size-base;
   margin: 0;
 }
+
+a {
+  color: $link-color;
+}