maily 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4eec9f6ff7965b84fade274481f733f6f943e24c
-  data.tar.gz: f94b2820645289fb453cdd84924bff70a1db1eed
+  metadata.gz: 9b143eb37ea922863a831b9cd11c6dea69114477
+  data.tar.gz: 9ad22c49d8c49ce3d064c5f29e01f56fa3aa4f7d
 SHA512:
-  metadata.gz: 4271c5cd492c9c6c030f89a0014d3e4257b5d4b5821098863a34e0cb38f619aff346a55831c9e8eb73fb6e2970b9fe889d517fed0d2128324450a035e3824606
-  data.tar.gz: 25625b8e6558ae187158fe431572aad65b6ac11b5fcafc237f95280770a19bbd321ed3029e1f72f6ca36852932af36cb4504995c2965645824561d44128f39d3
+  metadata.gz: 940fbdebbb81ebba521d6a6cfbd09a1dc40970711447f94f50245dabcb0e1bfe9fdca319b0ad304bfe17d6d820695847da4d52b71813f0081b02d1b463bfb6bc
+  data.tar.gz: 9d0307a2ef4e1c8728927b755837701fb02d657220fbbe702e9ca83e7d2ebd4438d200b85800228ef95106b65e5ff15a0914723b04b1c3ee6454d1641c37fc99

data/.travis.yml

@@ -5,22 +5,19 @@ cache: bundler
 sudo: false
 
 rvm:
-  - 2.4.0
-  - 2.3.3
-  - 2.2.6
+  - 2.4.1
+  - 2.3.4
+  - 2.2.7
   - 2.1
 
 gemfile:
+  - gemfiles/rails_5.1.gemfile
   - gemfiles/rails_5.0.gemfile
   - gemfiles/rails_4.2.gemfile
-  - gemfiles/rails_4.1.gemfile
-  - gemfiles/rails_3.2.gemfile
 
 matrix:
   exclude:
     - rvm: 2.1
       gemfile: gemfiles/rails_5.0.gemfile
-    - rvm: 2.4.0
-      gemfile: gemfiles/rails_4.1.gemfile
-    - rvm: 2.4.0
-      gemfile: gemfiles/rails_3.2.gemfile
+    - rvm: 2.1
+      gemfile: gemfiles/rails_5.1.gemfile

data/Appraisals

@@ -1,15 +1,11 @@
+appraise "rails-5.1" do
+  gem "rails", "~> 5.1.0"
+end
+
 appraise "rails-5.0" do
   gem "rails", "~> 5.0.0"
 end
 
 appraise "rails-4.2" do
   gem "rails", github: 'rails/rails', branch: '4-2-stable'
-end
-
-appraise "rails-4.1" do
-  gem "rails", "~> 4.1.0"
-end
-
-appraise "rails-3.2" do
-  gem "rails", "~> 3.2.0"
 end

data/README.md

@@ -2,20 +2,18 @@
 
 [![Gem Version](https://badge.fury.io/rb/maily.svg)](http://badge.fury.io/rb/maily) [![Build Status](https://travis-ci.org/markets/maily.svg?branch=master)](https://travis-ci.org/markets/maily)
 
-Stop to delivery emails every time you change it!
-
-Maily is a Rails Engine to preview, follow up, test and edit the emails of your applications in the browser.
+Maily is a Rails Engine to manage, test and navigate through all your email templates of your app, being able to preview them directly in your browser.
 
 ## Features:
 
 * Mountable engine
 * Visual preview in the browser (attachments as well)
-* Template edition
+* Template edition (only in development)
 * Email delivery
 * Features configurables per environment
 * Flexible authorization
-* Minimalistic interface (thanks to [@gnatok](https://github.com/gnatok))
-* Easy way (named hooks) to define data for emails
+* Minimalistic and clean interface
+* Easy way (aka `hooks`) to define data for emails
 * Generator to handle a comfortable installation
 
 ![](screenshot.png)
@@ -70,30 +68,37 @@ Maily.setup do |config|
   # Run maily under different controller ('ActionController::Base' by default)
   # config.base_controller = '::AdminController'
 
+  # Configure hooks path
+  # config.hooks_path = 'lib/maily_hooks.rb'
+
   # Http basic authentication (nil by default)
   # config.http_authorization = { username: 'admin', password: 'secret' }
+
+  # Customize welcome message
+  # config.welcome_message = "Welcome to our email testing platform. If you have any problem, please contact support team at support@example.com."
 end
 ```
 
 ### Templates edition (`allow_edition` option)
 
-This feature was designed for `development` environment. Since it's just a file edition and running `production` mode, code is not reloaded between requests, Rails doesn't take in account this change (without restarting the server). Also, allow arbitrary ruby code evaluation is potentially dangerous, that's not a good idea for `production`.
+This feature was designed for `development` environment. Since it's just a file edition and running in `production`, code is not reloaded between requests, Rails doesn't take in account this change (without restarting the server). Also, allow arbitrary ruby code evaluation is potentially dangerous, that's not a good idea for `production`.
 
-So, templates edition is not allowed running `production` mode.
+So, template edition is not allowed outside of `development` environment.
 
 ## Hooks
 
-Most of emails need to populate data to consume it and do interesting things. Hooks are used to define this data with a little DSL. Example:
+Most of emails need to populate some data to consume it and do interesting things. Hooks are used to define this data with a little DSL. Hooks accept "callable" objects to lazy load (most expensive) data. Example:
 
 ```ruby
 # lib/maily_hooks.rb
 user = User.new(email: 'user@example.com')
+lazy_user = -> { User.with_comments.first } # callable object, lazy evaluation
 comment = Struct.new(:body).new('Lorem ipsum') # stub way
 service = FactoryGirl.create(:service) # using fixtures with FactoryGirl
 
 Maily.hooks_for('Notifier') do |mailer|
   mailer.register_hook(:welcome, user, template_path: 'users')
-  mailer.register_hook(:new_comment, user, comment)
+  mailer.register_hook(:new_comment, lazy_user, comment)
 end
 
 Maily.hooks_for('PaymentNotifier') do |mailer|
@@ -109,6 +114,16 @@ Maily.hooks_for('YourMailerClass') do |mailer|
 end
 ```
 
+### Email description
+
+You can add a description to any email and it will be displayed along with its preview. This is useful in some cases like: someone from another team, for example, a marketing specialist, visiting Maily to review some texts and images; they can easily understand when this email is sent by the system.
+
+```ruby
+Maily.hooks_for('BookingNotifier') do |mailer|
+  mailer.register_hook(:accepted, description: "This email is sent when a reservation has been accepted by the system." )
+end
+```
+
 ## Authorization
 
 Basically, you have 2 ways to restrict the access to `Maily`.
@@ -130,7 +145,7 @@ class AdminController < ActionController::Base
   private
 
   def maily_authorized?
-    (current_user && current_user.admin?) || raise("You don't have access to this section!")
+    current_user.admin? || raise("You don't have access to this section!")
   end
 end
 ```

data/app/assets/javascripts/maily/application.js

@@ -1,5 +1,3 @@
-//= require_tree .
-
 function resizeIframe(obj) {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
 }

data/app/assets/stylesheets/maily/application.scss

@@ -1,14 +1,11 @@
-/*
- *= require maily/normalize
- *= require maily/icons
-*/
+@import "maily/normalize";
+@import "maily/icons";
 
-/* Default */
 @font-face {
   font-weight: light;
   font-style: normal;
   font-family: 'Josefin Sans';
-  src: url('fonts/JosefinSans-Light.ttf') format('truetype');
+  src: asset-url('maily/fonts/JosefinSans-Light.ttf') format('truetype');
 }
 
 ::-webkit-input-placeholder {
@@ -78,11 +75,11 @@ footer.footer {
   bottom: 0;
   box-shadow: 0 -.0625em .3125em rgba(0,0,0, .15);
   font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: .9em;
 
   a {
     color: $linkColor;
     text-decoration: none;
-    font-size: .9em;
   }
 }
 
@@ -309,3 +306,12 @@ aside.sidebar {
     }
   }
 }
+
+/* ALERT */
+.alert {
+  color: #a94442;
+  background-color: #f2dede;
+  padding: 15px;
+  margin-bottom: 20px;
+  display: flex;
+}

data/app/assets/stylesheets/maily/icons.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'maily';
-  src:url('icons/maily.eot');
-  src:url('icons/maily.eot?#iefix') format('embedded-opentype'),
-    url('icons/maily.woff') format('woff'),
-    url('icons/maily.ttf') format('truetype'),
-    url('icons/maily.svg#maily') format('svg');
+  src:asset-url('maily/icons/maily.eot');
+  src:asset-url('maily/icons/maily.eot?#iefix') format('embedded-opentype'),
+    asset-url('maily/icons/maily.woff') format('woff'),
+    asset-url('maily/icons/maily.ttf') format('truetype'),
+    asset-url('maily/icons/maily.svg#maily') format('svg');
   font-weight: normal;
   font-style: normal;
 }

data/app/assets/stylesheets/maily/normalize.css

@@ -1,406 +1,447 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
 
-/* ==========================================================================
-   HTML5 display definitions
+/* Document
    ========================================================================== */
 
 /**
- * Correct `block` display not defined in IE 8/9.
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
  */
 
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-    display: block;
+html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
+/* Sections
+   ========================================================================== */
+
 /**
- * Correct `inline-block` display not defined in IE 8/9.
+ * Remove the margin in all browsers (opinionated).
  */
 
-audio,
-canvas,
-video {
-    display: inline-block;
+body {
+  margin: 0;
 }
 
 /**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
+ * Add the correct display in IE 9-.
  */
 
-audio:not([controls]) {
-    display: none;
-    height: 0;
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
 }
 
 /**
- * Address `[hidden]` styling not present in IE 8/9.
- * Hide the `template` element in IE, Safari, and Firefox < 22.
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
  */
 
-[hidden],
-template {
-    display: none;
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
 }
 
-/* ==========================================================================
-   Base
+/* Grouping content
    ========================================================================== */
 
 /**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
  */
 
-html {
-    font-family: sans-serif; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
 }
 
 /**
- * Remove default margin.
+ * Add the correct margin in IE 8.
  */
 
-body {
-    margin: 0;
+figure {
+  margin: 1em 40px;
 }
 
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
 /**
- * Remove the gray background color from active links in IE 10.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
  */
 
-a {
-    background: transparent;
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
- * Address `outline` inconsistency between Chrome and other browsers.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-a:focus {
-    outline: thin dotted;
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
+/* Text-level semantics
+   ========================================================================== */
+
 /**
- * Improve readability when focused and also mouse hovered in all browsers.
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  */
 
-a:active,
-a:hover {
-    outline: 0;
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
 }
 
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
 /**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
 /**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  */
 
-abbr[title] {
-    border-bottom: 1px dotted;
+b,
+strong {
+  font-weight: inherit;
 }
 
 /**
- * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ * Add the correct font weight in Chrome, Edge, and Safari.
  */
 
 b,
 strong {
-    font-weight: bold;
+  font-weight: bolder;
 }
 
 /**
- * Address styling not present in Safari 5 and Chrome.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-dfn {
-    font-style: italic;
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
- * Address differences between Firefox and other browsers.
+ * Add the correct font style in Android 4.3-.
  */
 
-hr {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    height: 0;
+dfn {
+  font-style: italic;
 }
 
 /**
- * Address styling not present in IE 8/9.
+ * Add the correct background and color in IE 9-.
  */
 
 mark {
-    background: #ff0;
-    color: #000;
+  background-color: #ff0;
+  color: #000;
 }
 
 /**
- * Correct font family set oddly in Safari 5 and Chrome.
+ * Add the correct font size in all browsers.
  */
 
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    font-size: 1em;
+small {
+  font-size: 80%;
 }
 
 /**
- * Improve readability of pre-formatted text in all browsers.
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
  */
 
-pre {
-    white-space: pre-wrap;
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
 /**
- * Set consistent quote types.
+ * Add the correct display in IE 9-.
  */
 
-q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
+audio,
+video {
+  display: inline-block;
 }
 
 /**
- * Address inconsistent and variable font size in all browsers.
+ * Add the correct display in iOS 4-7.
  */
 
-small {
-    font-size: 80%;
+audio:not([controls]) {
+  display: none;
+  height: 0;
 }
 
 /**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ * Remove the border on images inside links in IE 10-.
  */
 
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+img {
+  border-style: none;
 }
 
-sup {
-    top: -0.5em;
-}
+/**
+ * Hide the overflow in IE.
+ */
 
-sub {
-    bottom: -0.25em;
+svg:not(:root) {
+  overflow: hidden;
 }
 
-/* ==========================================================================
-   Embedded content
+/* Forms
    ========================================================================== */
 
 /**
- * Remove border when inside `a` element in IE 8/9.
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
  */
 
-img {
-    border: 0;
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
- * Correct overflow displayed oddly in IE 9.
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
  */
 
-svg:not(:root) {
-    overflow: hidden;
+button,
+input { /* 1 */
+  overflow: visible;
 }
 
-/* ==========================================================================
-   Figures
-   ========================================================================== */
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
 
 /**
- * Address margin not present in IE 8/9 and Safari 5.
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
  */
 
-figure {
-    margin: 0;
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
 }
 
-/* ==========================================================================
-   Forms
-   ========================================================================== */
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
 
 /**
- * Define consistent border, margin, and padding.
+ * Correct the padding in Firefox.
  */
 
 fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
  */
 
 legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
 /**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 
-button,
-input,
-select,
-textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
-    margin: 0; /* 3 */
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
 }
 
 /**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
+ * Remove the default vertical scrollbar in IE.
  */
 
-button,
-input {
-    line-height: normal;
+textarea {
+  overflow: auto;
 }
 
 /**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
-button,
-select {
-    text-transform: none;
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
+ * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
 }
 
 /**
- * Re-set default cursor for disabled elements.
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
  */
 
-button[disabled],
-html input[disabled] {
-    cursor: default;
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
 
 /**
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  */
 
-input[type="checkbox"],
-input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
 }
 
 /**
- * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
  */
 
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
-/**
- * Remove inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
  */
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
+details, /* 1 */
+menu {
+  display: block;
 }
 
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
 /**
- * Remove inner padding and border in Firefox 4+.
+ * Add the correct display in IE 9-.
  */
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
+canvas {
+  display: inline-block;
 }
 
 /**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
+ * Add the correct display in IE.
  */
 
-textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
+template {
+  display: none;
 }
 
-/* ==========================================================================
-   Tables
+/* Hidden
    ========================================================================== */
 
 /**
- * Remove most spacing between table cells.
+ * Add the correct display in IE 10-.
  */
 
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
+[hidden] {
+  display: none;
+}