Repository: foundation/foundation-emails Branch: develop Commit: 7a37ae4cad4f Files: 130 Total size: 328.4 KB Directory structure: gitextract_ldk09dof/ ├── .browserslistrc ├── .github/ │ ├── ISSUE_TEMPLATE.md │ └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .nvmrc ├── .sass-lint.yml ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── bower.json ├── dist/ │ └── foundation-emails.css ├── docs/ │ ├── assets/ │ │ ├── js/ │ │ │ ├── codeSample.js │ │ │ ├── docs.ad.js │ │ │ └── docs.js │ │ └── scss/ │ │ ├── _code.scss │ │ ├── _compatibility.scss │ │ ├── _course-callout.scss │ │ └── docs.scss │ ├── layouts/ │ │ ├── component.html │ │ └── default.html │ ├── pages/ │ │ ├── alignment.md │ │ ├── button.md │ │ ├── callout.md │ │ ├── compatibility.md │ │ ├── css-guide.md │ │ ├── gem-guide.md │ │ ├── global.md │ │ ├── grid.md │ │ ├── index.md │ │ ├── inky.md │ │ ├── media-query.md │ │ ├── menu.md │ │ ├── migration.md │ │ ├── panini.md │ │ ├── sass-guide.md │ │ ├── sass.md │ │ ├── spacer.md │ │ ├── styling.md │ │ ├── thumbnail.md │ │ ├── tips-tricks.md │ │ ├── typography.md │ │ ├── visibility.md │ │ ├── wrapper.md │ │ └── zurb-stack.md │ └── partials/ │ ├── component-list.html │ ├── course-callout.html │ ├── footer.html │ ├── mobile-navigation.html │ ├── navigation.html │ └── off-canvas.html ├── gem/ │ ├── .gitignore │ ├── .rspec │ ├── .travis.yml │ ├── Gemfile │ ├── LICENSE.md │ ├── README.md │ ├── Rakefile │ ├── bin/ │ │ ├── console │ │ └── setup │ ├── foundation-emails.gemspec │ ├── lib/ │ │ ├── foundation_emails/ │ │ │ ├── engine.rb │ │ │ └── version.rb │ │ └── foundation_emails.rb │ ├── spec/ │ │ ├── foundation/ │ │ │ └── emails_spec.rb │ │ └── spec_helper.rb │ └── vendor/ │ └── assets/ │ └── stylesheets/ │ └── _foundation-emails.scss ├── gulpfile.js ├── migration.md ├── package.json ├── scss/ │ ├── _global.scss │ ├── components/ │ │ ├── _alignment.scss │ │ ├── _button.scss │ │ ├── _callout.scss │ │ ├── _code.scss │ │ ├── _media-query.scss │ │ ├── _menu.scss │ │ ├── _normalize.scss │ │ ├── _outlook-first.scss │ │ ├── _thumbnail.scss │ │ ├── _typography.scss │ │ └── _visibility.scss │ ├── foundation-emails.scss │ ├── grid/ │ │ ├── _block-grid.scss │ │ └── _grid.scss │ ├── settings/ │ │ └── _settings.scss │ └── util/ │ └── _util.scss ├── templates/ │ ├── basic.html │ ├── drip.html │ ├── hero.html │ ├── marketing.html │ ├── newsletter-2.html │ ├── newsletter.html │ ├── order.html │ ├── password.html │ ├── sidebar-hero.html │ ├── sidebar.html │ └── welcome.html └── test/ └── visual/ ├── _template.html └── pages/ ├── alignment.html ├── anchor.html ├── attributes.html ├── block-inky.html ├── button-expanded-inky.html ├── button-hollow.html ├── button-inky.html ├── callout-in-grid.html ├── center-width.html ├── container-radius.html ├── expander.html ├── fluid-header.html ├── grid-collapse.html ├── grid-inky.html ├── grid-nested-inky.html ├── grid-with-callouts-inky.html ├── grid.html ├── hr.html ├── images.html ├── index.html ├── inliner-bugs.html ├── layout-break-center.html ├── list.html ├── menu-inky.html ├── offset-inky.html ├── outlook-image-width.html ├── spacer.html ├── spacing.html ├── thumbnail.html ├── type.html └── visibility.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .browserslistrc ================================================ # Browsers that we support last 2 versions ie >= 9 ios >= 7 android >= 4.4 ================================================ FILE: .github/ISSUE_TEMPLATE.md ================================================ **How can we reproduce this bug?** Write out the HTML (or Inky code) that causes the issue. **What did you expect to happen?** **What happened instead?** **What email clients does this happen in?** ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ Before submitting a pull request, make sure it's targeting the right branch: - For fixes to Ink 1.0, use `master`. - For fixes to Foundation for Emails 2, use `v2.0`. Happy coding! :) ================================================ FILE: .gitignore ================================================ *.DS_Store node_modules/ .sass-cache/ npm-debug.log temp/ _build/ inky *.swp .templates .download foundation-emails.zip bower_components .idea/ ================================================ FILE: .npmignore ================================================ _build docs gem inky testing ================================================ FILE: .nvmrc ================================================ 20 ================================================ FILE: .sass-lint.yml ================================================ files: include: 'scss/**/*.scss' options: formatter: stylish merge-default-rules: false rules: border-zero: - 1 - convention: zero brace-style: - 1 - allow-single-line: false class-name-format: - 1 - convention: '([a-z0-9]+-?)+' clean-import-paths: - 1 - filename-extension: false leading-underscore: false empty-line-between-blocks: - 1 - ignore-single-line-rulesets: true extends-before-declarations: 1 extends-before-mixins: 1 final-newline: - 1 - include: true force-attribute-nesting: 1 force-element-nesting: 1 force-pseudo-nesting: 1 function-name-format: - 1 - allow-leading-underscore: true convention: hyphenatedlowercase hex-length: - 1 - style: short hex-notation: - 1 - style: lowercase id-name-format: - 1 - convention: '([a-z0-9]+-?)+' indentation: - 1 - size: 2 leading-zero: - 1 - include: true mixin-name-format: - 1 - allow-leading-underscore: true convention: hyphenatedlowercase mixins-before-declarations: 1 nesting-depth: - 1 - max-depth: 3 no-color-keyword: 1 no-color-literals: 1 no-css-comments: 0 no-debug: 1 no-duplicate-properties: 1 no-empty-rulesets: 1 no-ids: 1 no-important: 0 no-invalid-hex: 1 no-mergeable-selectors: 1 no-misspelled-properties: - 1 - extra-properties: [] no-qualifying-elements: - 0 - allow-element-with-attribute: false allow-element-with-class: false allow-element-with-id: false no-trailing-zero: 1 no-url-protocols: 1 placeholder-in-extend: 1 placeholder-name-format: - 1 - convention: '([a-z0-9]+-?)+' property-sort-order: - 0 - ignore-custom-properties: false quotes: - 1 - style: single shorthand-values: 1 single-line-per-selector: 0 space-after-bang: - 1 - include: false space-after-colon: - 1 - include: true space-after-comma: 1 space-before-bang: - 1 - include: true space-before-brace: - 1 - include: true space-before-colon: 1 space-between-parens: - 1 - include: false trailing-semicolon: 1 url-quotes: 1 variable-for-property: - 0 - properties: [] variable-name-format: - 1 - allow-leading-underscore: true convention: hyphenatedlowercase zero-unit: 1 ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing to Foundation Foundation loves its community! We always want to hear from our users, whether they're reporting bugs, suggesting new features, or even adding them themselves. ## Reporting Bugs [Open a new issue](https://github.com/foundation/foundation-emails/issues/new) to report a problem you're having with Foundation for Apps. When writing your issue, keep these things in mind: - **Be descriptive.** If you can, upload a screenshot of problem you're having, or copy and paste any JavaScript or command line errors you encounter. Being detailed will help us hone in on the problem faster. - **Post your code.** It's very helpful to see any HTML, Sass, or JavaScript you've written that you think may be causing the problem. In some cases, we might be able to fix your problem just by fixing your code. - **Help us recreate it.** If your problem is complex, tell us the steps needed to recreate the issue. Sometimes we need to see the problem for ourselves, in our own testing environment, so we can more easily debug it. ## Editing the Documentation The documentation is compiled by a tool called [Supercollider](https://github.com/gakimball/supercollider). Each page is compiled from 1–2 sources: - A Markdown file under `docs/pages/`. - If it's a Sass component, the relevant Sass file inside `scss/` is scanned for special [SassDoc](http://sassdoc.com/) comments. Each page is rendered in one big [Handlebars template](https://github.com/foundation/foundation-docs/blob/master/templates/component.html) that takes in all of the above data. Much of the guts of the documentation are stored in an external codebase called [foundation-docs](https://github.com/foundation/foundation-docs). This is code that's shared between the documentation for all three Foundation frameworks, including: - CSS specific to the documentation - The Handlebars template used to build pages - A series of Handlebars helpers for the template - A custom Markdown parser used when parsing pages - A script that generates the search results for documentation pages To hack on this repo locally, clone the foundation-docs repo into a folder adjacent to this repo's folder on your machine. Then run `npm link ../foundation-docs` to wire the two together. ## Submitting Pull Requests If you think you can solve a problem yourself, or want to implement a new feature, go for it! Follow these guidelines to make the most killer PR ever. - **Target the right branch.** So we can properly follow [semantic versioning](http://semver.org/), be sure to develop your pull request in the right branch: - Ink 1.0 changes: `v1.0` - Foundation for Emails 2.0+ bug fixes: `develop` - New features should be pointed to: `v2.3` - **Test, test, and test.** The Foundation frameworks are used by thousands and thousands of designers and developers, so making sure your changes work in every email client is important! Please test bug fixes or new features in Litmus, or another email testing service. ## Help Wanted Want something to work on? Let us guide you in the right direction. - Browse the [Help Wanted](https://github.com/foundation/foundation-emails/labels/help%20wanted) issue to see bugs or features we've asked for the community's help on. Feel free to implement them yourself as a pull request! ================================================ FILE: LICENSE.md ================================================ Copyright (c) 2017 Foundation, inc. MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # [Foundation for Emails](https://get.foundation/emails) [![npm version badge](https://img.shields.io/npm/v/foundation-emails.svg)](https://www.npmjs.org/package/foundation-emails) [![downloads badge](http://img.shields.io/npm/dm/foundation-emails.svg)](https://www.npmjs.org/package/foundation-emails) [![Gem Version](https://badge.fury.io/rb/foundation_emails.svg)](https://badge.fury.io/rb/foundation_emails) [![downloads badge](http://img.shields.io/npm/l/foundation-emails.svg)](https://www.npmjs.org/package/foundation-emails) [![CDNJS](https://img.shields.io/cdnjs/v/foundation-emails.svg)](https://cdnjs.com/libraries/foundation-emails) Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook. Our HTML/CSS components have been tested across every major email client to ensure consistency. And with the [Inky](https://github.com/foundation/inky) templating language, writing HTML emails is now even easier. ## Getting Started The main way to get started is with our [email template stack](https://github.com/foundation/foundation-emails-template). To use the stack, you'll need [Node.js](https://nodejs.org/en/) no greater than version 10 installed on your machine. `nvm` installation instructions can be found [here](https://github.com/nvm-sh/nvm#install--update-script) To set up the emails template, run these commands: ```bash git clone https://github.com/foundation/foundation-emails-template project cd project nvm install 10 nvm use 10 npm install ``` Then run `npm start` to run the project. A new browser window will open with a BrowserSync server showing the finished files. Run `npm run build` to do a full email inlining process. #### Using the Ruby gem **foundation_emails** is a gem that enables you to use Foundation for Emails assets within a Rails project. To install in your app: 1. Add the following line to your Gemfile: ```ruby gem 'foundation_emails' ``` 2. Then execute: ```bash bundle install ``` 3. Import Foundation for Emails in your emails' stylesheet(s): ```scss // app/assets/stylesheets/your_emails_stylesheet.scss @import "foundation-emails"; ``` Adding Inky's templating capabilities to Rails is easy thanks to the [**inky-rb**](https://github.com/foundation/inky-rb) gem, which bundles `foundation_emails` by default. ## Documentation **Check out our [Migration Guide](https://github.com/foundation/foundation-emails/blob/master/migration.md) for upgrading an existing template or for more in-depth code examples.** Foundation for Emails 2.0 documentation and framework are on the `develop` branch and you can compile it on your own machine. Run these commands to set up the documentation: ```bash git clone https://github.com/foundation/foundation-emails.git cd foundation-emails ``` Foundation for Emails 2.0 documentation is on the `develop` branch. ```bash git fetch git checkout develop npm install ``` Then run `npm start` to compile the documentation. When it finishes, a new browser window will open pointing to a BrowserSync server displaying the documentation. ## Testing Run `npm run test:visual` to compile the visual regression tests. All of the pages under `test/visual/pages` are compiled and inlined. From there, they can be uploaded to Litmus for testing. ## Inky [Inky](https://github.com/foundation/inky) is our new templating language that converts simple HTML into the complex tables required for email layout. The parser converts a set of custom HTML tags, expanding them out into full HTML syntax. Below is a list of every custom element. ### Grid ```html ``` ### Block Grid ```html ``` ### Components ```html ``` ```html Item One Item Two Item Three ``` ## Future Plans Foundation for Emails will be merging into the [Inky](https://github.com/foundation/inky) project starting with Inky v2.0. Inky will become a complete email framework — combining the templating engine and the styling framework (currently Foundation for Emails) into a single project. **What this means:** - The styling portion of Foundation for Emails will live on as **Inky Styles** within the Inky repo - The Inky templating engine is being rewritten in Rust, with bindings for JavaScript (via WASM), PHP, Python, Ruby, and Go - This repo will continue to receive maintenance updates but new feature development will happen in Inky v2 Follow progress on the [Inky repo](https://github.com/foundation/inky). ## Contributing As an open source project, we love our community support. Please file issues, or better yet pull requests on the [Foundation for Emails Repo](https://github.com/foundation/foundation-emails). We're stoked to hear your feedback, make improvements, and keep evolving Foundation for Emails! Copyright (c) 2026 Foundation, inc. ================================================ FILE: bower.json ================================================ { "name": "foundation-emails", "version": "2.2.1", "homepage": "https://get.foundation/emails", "authors": [ "Foundation " ], "description": "A framework for designing responsive emails by Foundation.", "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "gem", "test", "tests" ] } ================================================ FILE: dist/foundation-emails.css ================================================ .wrapper { width: 100%; } #outlook a { padding: 0; } body { width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; Margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass th, .ExternalClass div { line-height: 100%; } #backgroundTable { margin: 0; Margin: 0; padding: 0; width: 100% !important; line-height: 100% !important; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; clear: both; display: block; } center { width: 100%; } a img { border: none; } table { border-spacing: 0; border-collapse: collapse; } td, th { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } table, tr, td, th { padding: 0; vertical-align: top; text-align: left; } @media only screen { html { min-height: 100%; background: #f3f3f3; } } table.body { background: #f3f3f3; height: 100%; width: 100%; } table.container { background: #fefefe; width: 580px; margin: 0 auto; Margin: 0 auto; text-align: inherit; } table.row { padding: 0; width: 100%; position: relative; } table.spacer { width: 100%; } table.spacer 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: 16px; padding-bottom: 16px; } td.columns .column.first, td.columns .columns.first, td.column .column.first, td.column .columns.first, th.columns .column.first, th.columns .columns.first, th.column .column.first, th.column .columns.first { padding-left: 0 !important; } td.columns .column.last, td.columns .columns.last, td.column .column.last, td.column .columns.last, th.columns .column.last, th.columns .columns.last, th.column .column.last, th.column .columns.last { padding-right: 0 !important; } td.columns .column:not([class*=large-offset]), td.columns .columns:not([class*=large-offset]), td.column .column:not([class*=large-offset]), td.column .columns:not([class*=large-offset]), th.columns .column:not([class*=large-offset]), th.columns .columns:not([class*=large-offset]), th.column .column:not([class*=large-offset]), th.column .columns:not([class*=large-offset]) { padding-left: 0 !important; padding-right: 0 !important; } td.columns.last, td.column.last, th.columns.last, th.column.last { padding-right: 16px; } td.columns table, td.column table, th.columns table, th.column table { width: 100%; } td.columns table.button, td.column table.button, th.columns table.button, th.column table.button { width: auto; } td.columns table.button.expand, td.columns table.button.expanded, td.column table.button.expand, td.column table.button.expanded, th.columns table.button.expand, th.columns table.button.expanded, th.column table.button.expand, th.column table.button.expanded { width: 100%; } td.large-1, th.large-1 { width: 32.3333333333px; padding-left: 8px; padding-right: 8px; } td.large-1.first, th.large-1.first { padding-left: 16px; } td.large-1.last, th.large-1.last { padding-right: 16px; } .collapse > tbody > tr > td.large-1:not([class*=large-offset]), .collapse > tbody > tr > th.large-1:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 48.3333333333px; } .collapse > tbody > tr td.large-1.first, .collapse > tbody > tr th.large-1.first, .collapse > tbody > tr td.large-1.last, .collapse > tbody > tr th.large-1.last { width: 56.3333333333px; } .body .columns td.large-1, .body .column td.large-1, .body .columns th.large-1, .body .column th.large-1 { width: 8.333333%; } td.large-2, th.large-2 { width: 80.6666666667px; padding-left: 8px; padding-right: 8px; } td.large-2.first, th.large-2.first { padding-left: 16px; } td.large-2.last, th.large-2.last { padding-right: 16px; } .collapse > tbody > tr > td.large-2:not([class*=large-offset]), .collapse > tbody > tr > th.large-2:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 96.6666666667px; } .collapse > tbody > tr td.large-2.first, .collapse > tbody > tr th.large-2.first, .collapse > tbody > tr td.large-2.last, .collapse > tbody > tr th.large-2.last { width: 104.6666666667px; } .body .columns td.large-2, .body .column td.large-2, .body .columns th.large-2, .body .column th.large-2 { width: 16.666666%; } td.large-3, th.large-3 { width: 129px; padding-left: 8px; padding-right: 8px; } td.large-3.first, th.large-3.first { padding-left: 16px; } td.large-3.last, th.large-3.last { padding-right: 16px; } .collapse > tbody > tr > td.large-3:not([class*=large-offset]), .collapse > tbody > tr > th.large-3:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 145px; } .collapse > tbody > tr td.large-3.first, .collapse > tbody > tr th.large-3.first, .collapse > tbody > tr td.large-3.last, .collapse > tbody > tr th.large-3.last { width: 153px; } .body .columns td.large-3, .body .column td.large-3, .body .columns th.large-3, .body .column th.large-3 { width: 25%; } td.large-4, th.large-4 { width: 177.3333333333px; padding-left: 8px; padding-right: 8px; } td.large-4.first, th.large-4.first { padding-left: 16px; } td.large-4.last, th.large-4.last { padding-right: 16px; } .collapse > tbody > tr > td.large-4:not([class*=large-offset]), .collapse > tbody > tr > th.large-4:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 193.3333333333px; } .collapse > tbody > tr td.large-4.first, .collapse > tbody > tr th.large-4.first, .collapse > tbody > tr td.large-4.last, .collapse > tbody > tr th.large-4.last { width: 201.3333333333px; } .body .columns td.large-4, .body .column td.large-4, .body .columns th.large-4, .body .column th.large-4 { width: 33.333333%; } td.large-5, th.large-5 { width: 225.6666666667px; padding-left: 8px; padding-right: 8px; } td.large-5.first, th.large-5.first { padding-left: 16px; } td.large-5.last, th.large-5.last { padding-right: 16px; } .collapse > tbody > tr > td.large-5:not([class*=large-offset]), .collapse > tbody > tr > th.large-5:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 241.6666666667px; } .collapse > tbody > tr td.large-5.first, .collapse > tbody > tr th.large-5.first, .collapse > tbody > tr td.large-5.last, .collapse > tbody > tr th.large-5.last { width: 249.6666666667px; } .body .columns td.large-5, .body .column td.large-5, .body .columns th.large-5, .body .column th.large-5 { width: 41.666666%; } td.large-6, th.large-6 { width: 274px; padding-left: 8px; padding-right: 8px; } td.large-6.first, th.large-6.first { padding-left: 16px; } td.large-6.last, th.large-6.last { padding-right: 16px; } .collapse > tbody > tr > td.large-6:not([class*=large-offset]), .collapse > tbody > tr > th.large-6:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 290px; } .collapse > tbody > tr td.large-6.first, .collapse > tbody > tr th.large-6.first, .collapse > tbody > tr td.large-6.last, .collapse > tbody > tr th.large-6.last { width: 298px; } .body .columns td.large-6, .body .column td.large-6, .body .columns th.large-6, .body .column th.large-6 { width: 50%; } td.large-7, th.large-7 { width: 322.3333333333px; padding-left: 8px; padding-right: 8px; } td.large-7.first, th.large-7.first { padding-left: 16px; } td.large-7.last, th.large-7.last { padding-right: 16px; } .collapse > tbody > tr > td.large-7:not([class*=large-offset]), .collapse > tbody > tr > th.large-7:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 338.3333333333px; } .collapse > tbody > tr td.large-7.first, .collapse > tbody > tr th.large-7.first, .collapse > tbody > tr td.large-7.last, .collapse > tbody > tr th.large-7.last { width: 346.3333333333px; } .body .columns td.large-7, .body .column td.large-7, .body .columns th.large-7, .body .column th.large-7 { width: 58.333333%; } td.large-8, th.large-8 { width: 370.6666666667px; padding-left: 8px; padding-right: 8px; } td.large-8.first, th.large-8.first { padding-left: 16px; } td.large-8.last, th.large-8.last { padding-right: 16px; } .collapse > tbody > tr > td.large-8:not([class*=large-offset]), .collapse > tbody > tr > th.large-8:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 386.6666666667px; } .collapse > tbody > tr td.large-8.first, .collapse > tbody > tr th.large-8.first, .collapse > tbody > tr td.large-8.last, .collapse > tbody > tr th.large-8.last { width: 394.6666666667px; } .body .columns td.large-8, .body .column td.large-8, .body .columns th.large-8, .body .column th.large-8 { width: 66.666666%; } td.large-9, th.large-9 { width: 419px; padding-left: 8px; padding-right: 8px; } td.large-9.first, th.large-9.first { padding-left: 16px; } td.large-9.last, th.large-9.last { padding-right: 16px; } .collapse > tbody > tr > td.large-9:not([class*=large-offset]), .collapse > tbody > tr > th.large-9:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 435px; } .collapse > tbody > tr td.large-9.first, .collapse > tbody > tr th.large-9.first, .collapse > tbody > tr td.large-9.last, .collapse > tbody > tr th.large-9.last { width: 443px; } .body .columns td.large-9, .body .column td.large-9, .body .columns th.large-9, .body .column th.large-9 { width: 75%; } td.large-10, th.large-10 { width: 467.3333333333px; padding-left: 8px; padding-right: 8px; } td.large-10.first, th.large-10.first { padding-left: 16px; } td.large-10.last, th.large-10.last { padding-right: 16px; } .collapse > tbody > tr > td.large-10:not([class*=large-offset]), .collapse > tbody > tr > th.large-10:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 483.3333333333px; } .collapse > tbody > tr td.large-10.first, .collapse > tbody > tr th.large-10.first, .collapse > tbody > tr td.large-10.last, .collapse > tbody > tr th.large-10.last { width: 491.3333333333px; } .body .columns td.large-10, .body .column td.large-10, .body .columns th.large-10, .body .column th.large-10 { width: 83.333333%; } td.large-11, th.large-11 { width: 515.6666666667px; padding-left: 8px; padding-right: 8px; } td.large-11.first, th.large-11.first { padding-left: 16px; } td.large-11.last, th.large-11.last { padding-right: 16px; } .collapse > tbody > tr > td.large-11:not([class*=large-offset]), .collapse > tbody > tr > th.large-11:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 531.6666666667px; } .collapse > tbody > tr td.large-11.first, .collapse > tbody > tr th.large-11.first, .collapse > tbody > tr td.large-11.last, .collapse > tbody > tr th.large-11.last { width: 539.6666666667px; } .body .columns td.large-11, .body .column td.large-11, .body .columns th.large-11, .body .column th.large-11 { width: 91.666666%; } td.large-12, th.large-12 { width: 564px; padding-left: 8px; padding-right: 8px; } td.large-12.first, th.large-12.first { padding-left: 16px; } td.large-12.last, th.large-12.last { padding-right: 16px; } .collapse > tbody > tr > td.large-12:not([class*=large-offset]), .collapse > tbody > tr > th.large-12:not([class*=large-offset]) { padding-right: 0; padding-left: 0; width: 580px; } .collapse > tbody > tr td.large-12.first, .collapse > tbody > tr th.large-12.first, .collapse > tbody > tr td.large-12.last, .collapse > tbody > tr th.large-12.last { width: 588px; } .body .columns td.large-12, .body .column td.large-12, .body .columns th.large-12, .body .column th.large-12 { width: 100%; } td.large-offset-1, td.large-offset-1.first, td.large-offset-1.last, th.large-offset-1, th.large-offset-1.first, th.large-offset-1.last { padding-left: 64.3333333333px; } td.large-offset-2, td.large-offset-2.first, td.large-offset-2.last, th.large-offset-2, th.large-offset-2.first, th.large-offset-2.last { padding-left: 112.6666666667px; } td.large-offset-3, td.large-offset-3.first, td.large-offset-3.last, th.large-offset-3, th.large-offset-3.first, th.large-offset-3.last { padding-left: 161px; } td.large-offset-4, td.large-offset-4.first, td.large-offset-4.last, th.large-offset-4, th.large-offset-4.first, th.large-offset-4.last { padding-left: 209.3333333333px; } td.large-offset-5, td.large-offset-5.first, td.large-offset-5.last, th.large-offset-5, th.large-offset-5.first, th.large-offset-5.last { padding-left: 257.6666666667px; } td.large-offset-6, td.large-offset-6.first, td.large-offset-6.last, th.large-offset-6, th.large-offset-6.first, th.large-offset-6.last { padding-left: 306px; } td.large-offset-7, td.large-offset-7.first, td.large-offset-7.last, th.large-offset-7, th.large-offset-7.first, th.large-offset-7.last { padding-left: 354.3333333333px; } td.large-offset-8, td.large-offset-8.first, td.large-offset-8.last, th.large-offset-8, th.large-offset-8.first, th.large-offset-8.last { padding-left: 402.6666666667px; } td.large-offset-9, td.large-offset-9.first, td.large-offset-9.last, th.large-offset-9, th.large-offset-9.first, th.large-offset-9.last { padding-left: 451px; } td.large-offset-10, td.large-offset-10.first, td.large-offset-10.last, th.large-offset-10, th.large-offset-10.first, th.large-offset-10.last { padding-left: 499.3333333333px; } td.large-offset-11, td.large-offset-11.first, td.large-offset-11.last, th.large-offset-11, th.large-offset-11.first, th.large-offset-11.last { padding-left: 547.6666666667px; } td.expander, th.expander { visibility: hidden; width: 0; padding: 0 !important; } table.container.radius { border-radius: 0; border-collapse: separate; } .block-grid { width: 100%; max-width: 580px; } .block-grid td { display: inline-block; padding: 8px; } .up-2 td { width: 274px !important; } .up-3 td { width: 177px !important; } .up-4 td { width: 129px !important; } .up-5 td { width: 100px !important; } .up-6 td { width: 80px !important; } .up-7 td { width: 66px !important; } .up-8 td { width: 56px !important; } table.text-center, th.text-center, td.text-center, h1.text-center, h2.text-center, h3.text-center, h4.text-center, h5.text-center, h6.text-center, p.text-center, span.text-center { text-align: center; } table.text-left, th.text-left, td.text-left, h1.text-left, h2.text-left, h3.text-left, h4.text-left, h5.text-left, h6.text-left, p.text-left, span.text-left { text-align: left; } table.text-right, th.text-right, td.text-right, h1.text-right, h2.text-right, h3.text-right, h4.text-right, h5.text-right, h6.text-right, p.text-right, span.text-right { text-align: right; } span.text-center { display: block; width: 100%; text-align: center; } @media only screen and (max-width: 596px) { .small-float-center { margin: 0 auto !important; float: none !important; text-align: center !important; } .small-text-center { text-align: center !important; } .small-text-left { text-align: left !important; } .small-text-right { text-align: right !important; } } img.float-left { float: left; text-align: left; } img.float-right { float: right; text-align: right; } img.float-center, img.text-center { margin: 0 auto; Margin: 0 auto; float: none; text-align: center; } table.float-center, td.float-center, th.float-center { margin: 0 auto; Margin: 0 auto; float: none; text-align: center; } td.columns[valign=bottom], td.column[valign=bottom], th.columns[valign=bottom], th.column[valign=bottom] { vertical-align: bottom; } td.columns[valign=middle], td.column[valign=middle], th.columns[valign=middle], th.column[valign=middle] { vertical-align: middle; } .hide-for-large { display: none; mso-hide: all; overflow: hidden; max-height: 0; font-size: 0; width: 0; line-height: 0; } @media only screen and (max-width: 596px) { .hide-for-large { display: block !important; width: auto !important; overflow: visible !important; max-height: none !important; font-size: inherit !important; line-height: inherit !important; } } table.body table.container .hide-for-large * { mso-hide: all; } @media only screen and (max-width: 596px) { table.body table.container .hide-for-large, table.body table.container .row.hide-for-large { display: table !important; width: 100% !important; } } @media only screen and (max-width: 596px) { table.body table.container .callout-inner.hide-for-large { display: table-cell !important; width: 100% !important; } } @media only screen and (max-width: 596px) { table.body table.container .show-for-large { display: none !important; width: 0; mso-hide: all; overflow: hidden; } } body, table.body, h1, h2, h3, h4, h5, h6, p, td, th { color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; margin: 0; Margin: 0; text-align: left; line-height: 130%; } h1, h2, h3, h4, h5, h6 { color: inherit; word-wrap: normal; font-family: Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 10px; Margin-bottom: 10px; } h1 { font-size: 34px; } h2 { font-size: 30px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 19px; } h6 { font-size: 18px; } body, table.body, p, td, th { font-size: 16px; line-height: 130%; } p { margin-bottom: 10px; Margin-bottom: 10px; } p.lead { font-size: 20px; line-height: 160%; } p.subheader { margin-top: 4px; margin-bottom: 8px; Margin-top: 4px; Margin-bottom: 8px; font-weight: normal; line-height: 1.4; color: #8a8a8a; } p a { margin: default; Margin: default; } .text-xs { font-size: 11.1111111111px; } .text-sm { font-size: 13.3333333333px; } .text-lg { font-size: 19.2px; } .text-xl { font-size: 23.04px; } .text-xxl { font-size: 27.648px; } small, .small { font-size: 80%; color: #cacaca; } a { color: #2199e8; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-weight: normal; padding: 0; text-align: left; line-height: 130%; } a:hover { color: rgb(20.0897959184, 124.906122449, 193.9102040816); } a:active { color: rgb(20.0897959184, 124.906122449, 193.9102040816); } a:visited { color: #2199e8; } h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited { color: #2199e8; } pre { background: #f3f3f3; margin: 30px 0; Margin: 30px 0; } pre code { color: #cacaca; } pre code span.callout { color: #8a8a8a; font-weight: bold; } pre code span.callout-strong { color: #ff6908; font-weight: bold; } td.columns table.hr table, td.column table.hr table, th.columns table.hr table, th.column table.hr table, td.columns table.h-line table, td.column table.h-line table, th.columns table.h-line table, th.column table.h-line table { width: auto; } table.hr th, table.h-line th { padding-bottom: 20px; text-align: center; } table.hr table, table.h-line table { display: inline-block; margin: 0; Margin: 0; } table.hr th, table.h-line th { width: 580px; height: 0; padding-top: 20px; clear: both; border-top: 0; border-right: 0; border-bottom: 1px solid #0a0a0a; border-left: 0; font-size: 0; line-height: 0; } .stat { font-size: 40px; line-height: 1; } p + .stat { margin-top: -16px; Margin-top: -16px; } span.preheader { display: none !important; visibility: hidden; mso-hide: all !important; font-size: 1px; color: #f3f3f3; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; } @media only screen { a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } } table.button { width: auto; margin: 0 0 16px 0; Margin: 0 0 16px 0; } table.button table td { text-align: left; color: #fefefe; background: #2199e8; border: 2px solid #2199e8; } table.button table td a { font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; color: #fefefe; text-decoration: none; text-align: left; display: inline-block; padding: 8px 16px 8px 16px; border: 0 solid #2199e8; border-radius: 3px; } table.button.radius table td { border-radius: 3px; border: none; } table.button.rounded table td { border-radius: 500px; border: none; } table.button:not(.expand):not(.expanded) table { width: auto; } table.button:hover table tr td a, table.button:active table tr td a, table.button table tr td a:visited, table.button.tiny:hover table tr td a, table.button.tiny:active table tr td a, table.button.tiny table tr td a:visited, table.button.small:hover table tr td a, table.button.small:active table tr td a, table.button.small table tr td a:visited, table.button.large:hover table tr td a, table.button.large:active table tr td a, table.button.large table tr td a:visited { color: #fefefe; } table.button.tiny table a { padding: 8px 16px 8px 16px; font-size: 10px; font-weight: normal; } table.button.small table a { padding: 10px 20px 10px 20px; font-size: 12px; } table.button.large table a { padding: 10px 20px 10px 20px; font-size: 20px; } table.button.expand, table.button.expanded { width: 100%; } table.button.expand table, table.button.expanded table { width: 100%; } table.button.expand table a, table.button.expanded table a { text-align: center; width: 100%; padding-left: 0; padding-right: 0; } table.button.expand center, table.button.expanded center { min-width: 0; } table.button:hover table td, table.button:visited table td, table.button:active table td { background: rgb(20.0897959184, 124.906122449, 193.9102040816); border-color: rgb(20.0897959184, 124.906122449, 193.9102040816); color: #fefefe; } table.button:hover table a, table.button:visited table a, table.button:active table a { border: 0 solid rgb(20.0897959184, 124.906122449, 193.9102040816); } table.button.secondary table td { background: #777777; color: #fefefe; border: 0px solid #777777; } table.button.secondary table a { color: #fefefe; border: 0 solid #777777; } table.button.secondary:hover table td { background: rgb(144.5, 144.5, 144.5); border-color: rgb(144.5, 144.5, 144.5); color: #fefefe; } table.button.secondary:hover table a { border: 0 solid rgb(144.5, 144.5, 144.5); } table.button.secondary:hover table td a { color: #fefefe; } table.button.secondary:active table td a { color: #fefefe; } table.button.secondary table td a:visited { color: #fefefe; } table.button.success table td { background: #3adb76; border: 0px solid #3adb76; } table.button.success table a { border: 0 solid #3adb76; } table.button.success:hover table td { background: rgb(34.9184549356, 191.0815450644, 93.1158798283); border-color: rgb(34.9184549356, 191.0815450644, 93.1158798283); } table.button.success:hover table a { border: 0 solid rgb(34.9184549356, 191.0815450644, 93.1158798283); } table.button.alert table td { background: #ec5840; border: 0px solid #ec5840; } table.button.alert table a { border: 0 solid #ec5840; } table.button.alert:hover table td { background: rgb(226.4714285714, 50.9857142857, 22.5285714286); border-color: rgb(226.4714285714, 50.9857142857, 22.5285714286); } table.button.alert:hover table a { border: 0 solid rgb(226.4714285714, 50.9857142857, 22.5285714286); } table.button.warning table td { background: #ffae00; border: 0px solid #ffae00; } table.button.warning table a { border: 0px solid #ffae00; } table.button.warning:hover table td { background: rgb(204, 139.2, 0); border-color: rgb(204, 139.2, 0); } table.button.warning:hover table a { border: 0 solid rgb(204, 139.2, 0); } table.button.hollow table td, table.button.hollow:hover table td { border: none !important; border-radius: 0; background: transparent !important; } table.button.hollow table a { border-radius: 0; } table.button.hollow.radius table a { border-radius: 3px; } table.button.hollow.rounded table a { border-radius: 500px; } table.button.hollow table tr td a { border: 1px solid #2199e8; color: #2199e8; } table.button.hollow table tr td a:visited { color: #2199e8; } table.button.hollow table tr td a:hover { border-color: rgb(20.0897959184, 124.906122449, 193.9102040816); color: rgb(20.0897959184, 124.906122449, 193.9102040816); } table.button.hollow.secondary table tr td a { border: 1px solid #777777; color: #777777; } table.button.hollow.secondary table tr td a:visited { color: #777777; } table.button.hollow.secondary table tr td a:hover { border-color: rgb(93.5, 93.5, 93.5); color: rgb(93.5, 93.5, 93.5); } table.button.hollow.alert table tr td a { border: 1px solid #ec5840; color: #ec5840; } table.button.hollow.alert table tr td a:visited { color: #ec5840; } table.button.hollow.alert table tr td a:hover { border-color: rgb(226.4714285714, 50.9857142857, 22.5285714286); color: rgb(226.4714285714, 50.9857142857, 22.5285714286); } table.button.hollow.warning table tr td a { border: 1px solid #ffae00; color: #ffae00; } table.button.hollow.warning table tr td a:visited { color: #ffae00; } table.button.hollow.warning table tr td a:hover { border-color: rgb(204, 139.2, 0); color: rgb(204, 139.2, 0); } table.button.hollow.success table tr td a { border: 1px solid #3adb76; color: #3adb76; } table.button.hollow.success table tr td a:visited { color: #3adb76; } table.button.hollow.success table tr td a:hover { border-color: rgb(34.9184549356, 191.0815450644, 93.1158798283); color: rgb(34.9184549356, 191.0815450644, 93.1158798283); } table.callout { margin-bottom: 16px; Margin-bottom: 16px; } th.callout-inner { width: 100%; border: 1px solid #cbcbcb; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background: #fefefe; } th.callout-inner.primary { background: rgb(221.7, 239.7, 251.55); border: 1px solid rgb(15.3020408163, 95.1387755102, 147.6979591837); color: #0a0a0a; } th.callout-inner.secondary { background: rgb(234.6, 234.6, 234.6); border: 1px solid #444444; color: #0a0a0a; } th.callout-inner.success { background: rgb(225.45, 249.6, 234.45); border: 1px solid rgb(27.0386266094, 147.9613733906, 72.1030042918); color: #0a0a0a; } th.callout-inner.warning { background: rgb(255, 242.85, 216.75); border: 1px solid rgb(153, 104.4, 0); color: #0a0a0a; } th.callout-inner.alert { background: rgb(252.15, 229.95, 226.35); border: 1px solid rgb(180.0857142857, 40.5428571429, 17.9142857143); color: #0a0a0a; } .thumbnail { border: solid 4px #fefefe; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); display: inline-block; line-height: 0; max-width: 100%; transition: box-shadow 200ms ease-out; border-radius: 3px; margin-bottom: 16px; } .thumbnail:hover, .thumbnail:focus { box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); } table.menu { width: 580px; } table.menu td.menu-item, table.menu th.menu-item { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } table.menu td.menu-item a, table.menu th.menu-item a { color: #2199e8; } table.menu.vertical td.menu-item, table.menu.vertical th.menu-item { padding-top: 10px; padding-right: 0; padding-bottom: 10px; padding-left: 10px; display: block; } table.menu.vertical td.menu-item a, table.menu.vertical th.menu-item a { width: 100%; } table.menu.vertical td.menu-item table.menu.vertical td.menu-item, table.menu.vertical td.menu-item table.menu.vertical th.menu-item, table.menu.vertical th.menu-item table.menu.vertical td.menu-item, table.menu.vertical th.menu-item table.menu.vertical th.menu-item { padding-left: 10px; } table.menu.text-center a { text-align: center; } .menu[align=center] { width: auto; } .menu[align=center] tr { text-align: center; } .menu:not(.float-center) .menu-item:first-child { padding-left: 0 !important; } .menu:not(.float-center) .menu-item:last-child { padding-right: 0 !important; } .menu.vertical .menu-item { padding-left: 0 !important; padding-right: 0 !important; } @media only screen and (max-width: 596px) { .menu.small-vertical .menu-item { padding-left: 0 !important; padding-right: 0 !important; } } body.outlook p { display: inline !important; } @media only screen and (max-width: 596px) { table.body img { width: auto; height: auto; } table.body center { min-width: 0 !important; } table.body .container { width: 95% !important; } table.body .columns, table.body .column { height: auto !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important; } table.body .collapse > tbody > tr > .columns, table.body .collapse > tbody > tr > .column { padding-left: 0 !important; padding-right: 0 !important; } td.small-1, th.small-1 { display: inline-block !important; width: 8.333333% !important; } td.small-2, th.small-2 { display: inline-block !important; width: 16.666666% !important; } td.small-3, th.small-3 { display: inline-block !important; width: 25% !important; } td.small-4, th.small-4 { display: inline-block !important; width: 33.333333% !important; } td.small-5, th.small-5 { display: inline-block !important; width: 41.666666% !important; } td.small-6, th.small-6 { display: inline-block !important; width: 50% !important; } td.small-7, th.small-7 { display: inline-block !important; width: 58.333333% !important; } td.small-8, th.small-8 { display: inline-block !important; width: 66.666666% !important; } td.small-9, th.small-9 { display: inline-block !important; width: 75% !important; } td.small-10, th.small-10 { display: inline-block !important; width: 83.333333% !important; } td.small-11, th.small-11 { display: inline-block !important; width: 91.666666% !important; } td.small-12, th.small-12 { display: inline-block !important; width: 100% !important; } .columns td.small-12, .column td.small-12, .columns th.small-12, .column th.small-12 { display: block !important; width: 100% !important; } table.body td.small-offset-1, table.body th.small-offset-1 { margin-left: 8.333333% !important; Margin-left: 8.333333% !important; } table.body td.small-offset-2, table.body th.small-offset-2 { margin-left: 16.666666% !important; Margin-left: 16.666666% !important; } table.body td.small-offset-3, table.body th.small-offset-3 { margin-left: 25% !important; Margin-left: 25% !important; } table.body td.small-offset-4, table.body th.small-offset-4 { margin-left: 33.333333% !important; Margin-left: 33.333333% !important; } table.body td.small-offset-5, table.body th.small-offset-5 { margin-left: 41.666666% !important; Margin-left: 41.666666% !important; } table.body td.small-offset-6, table.body th.small-offset-6 { margin-left: 50% !important; Margin-left: 50% !important; } table.body td.small-offset-7, table.body th.small-offset-7 { margin-left: 58.333333% !important; Margin-left: 58.333333% !important; } table.body td.small-offset-8, table.body th.small-offset-8 { margin-left: 66.666666% !important; Margin-left: 66.666666% !important; } table.body td.small-offset-9, table.body th.small-offset-9 { margin-left: 75% !important; Margin-left: 75% !important; } table.body td.small-offset-10, table.body th.small-offset-10 { margin-left: 83.333333% !important; Margin-left: 83.333333% !important; } table.body td.small-offset-11, table.body th.small-offset-11 { margin-left: 91.666666% !important; Margin-left: 91.666666% !important; } table.body table.columns td.expander, table.body table.columns th.expander { display: none !important; } table.body .right-text-pad, table.body .text-pad-right { padding-left: 10px !important; } table.body .left-text-pad, table.body .text-pad-left { padding-right: 10px !important; } table.menu { width: 100% !important; } table.menu td, table.menu th { width: auto !important; display: inline-block !important; } table.menu.vertical td, table.menu.vertical th, table.menu.small-vertical td, table.menu.small-vertical th { display: block !important; } table.menu[align=center] { width: auto !important; } table.button.small-expand, table.button.small-expanded { width: 100% !important; } table.button.small-expand table, table.button.small-expanded table { width: 100%; } table.button.small-expand table a, table.button.small-expanded table a { text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } table.button.small-expand center, table.button.small-expanded center { min-width: 0; } th.callout-inner { padding: 10px !important; } } ================================================ FILE: docs/assets/js/codeSample.js ================================================ !function() { var $currentText = $('[data-docs-code-current]'); var $toggleButtons = $('[data-docs-code-toggle]'); $toggleButtons.click(function(e) { e.preventDefault(); $('body').toggleClass('is-inky-enabled'); if ($('body').hasClass('is-inky-enabled')) { $currentText.text('Inky'); $toggleButtons.text('Switch to HTML'); } else { $currentText.text('HTML'); $toggleButtons.text('Switch to Inky'); } }); }(); ================================================ FILE: docs/assets/js/docs.ad.js ================================================ $(function() { // TODO: Add alternate between advanced and intro var topic = $('h1.docs-page-title').text(); var header = 'Master ' + topic; var body = 'Get up to speed FAST, learn straight from the experts who built Foundation for Emails.'; var link = 'https://get.foundation/university/responsive-emails-foundation?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Struggling&utm_campaign=Docs%20To%20Emails'; var cta = 'Learn More'; var html = '

' + header + '

' + '

' + body + '

' + '' + cta + '
'; $('#TOCAdUnit').html(html); }); ================================================ FILE: docs/assets/js/docs.js ================================================ $(document).foundation(); ================================================ FILE: docs/assets/scss/_code.scss ================================================ .docs-code-html, .docs-code-inky { code { max-height: 300px; } } ================================================ FILE: docs/assets/scss/_compatibility.scss ================================================ // Compatability Table // ------------------- // A styled table used on the compatability page to show which browsers the framework works with. $primary: #002b36; $secondary: #efefef; $alert: #cf2a0e; $warning: #ffae00; $success: #43AC6A; $gutter: 40px; $rad: 5px; @mixin font-size($sizeValue){ font-size: $sizeValue + px; font-size: ($sizeValue / 10) + rem; } @mixin -breakpoint($point) { @if $point == smallmobile { @media (max-width: 200px) { @content; } } @if $point == mobile { @media (max-width: 640px) { @content; } } @if $point == tablet { @media (max-width: 1000px) { @content; } } @if $point == smallscreen { @media (max-width: 1120px) { @content; } } } .comparison-table { display: block; width: 100%; border-collapse: separate; thead tr { color: $primary; font-weight: bold; text-transform: uppercase; td { color: #666 !important; } td { padding-bottom: 10px; } td { border: none !important; } } tr { width: 100%; td { border-right: 1px solid #ddd; } &:first-child { td { border-top: 1px solid #ddd; } td:first-child { } td:last-child { } } &:last-child { td { border-bottom: 1px solid #ddd; } td:first-child { } td:last-child { } } td:first-child { width: 25%; padding: 10px; color: $primary; font-weight: bold; border-left: 1px solid #ddd; } td.marker.yes { width: 10%; text-align: center; vertical-align: middle; color: $success; font-weight: bold; } td.marker.mostly { width: 10%; text-align: center; vertical-align: middle; color: $warning; font-weight: bold; } td.marker.no { width: 10%; text-align: center; vertical-align: middle; color: $alert-color; font-size: 1.3rem; font-weight: bold; } } tr:nth-child(even) { background: $secondary; } @include -breakpoint(smallmobile) { td, tr td, tr td.marker, tr td:first-child, tr td:first-child + td { position: relative; display: block; width: 100%; border-top: none; border-bottom: none; border-left: 1px solid #ddd; } tr:first-child td:first-child { } tr:first-child td:last-child { border-top-right-radius: 0; } tr:last-child td:first-child { border-bottom-left-radius: 0; } tr:last-child td:last-child { border-bottom: 1px solid #ddd; } tr td:first-child { border-top: 1px solid #ddd; & + td { padding: 0 10px 10px; } } tr td.marker { padding: 10px; font-weight: bold; &:before { content: "Grid: "; } & + td.marker:before { content: "Layout/UI: "; } & + td.marker + td.marker:before { content: "JS: "; } } thead tr td.marker { display: none; } } } td.divider { background: $dark-gray; &:first-child { border-right: $dark-gray; } &:last-child { border-left: $dark-gray; } } ================================================ FILE: docs/assets/scss/_course-callout.scss ================================================ .docs-course-callout { display: block; background: #A183D3; color: $white; padding: 1rem; margin-top: 1rem; &:hover, &:focus { color: $white; } .button { background: $white; color: #85769e; font-weight: bold; border-radius: 2px; box-shadow: 0 2px 0 #999; margin-bottom: 0; } p { font-size: rem-calc(14); line-height: 21px; } } .docs-course-callout-subtitle { text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-size: rem-calc(12); display: block; } .docs-course-callout-title { font-weight: bold; margin-bottom: 0.75rem; display: block; } .footer-course-upsell { overflow: hidden; img { margin-top: 35px; animation: ad-unit-hover 8s infinite ease; } border-top: 1px solid #cacaca; background: #F5F5F5; padding-top: 10px; margin-top: 25px; .emails-course-title { font-size: 30px; margin-bottom: 1rem; margin-top: 1rem; span { text-transform: uppercase; font-size: rem-calc(11px); font-weight: bold; display: block; margin-bottom: -6px; letter-spacing: 3px; color: rgb(175, 175, 175); } } p { color: rgb(125, 125, 125); font-size: 14px; } } @keyframes ad-unit-hover { 0% { transform: translateY(30px); } 55% { transform: translateY(0); } 100% { transform: translateY(30px); } } ================================================ FILE: docs/assets/scss/docs.scss ================================================ @use "sass:color"; $topbar-background: #2c3840; $topbar-hover-color: color.adjust($topbar-background, $lightness: +10%, $space: hsl);// The CSS for the Foundation docs is stored in an external codebase: // https://github.com/foundation/foundation-docs // // You can test Sass changes locally by running these commands: // git clone https://github.com/foundation/foundation-docs // npm link ./foundation-docs // // Feel free to submit pull requests to foundation-docs like you would Foundation itself! $foundation-palette: ( primary: #7465be, secondary: #777, success: #3adb76, warning: #ffae00, alert: #ec5840, ); @import 'node_modules/foundation-sites/scss/foundation'; @import 'node_modules/motion-ui/src/motion-ui'; @include foundation-everything; @include motion-ui-transitions; @import 'node_modules/foundation-docs/scss/foundation-docs'; @import 'code'; @import 'compatibility'; @import 'course-callout'; $topbar-background: #2c3840; $topbar-hover-color: color.adjust($topbar-background, $lightness: +10%, $space: hsl); .dropdown.menu > li.is-dropdown-submenu-parent > a { padding-right: 1rem; } .dropdown.menu > li.is-dropdown-submenu-parent > a::after { display: none; } .docs-newsletter { background: #2a2f58; } .zurb-footer-top { background: #1C1F3A !important; } .callout.secondary.tip { border: none; border-left: 5px solid $primary-color; } .marketing-topbar, .title-bar { background: $topbar-background; .dropdown.menu a { background: $topbar-background; } .title { background: $topbar-background; } } .dropdown.menu a.button { background: $primary-color; &:hover { background: color.adjust($primary-color, $lightness: -10%, $space: hsl); } } .is-dropdown-submenu-item a { &:hover { background: $topbar-hover-color; } } .marketing-topbar .menu a:hover:not(.button), .marketing-topbar .menu a:focus { background: $topbar-hover-color; } .marketing-topbar .menu .topbar-title a { &:hover, &:focus { background: $topbar-background; } } .docs-newsletter { padding: 1rem 0; } .footer-signup-form { padding-top: 1rem; padding-bottom: 1rem; } .zurb-footer-bottom { background: $topbar-background; } .ad-unit { max-width: 250px; padding: .5rem; background: #2a2f58; border-radius: 4px; } .ad-unit-title { padding: 10px 16px 5px 16px; text-align: center; color: #fff; font-size: 23px; font-weight: bold; font-family: 'proxima nova', helvetica, arial; animation: ad-title-anim 1.5s 1 ease; animation-fill-mode: backwards; } .ad-unit-text { color: #fff; font-size: 13px; text-align: center; padding: 0 15px 10px 15px; animation: ad-text-anim 1s 1 ease; animation-delay: 1s; animation-fill-mode: backwards; } .ad-unit-button { margin-bottom: 0; width: 100%; box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset; border: 0; border-radius: 3px; font-weight: bold; } @keyframes ad-title-anim { 0% { opacity: 0; transform: translateY(50%); } 100% { opacity: 1; } } @keyframes ad-text-anim { 0% { opacity: 0; transform: scale(.7, .7); } 100% { opacity: 1; transform: scale(1, 1);} } .youtube { background: url("../img/icons/youtube.png") no-repeat center 0; } ================================================ FILE: docs/layouts/component.html ================================================

{{ title }}

{{ description }}

{{!-- Start container for docs and table of contents --}}
{{!-- Start container for table of contents --}} {{!-- End container for table of contents --}} {{!-- Start container for docs --}}
{{ docs }} {{#if sass}}
{{#heading 2}}Sass Reference{{/heading}} {{#if sass.variable}}
{{#heading 3 'sass-variables'}}Variables{{/heading}}

The default styles of this component can be customized using these Sass variables in your project's settings file.

{{#each sass.variable}} {{/each}}
NameTypeDefault ValueDescription
${{this.context.name}} {{sassTypes this.type}} {{sassValue this.context.value}} {{md this.description}}
{{/if}} {{#if sass.mixin}} {{#if sass.variable}}
{{/if}}
{{#heading 3 'sass-mixins'}}Mixins{{/heading}}

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

{{#each sass.mixin}}
{{#heading 4}}{{this.context.name}}{{/heading}} {{#if this.since}}

Added in {{this.since.0.version}}

{{/if}} {{#if this.deprecated}}

Deprecated in {{this.deprecated}}

{{/if}} 
{{writeMixin this}}
{{md this.description}} {{externalLink this.link}} {{#if this.parameter}} {{#each this.parameter}} {{/each}}
ParameterTypeDefault ValueDescription
${{this.name}} {{sassTypes this.type}} {{sassValue this.default}} {{md this.description}}
{{/if}}
{{#unless @last}}
{{/unless}} {{#if sass.function}}
{{/if}} {{/each}}
{{/if}} {{#if sass.function}}
{{#heading 3 'sass-functions'}}Functions{{/heading}} {{#each sass.function}}
{{#heading 4}}{{this.context.name}}{{/heading}} {{#if this.since}}

Added in {{this.since.0.version}}

{{/if}} {{#if this.deprecated}}

Deprecated in {{this.deprecated.version}}

{{/if}} 
{{writeFunction this}}
{{md this.description}} {{externalLink this.link}} {{#if this.parameter}} {{#each this.parameter}} {{/each}}
ParameterTypeDefault ValueDescription
${{this.name}} {{sassTypes this.type}} {{sassValue this.default}} {{md this.description}}
{{/if}}
{{#unless @last}}
{{/unless}} {{/each}}
{{/if}}
{{/if}} {{#if js}}
{{#heading 2}}JavaScript Reference{{/heading}} {{#each js.class}}
{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}} {{md this.description}} 
var elem = new Foundation.{{this.name}}(element, options);
{{#if this.fires}}

Fires these events: {{#each this.fires}} {{this}} {{/each}}

{{/if}} {{#if this.params}} {{#each this.params}} {{/each}}
NameTypeDescription
{{this.name}} {{this.type.names.[0]}} {{this.description}}
{{/if}}
{{/each}}
{{#if js.member}}
{{#heading 3 'js-options'}}Plugin Options{{/heading}}

Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

{{#each js.member}} {{/each}}
NameDescriptionExample
{{this.name}} {{this.description}} Sample!
{{/if}}
{{#if js.event}}
{{#heading 3 'js-events'}}Events{{/heading}}

These events will fire from any element with a {{title}} plugin attached.

{{#each js.event}} {{/each}}
NameDescription
{{this.name}}.zf.{{../title}} {{this.description}}
{{/if}}
{{#if js.function}}
{{#heading 3 'js-functions'}}Functions{{/heading}} {{#each js.function}}
{{#heading 4 'js-class'}}{{../../js.class.0.name}}.{{this.name}}{{/heading}} {{md this.description}} {{#if this.fires}}

Fires these events: {{#each this.fires}} {{this}} {{/each}}

{{/if}} {{#if this.params}} {{#each this.params}} {{/each}}
NameTypeDescription
{{this.name}} {{this.type.names.[0]}} {{this.description}}
{{/if}} {{#unless @last}}
{{/unless}}
{{/each}}
{{/if}}
{{/if}} {{#if sass}}
{{#heading 2 'building-blocks'}}Building Blocks using {{title}}{{/heading}}

Building Blocks is a Foundation-curated resource with useful code snippets that use Foundation components. Here are a few for this component:

{{/if}}
{{!-- End container for docs --}}
{{!-- End container for docs and table of contents --}}
================================================ FILE: docs/layouts/default.html ================================================ Foundation for Emails 2 Docs{{#unlesspage 'index'}} | {{title}}{{/unlesspage}}
{{> off-canvas}}
{{> navigation}} {{> mobile-navigation}}
{{> body}}
{{> component-list}}
{{> footer}}
================================================ FILE: docs/pages/alignment.md ================================================ --- title: Alignment description: Centering, images, text, buttons, and menus in HTML emails made easy. --- Foundation includes a handful of helpful alignment classes to add common positioning behaviors to elements. --- ## Text Alignment You can align text with the `.text-x` classes. These classes will apply to the large breakpoint as well as the small. ```inky_example

Left (default)

center

right

 ``` If you need to change text alignment only on the small breakpoint, you can use the `.small-text-x` classes. ```inky_example

Left on small

Center on small

Right on small

 ``` You can combine these classes to override the behavior on the small breakpoint. ```inky_example

Center, small left

Right, small center

 ``` --- ## Centering Images Just wrap the `
` around an image you’ll be good to go. Inky will handle the magic behind the scenes! In the CSS version, you’ll add a `.float-center` class, `align="center"` attribute and wrap a <center> tag to make sure things are centered. ```inky_example
image of clever meme that made me chuckle
``` So to be clear: with Inky you only need to wrap an image in `
` tag to reliably center it. In the CSS version, our centering recipe includes three ingredients: - `.float-center` class on the `` element - `align="center"` attribute on the `` element - Wrap the `` with `
` tags (needed for Outlook 2007, 2010, and 2011) Also, it's not really a float, but the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or auto width. If you need to center an image only on mobile clients, you can apply the `.small-float-center` class. A good use case would be centering an image smaller than the full column width on devices like an iPhone 5, iPhone 6, and Android 4.4. ```inky_example please don't forget me

What is the deal?

Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.

 ``` --- ## Aligning Images Left and Right You can also align images to the left or the right. ```inky_example ``` --- ## Centering a Button Wrap the button with `
` tags to center it. ```inky_example
``` --- ## Centering Columns Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered. ```inky_example Centering a column Centering a column Centering a column ``` If you don't add a size attribute like `small="x"` then the columns will be equal width. --- ## Centering a Menu Centering the menu is a common practice. Wrapping the menu in `
` tags will achieve this. ```inky_example
Item Item Item
``` --- ## Vertical Alignment You can vertically align your content within columns by using `valign` attribute. The available values are `top`, `middle`, and `bottom`. ```inky_example

Bottom

HEADLINE

SUBHEADLINE

 ```
================================================ FILE: docs/pages/button.md ================================================ --- title: Button description: Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs. sass: scss/components/_button.scss --- Creating a bullet-proof button that works in all email clients requires a table nested inside of a table. Put the class `.button` on the outer ``. Inside of the inner table, put an `` with an `href` attribute containing your link. In Inky HTML, the ` ```
- It's important to add an `href` attribute to your `
--- ## Sizing By default, buttons are sized by the content and padding within them. You can also size a button according to it's parent container (see Expanded section). Buttons can be made larger or smaller by adding the class `.tiny`, `.small`, or `.large` to a button's outer `
`. In Inky HTML, add the same class to the ` ``` Don't forget the `href=""` ;) --- ## Expanded To create an expanded button (full width of it's container), add the class `.expanded` to the outer `
` of the button, and wrap a `
` tag around the ``. In Inky HTML, add the `.expanded` class to the ` ``` --- ## Coloring Change the background color of a button by adding the class `.secondary`, `.success`, `.warning`, or `.alert` to the outer `
` (or the ` ``` --- ## Radius and Round Creating buttons with a radius or rounded edges (like a pill) can be achieved by adding the `.radius` or `.rounded` class to a button. *Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4+ (Gmail)* *Note - In order to create `.radius` and `.rounded` buttons, the border needs to be removed.* ```inky_example ``` --- ## Hollow Buttons Creating hollow buttons is as simple as adding the `.hollow` class to a button. You can combine this class with all of the other button classes in order to mix and match styles. ```inky_example ``` ================================================ FILE: docs/pages/callout.md ================================================ --- title: Callout description: Formerly panels, callouts can be used to create sidebar panels or call out important content in an email. sass: scss/components/_callout.scss tags: - panel - alert --- ## Basics A Callout adds a border, background, and some padding. Callouts use a full table structure, with the class `.callout` on the outer `
` (for bottom margin) and the `.callout-inner` applied to the innermost ``), add one column using this code: ```html
`. When using [Inky](inky.html) HTML, the `` tag will create this structure for you. You can wrap them around a row or inside a column. ```inky_example

Not in a callout :(

I'm in a callout!

This whole row is in a callout!

 ``` --- ## Coloring Classes The color of a callout can be changed by adding the class `.primary`, `.success`, `.warning`, or `.alert` to the element. A callout without a color class will have a white background. ```inky_example

Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

 ``` ================================================ FILE: docs/pages/compatibility.md ================================================ --- title: Compatibility description: Foundation for Emails is battle-tested in the trickiest email clients, like Microsoft Outlook. --- Foundation for Emails is designed for and tested on numerous email clients and devices. Here's the rundown on what type of compatibility to expect in general. Because email clients have varying CSS support and specific quirks, each individual component will have more information on compatibility.
Email Client/Device Compatibility
Apple Mail:
Apple Mail 7 ✓
Apple Mail 8 ✓
Outlook:
Outlook 2000 ✓
Outlook 2002 ✓
Outlook 2003 ✓
Outlook 2007 ✓
Outlook 2010 ✓
Outlook 2011 ✓
Outlook 2013 ✓
Outlook 2016 ✓
Mobile:
Android 4.4 ✓
Gmail app for Android ✓ *
iPhone 5 ✓
iPhone 6 ✓
iPad ✓
iPad Mini ✓
Gmail:
In Internet Explorer ✓
In Firefox ✓
In Chrome ✓
Google Apps:
In Internet Explorer ✓
In Firefox ✓
In Chrome ✓
Office 365:
In Internet Explorer ✓
In Firefox ✓
In Chrome ✓
Outlook.com:
In Internet Explorer ✓
In Firefox ✓
In Chrome ✓
Yahoo! Mail:
In Internet Explorer ✓
In Firefox ✓
In Chrome ✓
** *Gmail app for Android:** Works - does not recognize media queries so it will render large breakpoint. ================================================ FILE: docs/pages/css-guide.md ================================================ --- title: Getting Started with CSS description: Get started with the CSS version of Foundation for Emails. --- Foundation for Emails takes the pain out of developing HTML emails by giving you a set of powerful, tested components out of the box. This includes a fully-responsive grid, buttons, callouts, menus, and more. In this Getting Started guide, we'll download Foundation for Emails, construct the basic grid, and then inline our email so it's ready to test. --- ## Installing If you haven't yet, download the starter files for Foundation for Emails. They include the boilerplate HTML needed for an email, and all of the CSS for Foundation. Download Foundation for Emails Unzip the folder and open it in your text editor of choice. --- ## File Structure Here's a breakdown of the files in the folder you got: - `css/foundation-emails.css`: the Foundation for Emails CSS. - `index.html`: a blank boilerplate to get started. - `templates/`: a set of pre-made templates following common email layouts. We'll be writing a layout from scratch, so open up `index.html`. --- ## Boilerplate Inside `index.html`, you can see the boilerplate needed to make an HTML email work, with comments explaining what does what. ```html
``` --- ## Grid Basics Foundation for Emails includes many common elements needed to make HTML emails: a grid, typography styles, buttons, callouts, and more. The markup required to create HTML emails that work in all email clients is *complicated*, and involves writing many tables. However, all of Foundation's components are thoroughly tested in every major email client, including the problematic ones like Outlook. The rigid structure ensures your designs don't look off in any email client. Let's start by building a basic grid. To do that, we need three pieces: a container, a row, and then some columns. ### Container Most Foundation for Emails components are full tables, including the container. Inside the `
` tag of `index.html`, add this table code: ```html
``` The **container** will wrap the body of your entire email. It applies a maximum width to the body of the email. Every email needs this bit of boilerplate. ### Row Next, let's build the grid itself, starting with the row. **Rows** group columns together into a unit. Inside of your container, add this table: ```html
``` ### Columns Columns divide your layout into horizontal sections that sit side-by-side. On small screens, these columns stack on top of each other to save space—unless you set them up to keep their layout on small screens. Inside of your row (the innermost `
Column One
``` In the above example, we used the classes `.small-12` and `.large-6` to define the size of the column on small vs. large email clients. Foundation uses a 12-column grid, so on mobile clients, the column stretches the full width of the page, and on desktop clients, the column is half the width of the row. Since this first column is half-width, we need a second one to go with it. *After* the `` for the first column, add the code for the second column: ```html
Column One Column Two
``` You may have noticed the `.first` and `.last` classes on the column. The first column in a row needs the `.first` class, and the last column in a row needs the `.last` class. This is explained more in the [First and Last Classes](grid.html#first-and-last-classes) section of the grid documentation. That's a lot of HTML! Let's look at what it is at a high level: ```html ``` The CSS classes are always on the outermost table element, so that's an easy way to identify where a component starts. The container starts at the table with the `.container` class, the row starts at the table with the `.row` class, and so on. --- ## Inlining Now that we have a basic email, the last thing we need to do before we can send it is *inline* it. This is the process of injecting all of the CSS for the email into the HTML, so that it works as a self-contained file. Email clients like Gmail and Outlook strip out ` 4 columns, 6 columns on small 8 columns, 6 columns on small ``` --- ## Using the Media Query The media query will wrap the styles you wish to affect. Because there is only one breakpoint to consider and it's a max-width, your mobile styles or overrides will go in a media query. If you're using the CSS version of Foundation, use this media query to imitate the core breakpoint: ```scss /* Small only */ @media screen and (max-width: 596px) {} ``` The Sass version of Foundation uses a convenient variable to set the breakpoint width. Use this media query to imitate the core breakpoint: ```scss /* Small only */ @media only screen and (max-width: #{$global-breakpoint}) {} ``` ### Example usage ```scss .newsletter-title { text-transform: uppercase; font-size: 9px; padding-left: 40px; font-weight: bold; @media only screen and (max-width: #{$global-breakpoint}) { padding-left: 0; } } ``` ```scss @media only screen and (max-width: #{$global-breakpoint}) { p { font-size: 19px; font-weight: 600; } } ``` --- ## Changing the Breakpoint Changing the breakpoint is easy in the Sass version. In the `_settings.scss` you can control the width of this breakpoint. ```scss $global-breakpoint: $global-width + $global-gutter; ``` The `$global-breakpoint` is a combined width of the `$global-width` and the `$global gutter`. You could hard-code a pixel value here instead of the variables or change the `$global-width` (recommended) as it takes account for the gutter calculation. ```scss $global-width: 580px; ``` ================================================ FILE: docs/pages/menu.md ================================================ --- title: Menu description: Use the menu component to create a horizontal or vertical list of links. sass: scss/components/_menu.scss --- ## Basics A menu is a `` with a class of `.menu` and a `` inside of it. Each link in the menu is a ` ``` ### Offset Columns Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself. Version 1 ```
` with an `` inside of it. In Inky HTML, use the tag `` to make a menu, and the tag `` to make an item. ```inky_example Item Item Item ```
- It's important to add an `href` attribute to your ``'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.
- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
--- ## Vertical Menu Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu. ```inky_example Item Item Item ``` --- ## Vertical Menu on the Small Breakpoint Menus align horizontally by default. To switch to a vertical menu on the small breakpoint only, add the class `.small-vertical` to the menu. This works well because the email clients that support media queries fall into the small breakpoint like iPhones and Android 4.4. ```inky_example Item Item Item ``` ================================================ FILE: docs/pages/migration.md ================================================ --- title: Foundation for Emails 2 Migration Guide description: This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to Foundation for Emails 2. tags: - upgrade --- ## What’s new? - **Streamlined and updated responsive grid:** We’ve simplified the markup in the new version so it’s faster and easier to code. The new responsive grid in Emails 2 requires fewer tags and classes. It’s also now responsive on Android Native! - **Inky templating language:** With Inky you can write less code and get more done. The Inky language gets you out of tables and into a simpler, more web-like, HTML. - **Built with Sass:** Now faster than ever, you can easily make sweeping visual changes to your email that reflect your brand styles - all within one settings file. - **Foundation stack:** All kinds of task automation - [Panini](https://get.foundation/sites/docs/panini.html), our Handlebars templates, compiling Sass, BrowserSync, image compression, and auto inlining are built in to speed up your workflow. --- ## Overview First off, you'll want to choose a version to get started with.
[CSS version](css-guide.html) or the [Sass version with Inky](sass-guide.html) When migrating, the following items can be translated easily from 1 to 2: - Boilerplate - Visibility - Typography - Text helper classes - Container - Panel - Media Queries Other areas may require more changes to work correctly including: - Grid - Sub-grid (now part of Grid) - Button class What’s new that you might want to use: - Menu - Horizontal - Menu - Vertical --- ## HTML With Foundation for Emails 2, confusing and tedious tables are a thing of the past. The new Inky markup will save you time and energy coding your emails. It looks like: ```html Content Content ``` You can use it to create the grid structure, buttons, and other components. We’ll go into this in detail in the components section. We'll explain more in the Grid section. --- ## CSS & Sass Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings. These are some CSS classes that are no longer needed for proper spacing: - `.wrapper` - `.wrapper-last` - `.text-pad` - `.text-pad-left` - `.text-pad-right` Some helper classes have changed: `.center` was used in version 1 to center text. Version 2 now has more alignment classes: - `.text-center`: centers text - `.text-left`: aligns text to the left - `.text-right`: aligns text to the right - `.small-text-center`: centers text on the small breakpoint - `.small-text-left`: left aligns text on the small breakpoint - `.small-text-right`: right aligns text on the small breakpoint - `float-center`: centers an image (see the [alignment docs](alignment.html) for best practices.) --- ## Ink 1.0 Components ### Grid #### Old Markup In the Ink 1.0, we needed extra tags to support a wrapper element. This used to control the gutter and margins of a column. ```html
``` #### New Markup In Foundation for Emails 2, we’ve eliminated another tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a `.last` class, and now the first column element with the `.first` class. If you have columns in the middle of first and last, they don't need a `.first` or `.last` class. Also, we stitched `		`'s to ``'s because that allows Android 4 native to be responsive - win! ```html
``` #### New Markup (Inky HTML) ```html ``` --- ### Sub-grid In an effort to unify the thinking across the Foundation family, we’ve removed the sub-columns and moved towards a fully functional small grid. #### Old Markup ```html
``` #### New Markup (Plain HTML) ```html
``` #### New Markup (Inky HTML) ```html ``` --- ### Block Grid The block grid has a minor syntax change with identifying the number of elements that are displayed in the row. We’ve moved to the convention of `.up-x`, instead of `.x-up`. #### Old Markup ```html
Thing 1 Thing 2 Thing 3
``` #### New Markup (Plain HTML) ```html
Thing 1 Thing 2 Thing 3
``` #### New Markup (Inky HTML) ```html Thing 1 Thing 2 Thing 3 ``` --- ### Offset Columns Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself. #### Old Markup ```html
``` #### New Markup (Plain HTML) ```html
``` #### New Markup (Inky HTML) ```html ``` Offsets now can be used on the small breakpoint or the large, or both. They will shift over a set of columns over from the left. --- ### Buttons In the previous version of F4E the text inside of the button was the only clickable element. In F4E 2, we’ve taken a hybrid approach of using padding and borders to increase the clickable area. It requires one more table but the result is a much bigger touch target which is good for usability. #### Old Markup ```html
Button Label
``` #### New Markup (Plain HTML) ```html
I am successful
``` #### New Markup (Inky HTML) ```html ``` Centering a button is easier now, just wrap the button with `
` tags. --- ### Panels In an effort to unify the terminology across the Foundation family `panels` are now called `callouts`. #### Old Markup ```html
Panel content
``` #### New Markup (Plain HTML) ```html
``` #### New Markup (Inky HTML) ```html

One Word

I'm in a callout!

This whole row is in a callout!

This whole row is in a callout!

 ``` You can wrap a callout around a `` or the content inside a ``. --- ## New Components ### Menu #### Old Markup (Plain HTML) ```html
Nav 1 Nav 2 Nav 3
``` #### New Markup (Inky HTML) ```html Item One Item Two Item Three ``` The menu component can be used to create a simple set of links comonly used in headers, for social icons or in footers. Adding the `.vertical` class will change the orientation. You can even make it vertical on the small breakpoint only with `.small-vertical`. ### Spacer #### New Markup (Inky HTML) ```html ``` The spacer component creates consistant vertical spacing between or inside of elements. The size `size="x"` attribute allows you to set the height in pixels of vertical spacing you need. ### Wrapper #### New Markup (Inky HTML) ```html content here ``` The wrapper component allows you to wrap content to target CSS within it. You can add classes to it so you can easily create a full with background. ## Dependencies The CSS version works exactly like the one we distributed with Ink 1.0. Check out our [getting started guide](css-guide.html) to learn more. To use the Sass version with the Inky markup language you'll want to install the Foundation for Emails project template. We have another [getting started guide](sass-guide.html) just for the Sass version of Foundation. ================================================ FILE: docs/pages/panini.md ================================================ --- title: Panini description: A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease. library: github: https://github.com/foundation/panini docs: https://github.com/foundation/panini --- {{{{raw}}}} If you've ever created a static site, maybe you had five pages that all shared the same header and footer. You create your first page, and then copy and paste the common elements to the next page. But now if you need to make a change to the header, the change has to be made across multiple files. You can do this with Emails in your campaigns too! Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the [Handlebars](https://handlebarsjs.com/) templating language—to streamline the process of creating static prototypes. Our [prototyping template](https://github.com/foundation/foundation-emails-template) uses Panini, along with a host of other tools for processing Sass and images, to make creating optimized templates easy. It's already been configured to utilize all of the features below, but if you want to learn the specifics of how to configure the library, head over to the [Panini GitHub page](https://github.com/foundation/panini). --- ## Basics: Templates & Pages A **template** is a common layout that every page in your design shares. It's possible to have multiple templates, but generally you'll only need one, and a page can only use one template. In the prototyping template, the default layout is found under `src/layouts/default.html`. Here's what a basic template might look like: ```handlebars Definitely an Email!
{{> body}}
``` In the middle of the HTML is a bit of Handlebars code: `{{> body}}`. This is where the pages you write are injected when Panini runs, giving you a series of complete HTML files at the end. The **pages** make up the guts of your layouts. These files will just have the middle section of the design, since the layout already covers the top and bottom. The prototyping template includes one blank page to get you started, under `src/pages/index.html`. A basic page might look like this: ```html

Page Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus eligendi, reiciendis corporis quam facere quaerat qui, aspernatur molestiae velit, vero ea quisquam laborum corrupti repudiandae totam, at aliquam esse.

``` Note that there's no `` or `` tags, and no header or footer. This code will be injected into the `{{> body}}` declaration when Panini assembles your pages. In the prototyping template, these finished files are compiled into a standalone folder called `dist` (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any ESP (Email Service Provider). --- ## Partials Partials are a feature of Handlebars which allow you to inject HTML anywhere in a page or layout. They're really useful when you need to repeat certain chunks of code throughout your pages, or to keep individual files from getting too cluttered with HTML. Here's an example of a layout file that divides its key sections into partials: ```handlebars Definitely STILL an Email! {{> header}} {{> body}} {{> footer}} ``` The `{{> }}` syntax tells Handlebars to look for an HTML file with that name, and inject it at that place. In this example, we have files called `header.html`, `navigation.html`, and `footer.html`. In the prototyping template, these files all exist within `src/partials`. --- ## Page Variables Pages have a few built-in variables, which can be used within the page template itself, or within a layout or partial being used in tandem with the page. ### page Prints the name of the current page, without its original file extension. In the below example, if the page is `index.html`, `{{page}}` will become `index`. ```handlebars

You are here: {{page}}

``` ### root Use `{{root}}` before a file path to make sure it works no matter what folder the current page is in. For example, a path to an external CSS file will need to be different if the current page is at the root level of your site, or in a sub-folder. Here's how you'd use it with a `` tag: ```handlebars ``` If the page is `index.html`, the path will look like this: ```html ``` If the page is `folder/page.html`, the path will look like this: ```html ``` The `../` is added only on pages in a sub-folder, so the CSS can still be properly loaded. --- ## Helpers Helpers are special functions that manipulate content on the page. In addition to [Handlebars's built-in helpers](https://handlebarsjs.com/guide/builtin-helpers.html), Panini includes a few custom helpers and you can add your own. ### ifpage Displays the HTML inside the helper only on specific pages. In the below example, the HTML inside the helper will only show up on the `index.html` page. ```handlebars {{#ifpage 'index'}}

This is definitely the Index page.

{{/ifpage}} ``` You can also check for multiple pages. If *any* name in the list matches the current page, the HTML will appear. ```handlebars {{#ifpage 'index' 'about'}}

This is definitely either the Index or About page.

{{/ifpage}} ``` ### unlesspage The opposite of `#ifpage`, `#unlesspage` will only display the HTML inside of it if the current page is *not* in the parameters. ```handlebars {{#unlesspage 'index'}}

This is definitely not the Index page.

{{/unlesspage}} ``` ### repeat Repeats the content inside of it `n` number of times. Use this to easily print lots of duplicate HTML in a prototype. ```handlebars
    {{#repeat 5}}
  • Five hundred ninety-nine US dollars
    • {{/repeat}}
``` ### markdown Converts Markdown into HTML. ```handlebars {{#markdown}} # Heading 1 Lorem ipsum [dolor sit amet](https://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores. {{/markdown}} ``` ### Custom Helpers If you don't see the right helper, you can write your own. Add a javascript file to 'src/helpers', restart npm, then call it in your templates. ```javascript // Example file src/helpers/bold.js module.exports = function(options) { // options.fn(this) = Handlebars content between {{#bold}} HERE {{/bold}} var bolder = '' + options.fn(this) + ''; return bolder; } ``` Then in your projects call your custom `{{#bold}}` helper ```handlebars {{#bold}}ideas{{/bold}} ``` --- ## Custom Data Custom data can be added to your pages. This data can then be inserted into your HTML through Handlebars. There are two ways to add data to a project. To add variables to a specific page only, add it at the top of the page's HTML as a [Front Matter](https://jekyllrb.com/docs/frontmatter/) block. Let's say the below content is inside `src/pages/index.html`. ```html --- title: Page Title description: Lorem ipsum. --- ``` Now, you can insert the values of these variables into the `index.html` page, *or* the `default.html` layout. To insert a variable, wrap the name of the variable in double curly braces, like so: ```handlebars

{{ title }}

``` Variables can also be added globally by creating an external JSON or YML file, and adding it to the `src/data` folder in your project. Let's create a file called `breakfast.yml`: ```yaml - eggs - bacon - toast ``` Panini will load in the contents of this YML file as a variable called `{{ breakfast }}`. Because it's an array, we can loop through it using Handlebars's `{{#each}}` helper: ```handlebars
    {{#each breakfast}}
  • {{ this }}
    • {{/each}}
``` This code will print three `
  • `s, one for each item in the file. ## Tutorials [Staying D.R.Y. with Panini](https://get.foundation/university/lessons/staying-d-r-y-with-panini) Panini comes with tons of Handlebars helpers built in, like a repeat helper or markdown parser, but in this lesson we’ll take a look at creating a custom month/year helper for an HTML email. {{{{/raw}}}} ================================================ FILE: docs/pages/sass-guide.md ================================================ --- title: Getting Started with Sass description: Get started with the Sass-powered Foundation stack for writing HTML emails. --- Foundation for Emails takes the pain out of developing HTML emails by giving you a set of powerful, tested components out of the box. This includes a fully-responsive grid, buttons, callouts, menus, and more. The Sass workflow for Foundation for Emails is backed by the [Foundation Email Stack](zurb-stack.html), an all-in-one build system for creating HTML emails. This workflow requires a bit more up-front setup, but the tooling makes it wicked fast to code, and keeps your code amazingly clean with our new custom HTML tags in Inky. The Foundation stack workflow also includes Handlebars, allowing you to write emails as templates instead of static files. Lastly, you can easily make sweeping design changes with the Sass [settings file](sass.html#the-settings-file). Here’s everything that’s packaged in this template: - Inky HTML - Sass - Handlebars templates - BrowserSync - Image compression - Inlining In this Getting Started guide, we'll download Foundation for Emails, construct the basic grid, and then inline our email so it's ready to test. --- ## Requirements To use the Sass version of Foundation for Emails, you need Node.js installed on your computer. Node is compatible with Windows, OS X, and Linux—the [Node.js website](https://nodejs.org/) has installers for every operating system. --- ## Installing We'll use the Foundation CLI to set up a new project. If you already have the Foundation CLI installed from Foundation for Sites, you can skip this first command. ```bash npm install --global foundation-cli ``` If you run into any permission errors (EACCESS) on OS X or Linux, you can try prefixing the command with `sudo`. ```bash sudo npm install --global foundation-cli ``` Once the CLI is installed on your machine, it’s super easy to fire up a blank Foundation for Emails project. Move into the folder you store your projects in, and then run this command: ```bash foundation new --framework emails ``` The CLI will ask you for a project name, which is used as the name of the folder to install in. After that, the project template will be downloaded, and the various dependencies installed. The entire process takes over a minute. --- ## Running the Server After your project has been installed, run `cd project`, where `project` is the name of the project just created. Then run: ```bash npm start ``` This will kick off the build process, which includes HTML parsing, Sass, image compression, and a server. When the initial build finishes, your browser will pop open a new tab pointing to your project. You'll be seeing a blank `index.html` file. --- ## File Structure You'll do all of your work in the `src` folder of your project. The various HTML files, Sass files, and images inside of `src` are compiled to a new folder called `dist/` (as in "distribution"), which contains the final HTML and CSS for your emails. These are the files you'll upload to Litmus, Campaign Monitor, etc. for testing, or load into your email campaign service. Here's a breakdown of the files in the `src` folder: - `assets/`: Sass and image files. - `layouts/`: Boilerplate HTML that wraps all of your emails. - `pages/`: HTML files for emails. - `partials/`: Reusable chunks of HTML that can be injected into pages. --- ## Boilerplate Inside `src/layouts/default.html`, you can see the boilerplate needed to make an HTML work. Below we've annotated this boilerplate, explaining what does what. {{{{raw}}}} ```html
    {{> body}}
    ``` {{{{/raw}}}} --- ## Grid Basics Foundation for Emails includes many common elements needed to make HTML emails: a grid, typography styles, buttons, callouts, and more. The markup required to create HTML emails that work in all email clients is *complicated*, and involves writing many tables. However, the Foundation stack includes Inky, a templating language that converts simple HTML tags to the complex HTML required for the components. Let's build a basic grid. ```html Column One Column Two ``` Here we're using all three of the key layout elements: the container, row, and column. A **container** will wrap the body of your email. It applies a maximum width to the body of the email. **Rows** are used to group sets of **columns** together. Columns divide your layout into horizontal sections that sit side-by-side. On small screens, these columns stack on top of each other to save space—unless you set them up to keep their layout on small screens. In the above example, we used the attribute `large` on the `` tag to define a size for that column *on large screens*. Foundation uses a 12-column grid, and since `large="6"`, that means each column will take up half the width of the row. On a small screen, each columns will be full width and the second column will stack underneath. --- ## Inlining Now that we have a basic email, the last thing we need to do before we can send it is *inline* it. This is the process of injecting all of the CSS for the email into the HTML, so that it works as a self-contained file. Email clients like Gmail and Outlook strip out `

    BASIC

         ``` Using this structure outside of the container will yield a fluid width background that expands to the width of the email client's viewport. ================================================ FILE: docs/pages/zurb-stack.md ================================================ --- title: Foundation stack descripiton: The Foundation email stack is a boilerplate that gives you everything you need to develop and test HTML emails. --- Email and web development can get complicated fast. We’ve introduced the Foundation stack which helps you get started faster and lets you do more - without having to spend time finding the right tool for the job. The Foundation stack includes: ## Gulp This is our task runner of choice for Foundation. Gulp lets us queue up tasks to execute. This lets us do cool things like inlining automagically updating your browser. It’s what the Stack is built on. [Find out more about Gulp](https://gulpjs.com/). ## Sass We use Libsass as our CSS preprocessor of choice. If you’re not familiar with Sass, it lets you use variables, nesting, and mixins (to name a few). [Learn more about Sass](https://sass-lang.com/). ## Inlining One of the biggest headaches and time-sucks used to be inlining your HTML email. Well, no more! We’re using gulp-inline to to scan your CSS file and automatically inject your CSS when you’re ready. Just run `npm run build` in your project when you’re ready to inline. ## Build Options By default the inliner works without removing whitespaces and inlining for you, you have to change your settings in the inliner function (`function inliner(css)`) on your gulpfile.babel.js which is the root of your project. To change these settings go and update this part of the function as you wish: ``` .pipe($.htmlmin, { collapseWhitespace: true, minifyCSS: true }); ```. ## Panini This is our flat file generator for Foundation. Just like it’s real-world counterpart, it takes a set of ingredients and flattens them into one delicious item. This lets you separate things like the header and footer content into partials, letting you focus on your code when you’re building. It’s built off of Handlebars, which let’s you keep things super organized with partial files and repeatable sections. Checkout our [Panini Repo](https://github.com/foundation/panini). ## BrowserSync BrowserSync is awesome. It’s the specific tool in our Foundation stack that let’s you see your code changes in the browser in real-time. Just save your code and watch the magic happen in your browser. [Learn more about BrowserSync](https://www.browsersync.io/). ## Image Compression Finally, we’ve added gulp-imagemin which intelligently reduces the file-size of your png, jpeg, gif, and svg images. This lets your emails load at lightning speeds! [Check out the gulp-imagemin repo](https://github.com/sindresorhus/gulp-imagemin). ## Migrating a Project to 2.2.1 Updating Foundation for Emails is quite easy. Navigate to your package.json file in the root of your project folder. You'll want to change the dependency from your current version (around line 16) to version `2.2.1`. After that you will need to update to the latest version of inky. In the same package.json file, find the section devDependcies. (around line 41). Change your current version of inky to `^1.3.6`. Once that is completed, you will need to update the app.scss file. In order to be able to use Foundation for Sites and Emails together without conflicts, the Foundation for Emails CSS file’s name has changed from `foundation` to `foundation-emails`. If you are using the CSS version you can change the name from `foundation.min.css` to `foundation-emails.min.css`. Next, open up command line and navigate to the root of your project folder. Run `npm install`. Once completed, run `foundation build`. --- The Foundation stack is just a starting place that lets you do all of the things mentioned above! You can totally rip out or add to the Foundation stack’s gulp file to make your perfect email environment. ================================================ FILE: docs/partials/component-list.html ================================================ ================================================ FILE: docs/partials/course-callout.html ================================================ Foundation Master Class Responsive Emails

    In this online class, you’ll learn how to rapidly design and develop responsive emails that look beautiful on just about every screen, browser, and email client out there—even Outlook.

    View Class     ================================================ FILE: docs/partials/footer.html ================================================

    Foundation MASTER CLASS Responsive Emails

    In this online class, you’ll learn how to rapidly design and develop responsive emails that look beautiful on just about every screen, browser, and email client out there—even Outlook.

    Learn Foundation for Emails

    Foundation for Emails

    Foundation for Emails is a framework for responsive HTML emails created by Foundation, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

    Want more?

    Talk to us

    Tweet us at
    @Foundationfoundation

    Get involved in
    our amazing community.

    Stay Updated

    Keep up with the latest on Foundation. Find us on Github.

    Stay Connected

    © 1998‐2018 Foundation, Inc. All rights reserved.

    ================================================ FILE: docs/partials/mobile-navigation.html ================================================
    Foundation
    ================================================ FILE: docs/partials/navigation.html ================================================ ================================================ FILE: docs/partials/off-canvas.html ================================================ ================================================ FILE: gem/.gitignore ================================================ /.bundle/ /.yardoc /Gemfile.lock /_yardoc/ /coverage/ /doc/ /pkg/ /spec/reports/ /tmp/ ================================================ FILE: gem/.rspec ================================================ --format documentation --color ================================================ FILE: gem/.travis.yml ================================================ sudo: false language: ruby rvm: - 2.3.0 before_install: gem install bundler -v 1.12.4 ================================================ FILE: gem/Gemfile ================================================ source 'https://rubygems.org' # Specify dependencies in foundation-emails.gemspec gemspec ================================================ FILE: gem/LICENSE.md ================================================ Copyright (c) 2016 Foundation, inc. The MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: gem/README.md ================================================ # foundation_emails [![Gem Version](https://badge.fury.io/rb/foundation_emails.svg)](https://badge.fury.io/rb/foundation_emails) **foundation_emails** is a gem that enables you to use Foundation for Emails assets within a Rails project. Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook. Our HTML/CSS components have been tested across every major email client to ensure consistency. ## Installation 1. Add the following line to your Gemfile: ```ruby gem 'foundation_emails' ``` 2. Then execute: ```bash bundle install ``` 3. Import Foundation for Emails in your emails' stylesheet(s): ```scss // app/assets/stylesheets/your_emails_stylesheet.scss @import "foundation-emails"; ``` ## License The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). ================================================ FILE: gem/Rakefile ================================================ require "bundler/gem_tasks" require "rspec/core/rake_task" RSpec::Core::RakeTask.new(:spec) task :default => :spec ================================================ FILE: gem/bin/console ================================================ #!/usr/bin/env ruby require "bundler/setup" require "foundation_emails" require "irb" IRB.start ================================================ FILE: gem/bin/setup ================================================ #!/usr/bin/env bash set -euo pipefail IFS=$'\n\t' set -vx bundle install ================================================ FILE: gem/foundation-emails.gemspec ================================================ # coding: utf-8 lib = File.expand_path("../lib", __FILE__) $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) require "foundation_emails/version" Gem::Specification.new do |spec| spec.name = "foundation_emails" spec.version = FoundationEmails::VERSION spec.authors = ["Foundation"] spec.email = ["contact@get.foundation"] spec.summary = %q{A framework for responsive emails.} spec.description = %q{Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client.} spec.homepage = "https://get.foundation/emails" spec.license = "MIT" spec.files = Dir[ File.join("**", "*") ].reject { |p| File.directory?(p) || p.match(%{^(test|spec|features)/}) } # Include symlinked files separately spec.files += Dir.glob("vendor/assets/stylesheets/foundation-emails/**/*.*") spec.bindir = "exe" spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) } spec.require_paths = ["lib"] spec.add_development_dependency "bundler", "~> 2" spec.add_development_dependency "rake", "~> 10.0" spec.add_development_dependency "rspec", "~> 3.0" end ================================================ FILE: gem/lib/foundation_emails/engine.rb ================================================ require "rails" module FoundationEmails class Engine < ::Rails::Engine end end ================================================ FILE: gem/lib/foundation_emails/version.rb ================================================ module FoundationEmails VERSION = "2.4.0.0" end ================================================ FILE: gem/lib/foundation_emails.rb ================================================ require "foundation_emails/version" require "foundation_emails/engine" module FoundationEmails end ================================================ FILE: gem/spec/foundation/emails_spec.rb ================================================ require "spec_helper" describe FoundationEmails do it "has a version number" do expect(FoundationEmails::VERSION).not_to be nil end end ================================================ FILE: gem/spec/spec_helper.rb ================================================ $LOAD_PATH.unshift File.expand_path("../../lib", __FILE__) require "foundation_emails" ================================================ FILE: gem/vendor/assets/stylesheets/_foundation-emails.scss ================================================ @import "foundation-emails/foundation-emails"; ================================================ FILE: gulpfile.js ================================================ var $ = require('gulp-load-plugins')(); var gulp = require('gulp'); var sequence = require('run-sequence'); var panini = require('panini'); var supercollider = require('supercollider'); var rimraf = require('rimraf'); var browser = require('browser-sync'); var foundationDocs = require('foundation-docs'); var octophant = require('octophant'); var inky = require('inky'); var siphon = require('siphon-media-query'); var lazypipe = require('lazypipe'); var fs = require('fs'); var yargs = require('yargs'); var sass = require('gulp-sass')(require('sass')); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); // Configuration for the documentation generator supercollider .config({ template: foundationDocs.componentTemplate, marked: foundationDocs.marked, handlebars: foundationDocs.handlebars, keepFm: true, quiet: false, pageRoot: 'docs/pages', data: { repoName: 'foundation-emails', editBranch: 'develop' } }) .searchConfig({ sort: ['page', 'component', 'sass variable', 'sass mixin', 'sass function', 'js class', 'js function', 'js plugin option', 'js event'], pageTypes: { library: function(item) { return !!(item.library); } } }) .adapter('sass') .adapter('js'); // Cleans the build folder gulp.task('clean', function(cb) { rimraf('_build', cb); }); // Copies static documentation assets gulp.task('copy', function() { return gulp.src(['docs/assets/**/*', '!docs/assets/scss/**/*', '!docs/assets/js/**/*']) .pipe(gulp.dest('_build/assets')); }); // Copies inky-browser gulp.task('copy-inky', function() { return gulp.src(['node_modules/inky/dist/inky-browser.js']) .pipe(gulp.dest('_build/assets/js')); }); // Builds documentation pages gulp.task('html', function() { return gulp.src('docs/pages/**/*') .pipe($.cached('docs')) .pipe(supercollider.init()) .pipe(panini({ root: 'docs/pages/', layouts: 'docs/layouts/', partials: 'docs/partials/', helpers: foundationDocs.handlebarsHelpers })) .pipe(gulp.dest('_build')) .on('finish', function() { supercollider.buildSearch('_build/data/search.json', function() {}); }); }); // Compiles documentation-specific CSS gulp.task('sass:docs', function() { return gulp.src('docs/assets/scss/docs.scss') .pipe(sass.sync({ includePaths: [process.cwd()] }).on('error', sass.logError)) .pipe(postcss([autoprefixer()])) .pipe(gulp.dest('_build/assets/css')); }); // Compiles Foundation-specific CSS gulp.task('sass:foundation', function() { return gulp.src('scss/foundation-emails.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(gulp.dest('_build/assets/css')); }); gulp.task('sass', gulp.series('sass:docs', 'sass:foundation')); // Compiles documentation JavaScript gulp.task('javascript:docs', function() { return gulp.src(['node_modules/foundation-docs/js/*.js', 'docs/assets/js/**/*.js']) .pipe($.concat('docs.js')) .pipe(gulp.dest('_build/assets/js')); }); // Generates a Sass settings file from the current codebase gulp.task('settings', function(cb) { return octophant('scss/**/*.scss', { title: 'Foundation for Emails Settings', output: 'scss/settings/_settings.scss', sort: ['global', 'grid', 'block-grid', 'type'] }, cb); }); // Lints the Sass codebase gulp.task('lint', function() { return gulp.src('scss/**/*.scss') .pipe($.sassLint()) .pipe($.sassLint.format()) .pipe($.sassLint.failOnError()); }); // Runs the entire build process gulp.task('build', gulp.series('clean', 'copy', 'copy-inky', 'html', 'sass', 'javascript:docs', function(cb){ cb(); })); // Creates a BrowserSync server gulp.task('server', gulp.series('build', function(){ browser.init({server: './_build', port: yargs.argv.port||3001}); })); // Uploads the documentation to the live server // gulp.task('deploy:docs', gulp.series('build'), function() { // return gulp.src('./_build/**') // .pipe($.prompt.confirm('Make sure everything looks right before you deploy.')) // .pipe($.rsync({ // root: './_build', // hostname: 'deployer@72.32.134.77', // destination: '/home/deployer/sites/foundation-emails-march16' // })); // }); // Runs the build process, spins up a server, and watches for file changes gulp.task('default', gulp.series('server', function() { gulp.watch('docs/**/*', gulp.series('html', browser.reload)); gulp.watch(['docs/assets/scss/**/*', 'node_modules/foundation-docs/scss/**/*'], gulp.series('sass:docs', browser.reload)); gulp.watch('scss/**/*.scss', gulp.series('sass:foundation', browser.reload)); })); gulp.task('test:compile', function() { return gulp.src('test/visual/pages/*.html') .pipe($.wrap({ src: 'test/visual/_template.html' })) .pipe(inky()) .pipe(inliner('_build/assets/css/foundation-emails.css')) .pipe(gulp.dest('test/visual/_build')); }); gulp.task('test', gulp.series('sass', 'test:compile', function() { browser.init({ server: 'test/visual/_build', directory: true }); gulp.watch('scss/**/*.scss', gulp.series('sass:foundation', browser.reload)); gulp.watch('test/visual/pages/*.html', gulp.series('test:compile', browser.reload)); })); gulp.task('templates', function() { return gulp.src('templates/*.html') .pipe($.wrap({ src: 'test/visual/_template.html' })) .pipe(inky()) .pipe($.prettify({ indent_size: 2 })) .pipe(gulp.dest('.templates')) .pipe($.zip('all-templates.zip')) .pipe(gulp.dest('.templates')); }); gulp.task('download:build:index', function() { return gulp.src('test/visual/_template.html', { base: 'test/visual' }) .pipe($.injectString.replace('<%= contents %>', '')) .pipe($.injectString.replace('../assets/', '')) .pipe($.rename('index.html')) .pipe(gulp.dest('.download')); }); gulp.task('download:build:templates', gulp.series('templates', function() { return gulp.src('.templates/*.html') .pipe(gulp.dest('.download/templates')); })); gulp.task('download:build:css', gulp.series('sass:foundation', function() { return gulp.src('_build/assets/css/foundation-emails.css') .pipe(gulp.dest('.download/css')); })); gulp.task('download:build', gulp.series('download:build:index', 'download:build:templates', 'download:build:css', function() { return gulp.src('.download/**/*') .pipe($.zip('foundation-emails.zip')) .pipe(gulp.dest('.')); })); // gulp.task('download', gulp.series('download:build', function(done) { // return gulp.src('foundation-emails.zip') // .pipe($.rsync({ // hostname: 'deployer@72.32.134.77', // destination: '/home/deployer/sites/foundation-sites-6-marketing/downloads/' // })); // })); gulp.task('dist', gulp.series('sass:foundation', function() { return gulp.src('_build/assets/css/foundation-emails.css') .pipe(gulp.dest('dist')) .pipe(postcss([cssnano()])) .pipe($.rename('foundation-emails.min.css')) .pipe(gulp.dest('dist')); })); function inliner(css) { css = fs.readFileSync(css).toString(); var mqCss = siphon(css); var pipe = lazypipe() .pipe($.inlineCss, { applyStyleTags: false, removeStyleTags: false, removeLinkTags: false }) .pipe($.injectString.replace, '', '') .pipe($.htmlmin, { collapseWhitespace: false, minifyCSS: false, maxLineLength: 800 }); return pipe(); } ================================================ FILE: migration.md ================================================ # Foundation for Emails 2 Migration Guide - [What’s new?](#whats-new) - [Overview](#overview) - [HTML](#html) - [CSS/Sass](#csssass) - [Components](#components) - [Grid](#grid) - [Sub-grid is now a small grid](#sub-grid-is-now-a-small-grid) - [Block Grid](#block-grid) - [Offset Columns](#offset-columns) - [Buttons](#buttons) - [Panels are now Callouts](#panels-are-now-callouts) - [NEW](#new) - [Menu](#menu) - [Dependencies](#dependencies) #### This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to 2. ## What’s new? - **Streamlined and updated responsive grid:** We’ve simplified the markup in the new version so it’s faster and easier to code. The new responsive grid in Emails 2 requires fewer tags and classes. It’s also now responsive on Android Native! - **Inky templating language:** With Inky you can write less code and get more done. The Inky language gets you out of tables and into a simpler, more web-like, HTML. - **Built with Sass:** Now faster than ever, you can easily make sweeping visual changes to your email that reflect your brand styles - all within one settings file. - **Foundation stack:** All kinds of task automation - [Panini](https://get.foundation/sites/docs/panini.html), our Handlebars templates, compiling Sass, BrowserSync, image compression, and auto inlining are built in to speed up your workflow. ## Overview When migrating, the following items can be translated easily from 1 to 2: - Boilerplate - Visibility - Typography - Text helper classes - Button class - Container - Panel - Media Queries Other areas may require more changes to work correctly including: - Grid - Sub-grid (now part of Grid) What’s new that you might want to use: - Menu - Horizontal - Menu - Vertical ## HTML With Foundation for Emails 2, confusing and tedious tables are a thing of the past. The new Inky markup will save you time and energy coding your emails. It looks like: ``` ``` You can use it to create the grid structure, buttons, and other components. We’ll go into this in detail in the components section. We'll explain more in the [Grid section](#grid). ## CSS/Sass Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings. These are some CSS classes that are no longer needed for proper spacing: - .wrapper - .wrapper-last - .text-pad - .text-pad-left - .text.pad-right *** ## Components *** ### Grid Version 1 In the previous version, we needed extra tags to support a wrapper element. This used to control the gutter and margins of a column. ```
    ``` Version 2 (CSS version) In F4E 2, we’ve eliminated another a tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a last class, however we also need to identify the first column element with the first class. ```
    ``` Version 2 (Inky markup) ``` ``` ### Sub-grid is now a small grid In an effort to unify the thinking across the Foundation family, we’ve removed the sub-columns and moved towards a fully functional small grid. Version 1 ```
    ``` Version 2 (CSS version) ```
    ``` Version 2 (Inky markup) ``` ``` ### Block Grid The block grid has a minor syntax change with identifying the number of elements that are displayed in the row. We’ve moved to the convention of `.up-x`, instead of `.ex-up`. Version 1 ```
    Thing 1 Thing 2 Thing 3
    ``` Version 2 (CSS version) ```
    Thing 1 Thing 2 Thing 3
    ``` Version 2 (Inky markup) ```
    		• Thing 1 Thing 2 Thing 3
    ``` Version 2 (CSS version) ```
    ``` Version 2 (Inky markup) ``` ``` ## Buttons In the previous version of F4E the text inside of the button was the only clickable element. In F4E 2, we’ve taken the hybrid approach of using padding and borders to increase the clickable area Version 1 ```
    Button Label
    ``` Version 2 (CSS version) ```
    I am successful
    ``` Version 2 (Inky markup) ``` ``` The button markup has changed to make the touch targets better. Now the whole button is clickable. It requires more table markup but you should use Inky anyways which is much simpler. ## Panels are now Callouts In an effort to unify the terminology across the Foundation family panels are now called callouts. Version 1 ```
    Panel content
    ``` Version 2 (CSS version) ```
    ``` Version 2 (Inky markup) ```

    One Word

    2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf

    One Word

    2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf

         ``` Callouts used to only be applicable to a ``. In Foundation for Emails 2, you can wrap a callout around a `` or the content inside a ``. *** ## NEW *** ### Menu Version 2 (CSS version) ```
    Nav 1 Nav 2 Nav 3
    ``` Version 2 (Inky markup) ``` Item One Item Two Item Three ``` The menu component can be used to create a simple set of links comonly used in headers, for social icons or in footers. Adding the `.vertical` class will change the orientation. ## Dependencies **CSS:** - Text Editor **Sass version:** - Text Editor - Git - Node To use the Sass version with the Inky markup language you'll want to insall the Foundation for Emails project template. You'll find the [installation instructions here](https://github.com/foundation/foundation-emails#getting-started). ================================================ FILE: package.json ================================================ { "name": "foundation-emails", "version": "2.5.1", "description": "A framework for responsive emails", "keywords": [ "responsive", "emails" ], "style": "dist/foundation-emails.min.css", "main": "dist/foundation-emails.css", "author": "Foundation (https://get.foundation)", "scripts": { "start": "gulp", "test": "gulp test", "dist": "gulp dist" }, "repository": "https://github.com/foundation/foundation-emails", "bugs": "https://github.com/foundation/foundation-emails/issues", "devDependencies": { "browser-sync": "^2.9.10", "cheerio": "^1.0.0-rc.3", "cssnano": "^4.1.10", "foundation-docs": "git+https://github.com/foundation/foundation-docs.git", "foundation-sites": "git+https://github.com/foundation/foundation-sites.git", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-cached": "^1.1.0", "gulp-concat": "^2.6.0", "gulp-htmlmin": "^5.0.1", "gulp-if": "^3.0.0", "gulp-inject-string": "^1.1.0", "gulp-inline-css": "^3.4.0", "gulp-load-plugins": "^2.0.8", "gulp-postcss": "^8.0.0", "gulp-prettify": "^0.5.0", "gulp-prompt": "^1.2.0", "gulp-rename": "^1.2.2", "gulp-rsync": "0.0.8", "gulp-sass": "^5.1.0", "gulp-sass-lint": "^1.4.0", "gulp-sourcemaps": "^2.6.5", "gulp-wrap": "^0.15.0", "gulp-zip": "^5.0.1", "inky": "^1.5.0", "js-yaml": "^3.14.0", "lazypipe": "^1.0.1", "lodash.template": ">=4.5.0", "marked": "^4.3.0", "motion-ui": "^2.0.8", "multiline": "^2.0.0", "octophant": "^1.0.0", "panini": "^1.7.1", "rimraf": "^3.0.0", "run-sequence": "^2.2.1", "sass": "^1.98.0", "siphon-media-query": "^1.0.0", "supercollider": "^1.5.2", "typeahead.js": "^0.11.1", "yargs": "^14.2.0" }, "resolutions": { "minimist": "^1.2.5", "braces": "^2.3.2", "lodash.template": ">=4.5.0" }, "license": "MIT", "eyeglass": { "name": "foundation-emails", "sassDir": "scss", "needs": "^0.8.0" } } ================================================ FILE: scss/_global.scss ================================================ // Foundation for Emails // foundation.get.foundation // Licensed under MIT Open Source //// /// @group global //// /// Primary color for interactive components like links and buttons. /// @type Color $primary-color: #2199e8 !default; /// Secondary color, used with components that support the `.secondary` class. /// @type Color $secondary-color: #777777 !default; /// Color to indicate a positive status or action, used with the `.success` class. /// @type Color $success-color: #3adb76 !default; /// Color to indicate a caution status or action, used with the `.warning` class. /// @type Color $warning-color: #ffae00 !default; /// Color to indicate a negative status or action, used with the `.alert` class. /// @type Color $alert-color: #ec5840 !default; /// Color used for light gray UI items within Foundation. /// @type Color $light-gray: #f3f3f3 !default; /// Color used for medium gray UI items within Foundation. /// @type Color $medium-gray: #cacaca !default; /// Color used for dark gray UI items within Foundation. /// @type Color $dark-gray: #8a8a8a !default; /// Color used for black ui items within Foundation /// @type Color $black: #0a0a0a !default; /// Color used for white ui items within Foundation /// @type Color $white: #fefefe !default; /// Color used code. /// @type Color $pre-color: #ff6908 !default; /// Width of the container. /// @type Number $global-width: 580px !default; /// Width of the container on small screens. /// @type Length $global-width-small: 95% !default; /// Gutter for grid elements. /// @type length $global-gutter: 16px !default; /// Gutter for grid elements on small screens. /// @type length $global-gutter-small: $global-gutter !default; /// Body background color. /// @type Length $body-background: $light-gray !default; /// Color for the container background /// @type Color $container-background: $white !default; /// Global padding. /// @type Number $global-padding: 16px !default; /// Global margin. Margin requires a capital 'M' to workin Outlook.com /// @type Number $global-margin: 16px !default; /// Global radius of radius-corners. /// @type Number $global-radius: 3px !default; /// Global rounded radius of rounded-corners. /// @type Number $global-rounded: 500px !default; /// Global media query to switch from desktop to mobile styles. /// @type String $global-breakpoint: $global-width + $global-gutter !default; .wrapper { width: 100%; } ================================================ FILE: scss/components/_alignment.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group alignment //// table, th, td, h1, h2, h3, h4, h5, h6, p, span { &.text-center { text-align: center; } &.text-left { text-align: left; } &.text-right { text-align: right; } } span.text-center { display: block; width: 100%; text-align: center; } @media only screen and (max-width: #{$global-breakpoint}) { .small-float-center { margin: 0 auto !important; float: none !important; text-align: center !important; } .small-text-center { text-align: center !important; } .small-text-left { text-align: left !important; } .small-text-right { text-align: right !important; } } img.float-left { float: left; text-align: left; } img.float-right { float: right; text-align: right; } img.float-center, img.text-center { margin: 0 auto; Margin: 0 auto; float: none; text-align: center; } table, td, th { &.float-center { margin: 0 auto; Margin: 0 auto; float: none; text-align: center; } } td.columns, td.column, th.columns, th.column { &[valign="bottom"] { vertical-align: bottom; } } td.columns, td.column, th.columns, th.column { &[valign="middle"] { vertical-align: middle; } } ================================================ FILE: scss/components/_button.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source @use "sass:color"; @use "sass:map"; //// /// @group button //// /// Padding inside buttons at various sizes. /// @type Map $button-padding: ( tiny: 8px 16px 8px 16px, small: 10px 20px 10px 20px, default: 8px 16px 8px 16px, large: 10px 20px 10px 20px, ) !default; /// Font sizes of buttons at various sizes. /// @type Map $button-font-size: ( tiny: 10px, small: 12px, default: 16px, large: 20px, ) !default; /// Text color of buttons. /// @type Color $button-color: $white !default; /// Text color of buttons with a light background. /// @type Color $button-color-alt: $medium-gray !default; /// Font weight of buttons. /// @type Weight $button-font-weight: bold !default; /// Margin around buttons. /// @type List $button-margin: 0 0 $global-margin 0 !default; /// Background color of buttons. /// @type Color $button-background: $primary-color !default; $button-background-hover: color.adjust($button-background, $lightness: -10%, $space: hsl) !default; $button-secondary-background-hover: color.adjust($secondary-color, $lightness: +10%, $space: hsl) !default; $button-success-background-hover: color.adjust($success-color, $lightness: -10%, $space: hsl) !default; $button-alert-background-hover: color.adjust($alert-color, $lightness: -10%, $space: hsl) !default; $button-warning-background-hover: color.adjust($warning-color, $lightness: -10%, $space: hsl) !default; /// Border around buttons. /// @type Border $button-border: 2px solid $button-background !default; /// Border radius of buttons. Not supported by all email clients. /// @type Number $button-radius: $global-radius !default; /// Border radius of rounded buttons. Not supported by all email clients. /// @type Number $button-rounded: $global-rounded !default; table.button { width: auto; margin: $button-margin; Margin: $button-margin; table { td { text-align: left; color: $button-color; background: $button-background; border: $button-border; a { font-family: $body-font-family; font-size: map.get($button-font-size, default); font-weight: $button-font-weight; color: $button-color; text-decoration: none; text-align: left; display: inline-block; padding: map.get($button-padding, default); border: 0 solid $button-background; border-radius: $button-radius; } } } &.radius table td { border-radius: $button-radius; border: none; } &.rounded table td { border-radius: $button-rounded; border: none; } } table.button:not(.expand):not(.expanded) table { width: auto; } table.button:hover table tr td a, table.button:active table tr td a, table.button table tr td a:visited, table.button.tiny:hover table tr td a, table.button.tiny:active table tr td a, table.button.tiny table tr td a:visited, table.button.small:hover table tr td a, table.button.small:active table tr td a, table.button.small table tr td a:visited, table.button.large:hover table tr td a, table.button.large:active table tr td a, table.button.large table tr td a:visited { color: $button-color; } table.button.tiny { table { a { padding: map.get($button-padding, tiny); font-size: map.get($button-font-size, tiny); font-weight: normal; } } } table.button.small { table { a { padding: map.get($button-padding, small); font-size: map.get($button-font-size, small); } } } table.button.large { table { a { padding: map.get($button-padding, large); font-size: map.get($button-font-size, large); } } } table.button.expand, table.button.expanded { width: 100%; table { width: 100%; a { text-align: center; width: 100%; padding-left: 0; padding-right: 0; } } center { min-width: 0; } } table.button:hover, table.button:visited, table.button:active { table { td { background: $button-background-hover; border-color: $button-background-hover; color: $button-color; } } } table.button:hover, table.button:visited, table.button:active { table { a { border: 0 solid $button-background-hover; } } } table.button.secondary { table { td { background: $secondary-color; color: $button-color; border: 0px solid $secondary-color; } a { color: $button-color; border: 0 solid $secondary-color; } } } table.button.secondary:hover { table { td { background: $button-secondary-background-hover; border-color: $button-secondary-background-hover; color: $button-color; } a { border: 0 solid $button-secondary-background-hover; } } } table.button.secondary:hover { table { td a { color: $button-color; } } } table.button.secondary:active { table { td a { color: $button-color; } } } table.button.secondary { table { td a:visited { color: $button-color; } } } table.button.success { table { td { background: $success-color; border: 0px solid $success-color; } a { border: 0 solid $success-color; } } } table.button.success:hover { table { td { background: $button-success-background-hover; border-color: $button-success-background-hover; } a { border: 0 solid $button-success-background-hover; } } } table.button.alert { table { td { background: $alert-color; border: 0px solid $alert-color; } a { border: 0 solid $alert-color; } } } table.button.alert:hover { table { td { background: $button-alert-background-hover; border-color: $button-alert-background-hover; } a { border: 0 solid $button-alert-background-hover; } } } table.button.warning { table { td { background: $warning-color; border: 0px solid $warning-color; } a { border: 0px solid $warning-color; } } } table.button.warning:hover { table { td { background: $button-warning-background-hover; border-color: $button-warning-background-hover; } a { border: 0 solid $button-warning-background-hover; } } } // Hollow Buttons @mixin hollow-button($color, $class: false) { // If this mixin is called with a class, then a class will be added // Then the mixin calls itself with just the color to obtain the color styles @if $class { &.#{$class} { @include hollow-button($color); } } @else { table tr td a { border: 1px solid $color; color: $color; &:visited { color: $color; } &:hover { border-color: color.adjust($color, $lightness: -10%, $space: hsl); color: color.adjust($color, $lightness: -10%, $space: hsl); } } } } table.button.hollow { table td, &:hover table td { border: none !important; border-radius: 0; background: transparent !important; } table a { border-radius: 0; } &.radius { table a { border-radius: $global-radius; } } &.rounded { table a { border-radius: $global-rounded; } } @include hollow-button($primary-color); @include hollow-button($secondary-color, 'secondary'); @include hollow-button($alert-color, 'alert'); @include hollow-button($warning-color, 'warning'); @include hollow-button($success-color, 'success'); } ================================================ FILE: scss/components/_callout.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source @use "sass:color"; //// /// @group callout //// /// Background color of a callout. /// @type Color $callout-background: $white !default; /// Fade value for callout backgrounds. /// @type Number $callout-background-fade: 85% !default; /// Padding inside a callout. /// @type Length $callout-padding: 10px !default; /// Padding inside a callout on small screens. /// @type Length $callout-padding-small: $callout-padding !default; /// Bottom margin of a callout. /// @type Length $callout-margin-bottom: $global-margin !default; /// Border around a callout. /// @type Border $callout-border: 1px solid color.adjust($callout-background, $lightness: -20%, $space: hsl) !default; /// Border around a callout with the `.primary` class. /// @type Border $callout-border-primary: 1px solid color.adjust($primary-color, $lightness: -20%, $space: hsl) !default; $callout-background-primary: color.scale($primary-color, $lightness: $callout-background-fade) !default; /// Border around a callout with the `.secondary` class. /// @type Border $callout-border-secondary: 1px solid color.adjust($secondary-color, $lightness: -20%, $space: hsl) !default; $callout-background-secondary: color.scale($secondary-color, $lightness: $callout-background-fade) !default; /// Border around a callout with the `.success` class. /// @type Border $callout-border-success: 1px solid color.adjust($success-color, $lightness: -20%, $space: hsl) !default; $callout-background-success: color.scale($success-color, $lightness: $callout-background-fade) !default; /// Border around a callout with the `.warning` class. /// @type Border $callout-border-warning: 1px solid color.adjust($warning-color, $lightness: -20%, $space: hsl) !default; $callout-background-warning: color.scale($warning-color, $lightness: $callout-background-fade) !default; /// Border around a callout with the `.alert` class. /// @type Border $callout-border-alert: 1px solid color.adjust($alert-color, $lightness: -20%, $space: hsl) !default; $callout-background-alert: color.scale($alert-color, $lightness: $callout-background-fade) !default; table.callout { margin-bottom: $callout-margin-bottom; Margin-bottom: $callout-margin-bottom; } th.callout-inner { width: 100%; border: $callout-border; padding-top: $callout-padding; padding-right: $callout-padding; padding-bottom: $callout-padding; padding-left: $callout-padding; background: $callout-background; &.primary { background: $callout-background-primary; border: $callout-border-primary; color: $black; } &.secondary { background: $callout-background-secondary; border: $callout-border-secondary; color: $black; } &.success { background: $callout-background-success; border: $callout-border-success; color: $black; } &.warning { background: $callout-background-warning; border: $callout-border-warning; color: $black; } &.alert { background: $callout-background-alert; border: $callout-border-alert; color: $black; } } ================================================ FILE: scss/components/_code.scss ================================================ ================================================ FILE: scss/components/_media-query.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group media-query //// @media only screen and (max-width: #{$global-breakpoint}) { table.body img { width: auto; height: auto; } table.body center { min-width: 0 !important; } table.body .container { width: $global-width-small !important; } //If it supports border-box, why not? Am I right? //Also, by default pad that to the global-gutter variable table.body .columns, table.body .column { height: auto !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: $global-gutter-small !important; padding-right: $global-gutter-small !important; } // Collpased columns have no gutter. .collapse { table.body & > tbody > tr > .columns, table.body & > tbody > tr > .column { padding-left: 0 !important; padding-right: 0 !important; } } // Basic grid rules @for $i from 1 through $grid-column-count { td.small-#{$i}, th.small-#{$i} { display: inline-block !important; width: -zf-grid-calc-pct($i, $grid-column-count) !important; } } //If it's the last column in column count (12 by default), //give it block and 100% width to knock down the wimpy columns to their own row. .columns td.small-#{$grid-column-count}, .column td.small-#{$grid-column-count}, .columns th.small-#{$grid-column-count}, .column th.small-#{$grid-column-count} { display: block !important; width: 100% !important; } @for $i from 1 through ($grid-column-count - 1) { table.body td.small-offset-#{$i}, table.body th.small-offset-#{$i} { //1.5 takes in effect a whole empty cell. margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important; Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important; } } table.body table.columns td.expander, table.body table.columns th.expander { display: none !important; } table.body .right-text-pad, table.body .text-pad-right { padding-left: $text-padding !important; } table.body .left-text-pad, table.body .text-pad-left { padding-right: $text-padding !important; } //menu table.menu { width: 100% !important; td, th { width: auto !important; display: inline-block !important; } &.vertical, &.small-vertical { td, th { display: block !important; } } } // Centers the menus! table.menu[align="center"] { width: auto !important; } // expands buttons for small only table.button.small-expand, table.button.small-expanded { width: 100% !important; table { width: 100%; a { text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } center { min-width: 0; } } // Small padding inside callouts th.callout-inner { padding: $callout-padding-small !important; } } ================================================ FILE: scss/components/_menu.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group menu //// /// Padding inside a menu item. /// @type Length $menu-item-padding: 10px !default; /// Right-hand spacing of items in menus with the `.simple` class. /// @type Length $menu-item-gutter: 10px !default; /// This is the color of the menu item links. /// @type Color $menu-item-color: $primary-color !default; table.menu { width: $global-width; td.menu-item, th.menu-item { padding-top: $menu-item-padding; padding-right: $menu-item-gutter; padding-bottom: $menu-item-padding; padding-left: $menu-item-padding; a { color: $menu-item-color; } } } // Doesn't work on the pesky ESPs like outlook 2000 table.menu.vertical { td.menu-item, th.menu-item { padding-top: $menu-item-padding; padding-right: 0; padding-bottom: $menu-item-padding; padding-left: $menu-item-padding; display: block; a { width: 100%; } } // Nested lists need some more padding to the left td.menu-item, th.menu-item { table.menu.vertical { td.menu-item, th.menu-item { padding-left: $menu-item-padding; } } } } table.menu.text-center a { text-align: center; } //Centers the menus! .menu[align="center"] { width: auto; } .menu[align="center"] tr { text-align: center; } // Remove outside padding so that the menu aligns with other elements on the page .menu:not(.float-center) { .menu-item:first-child{padding-left:0!important;} .menu-item:last-child{padding-right:0!important;} } .menu.vertical .menu-item { padding-left:0!important; padding-right:0!important; } @media only screen and (max-width: #{$global-breakpoint}) { .menu.small-vertical .menu-item { padding-left:0!important; padding-right:0!important; } } ================================================ FILE: scss/components/_normalize.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group normalize //// #outlook a { padding: 0; } body { width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; Margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ExternalClass { width: 100%; &, p, span, font, td, th, div { line-height: 100%; } } #backgroundTable { margin: 0; Margin: 0; padding: 0; width: 100% !important; line-height: 100% !important; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; clear: both; display: block; } center { width: 100%; } a img { border: none; } table { border-spacing: 0; border-collapse: collapse; } td, th { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } table, tr, td, th { padding: 0; vertical-align: top; text-align: left; } ================================================ FILE: scss/components/_outlook-first.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group outlook //// body.outlook p { display: inline !important; } ================================================ FILE: scss/components/_thumbnail.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group thumbnail //// /// Border around thumbnail images. /// @type Border $thumbnail-border: solid 4px $white !default; /// Bottom margin for thumbnail images. /// @type Length $thumbnail-margin-bottom: $global-margin !default; /// Box shadow under thumbnail images. /// @type Shadow $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default; /// Box shadow under thumbnail images. /// @type Shadow $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default; /// Transition proprties for thumbnail images. /// @type Transition $thumbnail-transition: box-shadow 200ms ease-out !default; /// Default radius for thumbnail images. /// @type Number $thumbnail-radius: $global-radius !default; /// Adds thumbnail styles to an element. .thumbnail { border: $thumbnail-border; box-shadow: $thumbnail-shadow; display: inline-block; line-height: 0; max-width: 100%; transition: $thumbnail-transition; border-radius: $thumbnail-radius; margin-bottom: $thumbnail-margin-bottom; &:hover, &:focus { box-shadow: $thumbnail-shadow-hover; } } ================================================ FILE: scss/components/_typography.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source @use "sass:math"; @use "sass:color"; //// /// @group typography //// /// Global font color. /// @type Color $global-font-color: $black !default; /// Global font family. /// @type Font $body-font-family: Helvetica, Arial, sans-serif !default; /// Global font weight. /// @type Keyword $global-font-weight: normal !default; /// Header color /// @type Color $header-color: inherit !default; /// Global line height. /// @type Number $global-line-height: 130% !default; /// Font size of body text. /// @type Number $global-font-size: 16px !default; /// Line height of body text. /// @type Number $body-line-height: $global-line-height !default; /// Font family of headings. /// @type List $header-font-family: $body-font-family !default; /// Font family of headings. /// @type List $header-font-weight: $global-font-weight !default; /// Font size of `

    ` elements. /// @type Number $h1-font-size: math.floor($global-font-size * 2.125) !default; /// Font size of `

    ` elements. /// @type Number $h2-font-size: math.floor($global-font-size * 1.875) !default; /// Font size of `

    ` elements. /// @type Number $h3-font-size: math.floor($global-font-size * 1.75) !default; /// Font size of `

    ` elements. /// @type Number $h4-font-size: math.floor($global-font-size * 1.5) !default; /// Font size of `

    ` elements. /// @type Number $h5-font-size: math.floor($global-font-size * 1.2) !default; /// Font size of `
    ` elements. /// @type Number $h6-font-size: math.floor($global-font-size * 1.125) !default; /// Margin bottom of `

    ` through `

    ` elements. /// @type Number $header-margin-bottom: 10px !default; /// Margin bottom of paragraphs. /// @type Number $paragraph-margin-bottom: 10px !default; /// Default font size for ``. /// @type Number $small-font-size: 80% !default; /// Color of `` elements when placed inside headers. /// @type Color $small-font-color: $medium-gray !default; /// Default scaling coefficient for text sizes. /// @type Number $font-scale: 1.2 !default; /// Font size of lead paragraphs. /// @type Number $lead-font-size: $global-font-size * 1.25 !default; /// Line height of lead paragraphs. /// @type Number $lead-line-height: 160% !default; /// Padding inside paragraphs. /// @type Number $text-padding: 10px !default; /// Default line height for subheaders. /// @type Number $subheader-lineheight: 1.4 !default; /// Default font color for subheaders. /// @type Color $subheader-color: $dark-gray !default; /// Default font weight for subheaders. /// @type String $subheader-font-weight: $global-font-weight !default; /// Default top margin for subhheaders. /// @type Number $subheader-margin-top: 4px !default; /// Default bottom margin for subheaders. /// @type Number $subheader-margin-bottom: 8px !default; /// Maximum width of a divider. /// @type Number $hr-width: $global-width !default; /// Default border for a divider. /// @type List $hr-border: 1px solid $black !default; /// Default margin for a divider. /// @type Number | List $hr-margin: 20px !default; /// Default alignment for a divider. /// @type String $hr-align: center !default; /// Text decoration for anchors. /// @type Keyword $anchor-text-decoration: none !default; /// Text color of anchors. /// @type Color $anchor-color: $primary-color !default; /// Text color of anchors to visited links. /// @type Color $anchor-color-visited: $anchor-color !default; /// Text color of anchors on hover. /// @type Color $anchor-color-hover: color.adjust($primary-color, $lightness: -10%, $space: hsl) !default; /// Text color of active anchors. /// @type Color $anchor-color-active: $anchor-color-hover !default; /// Default font size for statistic numbers. /// @type Number $stat-font-size: 40px !default; /// Removing the iOS telephone and address styling /// @type Boolean $remove-ios-blue: true !default; /// Create a divider/horizontal rule. /// @param {String} $align - Left, center, or right /// @param {String} $width - Width of divider /// @param {String} $border - Shorthand border style for divider /// @param {String} $margin - Margin above and below divider @mixin h-line($align: $hr-align, $width: $hr-width, $border: $hr-border, $margin: $hr-margin) { @at-root { td.columns & table, td.column & table, th.columns & table, th.column & table { width: auto; } } th { padding-bottom: $margin; @if $align == 'left' { text-align: left; } @else if $align == 'right' { text-align: right; } @else { text-align: center; } } table { display: inline-block; margin: 0; Margin: 0; } th { width: $width; height: 0; padding-top: $margin; clear: both; border-top: 0; border-right: 0; border-bottom: $border; border-left: 0; font-size: 0; line-height: 0; } } body, table.body, h1, h2, h3, h4, h5, h6, p, td, th { color: $global-font-color; font-family: $body-font-family; font-weight: $global-font-weight; padding: 0; margin: 0; Margin: 0; text-align: left; line-height: $global-line-height; } h1, h2, h3, h4, h5, h6 { color: $header-color; word-wrap: normal; font-family: $header-font-family; font-weight: $header-font-weight; margin-bottom: $header-margin-bottom; Margin-bottom: $header-margin-bottom; } h1 { font-size: $h1-font-size; } h2 { font-size: $h2-font-size; } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } body, table.body, p, td, th { font-size: $global-font-size; line-height: $body-line-height; } p { margin-bottom: $paragraph-margin-bottom; Margin-bottom: $paragraph-margin-bottom; &.lead { font-size: $lead-font-size; line-height: $lead-line-height; } &.subheader { margin-top: $subheader-margin-top; margin-bottom: $subheader-margin-bottom; Margin-top: $subheader-margin-top; Margin-bottom: $subheader-margin-bottom; font-weight: $subheader-font-weight; line-height: $subheader-lineheight; color: $subheader-color; } a { // To fix Outlook margin issue #421 margin: default; Margin: default; } } .text-xs { font-size: math.div($global-font-size, $font-scale * $font-scale); } .text-sm { font-size: math.div($global-font-size, $font-scale); } .text-lg { font-size: $global-font-size * $font-scale; } .text-xl { font-size: $global-font-size * ($font-scale * $font-scale); } .text-xxl { font-size: $global-font-size * ($font-scale * $font-scale * $font-scale); } small, .small { font-size: $small-font-size; color: $small-font-color; } a { color: $anchor-color; text-decoration: $anchor-text-decoration; font-family: $body-font-family; font-weight: $global-font-weight; padding: 0; text-align: left; line-height: $global-line-height; &:hover { color: $anchor-color-hover; } &:active { color: $anchor-color-active; } &:visited { color: $anchor-color-visited; } } h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited { color: $anchor-color; } pre { background: $light-gray; margin: 30px 0; Margin: 30px 0; code { color: $medium-gray; span.callout { color: $dark-gray; font-weight: bold; } span.callout-strong { color: $pre-color; font-weight: bold; } } } // Horizontal rule table.hr, table.h-line { @include h-line($hr-align, $hr-width, $hr-border, $hr-margin); } // Use to style a large number to display a statistic .stat { font-size: $stat-font-size; line-height: 1; p + & { margin-top: -16px; Margin-top: -16px; } } // preheader styles span.preheader { display: none !important; visibility: hidden; mso-hide: all !important; font-size: 1px; color: $body-background; // needs to match background color of it's container line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; } // Removing the iOS colors put in for telephone and addresses @if $remove-ios-blue { // Wrapping in a media only screen to have inline-css respect the styling @media only screen { a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } } } ================================================ FILE: scss/components/_visibility.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source //// /// @group visibility //// .hide-for-large { display: none; mso-hide: all; // hide selected elements in Outlook 2007-2013 overflow: hidden; max-height: 0; font-size: 0; width: 0; line-height: 0; @media only screen and (max-width: #{$global-breakpoint}) { display: block !important; width: auto !important; overflow: visible !important; max-height: none !important; font-size: inherit !important; line-height: inherit !important; } } table.body table.container .hide-for-large * { mso-hide: all; // hide selected elements in Outlook 2007-2013 } table.body table.container .hide-for-large, table.body table.container .row.hide-for-large { @media only screen and (max-width: #{$global-breakpoint}) { display: table !important; width: 100% !important; } } table.body table.container .callout-inner.hide-for-large { @media only screen and (max-width: #{$global-breakpoint}) { display: table-cell !important; width: 100% !important; } } table.body table.container .show-for-large { @media only screen and (max-width: #{$global-breakpoint}) { display: none !important; width: 0; mso-hide: all; // hide selected elements in Outlook 2007-2013 overflow: hidden; } } // [todo] add image resets // img { // max-height: 0; // width: 0; // } // in media query // img { // max-height: none !important; // width: auto !important; // } ================================================ FILE: scss/foundation-emails.scss ================================================ // Foundation for Emails // foundation.get.foundation // Licensed under MIT Open Source @import 'util/util', 'global', 'components/normalize', 'grid/grid', 'grid/block-grid', 'components/alignment', 'components/visibility', 'components/typography', 'components/button', 'components/callout', 'components/thumbnail', 'components/menu', 'components/outlook-first', 'components/media-query'; ================================================ FILE: scss/grid/_block-grid.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source @use "sass:math"; //// /// @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: math.div($block-grid-gutter, 2); } } // Sizing classes @for $i from 2 through $block-grid-max { .up-#{$i} td { width: math.floor(math.div($global-width - $i * $block-grid-gutter, $i)) !important; } } ================================================ FILE: scss/grid/_grid.scss ================================================ // Foundation for Emails // get.foundation/ink/ // Licensed under MIT Open Source @use "sass:math"; //// /// @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.first, .columns.first { padding-left: 0 !important; } .column.last, .columns.last { padding-right: 0 !important; } .column, .columns { &:not([class*=large-offset]) { padding-left: 0 !important; padding-right: 0 !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; &.expand, &.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: math.div($global-gutter, 2); padding-right: math.div($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}, > th.large-#{$i} { &:not([class*=large-offset]) { 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); } } .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; } ================================================ FILE: scss/settings/_settings.scss ================================================ @use 'sass:math'; @use 'sass:color'; // 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; $global-gutter-small: $global-gutter; $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: math.floor($global-font-size * 2.125); $h2-font-size: math.floor($global-font-size * 1.875); $h3-font-size: math.floor($global-font-size * 1.75); $h4-font-size: math.floor($global-font-size * 1.5); $h5-font-size: math.floor($global-font-size * 1.2); $h6-font-size: math.floor($global-font-size * 1.125); $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; $hr-align: center; $anchor-text-decoration: none; $anchor-color: $primary-color; $anchor-color-visited: $anchor-color; $anchor-color-hover: color.adjust($primary-color, $lightness: -10%, $space: hsl); $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-padding-small: $callout-padding; $callout-margin-bottom: $global-margin; $callout-border: 1px solid color.adjust($callout-background, $lightness: -20%, $space: hsl); $callout-border-primary: 1px solid color.adjust($primary-color, $lightness: -20%, $space: hsl); $callout-border-secondary: 1px solid color.adjust($secondary-color, $lightness: -20%, $space: hsl); $callout-border-success: 1px solid color.adjust($success-color, $lightness: -20%, $space: hsl); $callout-border-warning: 1px solid color.adjust($warning-color, $lightness: -20%, $space: hsl); $callout-border-alert: 1px solid color.adjust($alert-color, $lightness: -20%, $space: hsl); // 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; ================================================ FILE: scss/util/_util.scss ================================================ // Foundation for Emails // foundation.get.foundation // Licensed under MIT Open Source @use "sass:math"; /// 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 math.div(math.floor(math.percentage(math.div($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 (math.div($containerWidth, $totalColumns) * $columnNumber - $global-gutter); } ================================================ FILE: templates/basic.html ================================================

    BASIC

    Hi, Susan Calvin

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!
    Connect With Us:
    Twitter Facebook Google +
    Contact Info:

    Phone: 408-341-0600

     ================================================ FILE: templates/drip.html ================================================

    Responsive Emails

    15 sections | 567 Min

    Hey you! It's you! Just a heads up, we just added this hot new class that will teach you how to NOT be a lame as a duck. Not the metaphorical lame duck, either, but a real duck that was actually lame, maybe from stepping on a land mine or something. Anyways, Foundation for Emails makes coding HTML emails like calling the Navy SEALS to invade a Pre-school, with pre-schoolers, armed with Crayolas.

         ================================================ FILE: templates/hero.html ================================================

    HERO

    Hi, Elijah Baily

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. Click it!

    Title Ipsum This is a note.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat, harum. Quas nobis id aut, aspernatur, sequi tempora laborum corporis cum debitis, ullam, dolorem dolore quisquam aperiam! Accusantium, ullam, nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus consequuntur commodi, aut sed, quas quam optio accusantium recusandae nesciunt, architecto veritatis. Voluptatibus sunt esse dolor ipsum voluptates, assumenda quisquam.
    Connect With Us:
    Twitter Facebook Google +
    Contact Info:

    Phone: 408-341-0600

    Email: foundation@get.foundation
    Terms Privacy Unsubscribe
    ================================================ FILE: templates/marketing.html ================================================

    Do Something Radical With This App.

    It's Never Been Easier to Do Things.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur pariatur unde magni repudiandae totam, accusamus facere eligendi. Ad nobis eius porro saepe et ab, aliquid, sed mollitia cumque suscipit aperiam.
    Feature One

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.
    Feature Two

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.
    Feature Three

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.

    What Are You Waiting For? Get Started Today.

         ================================================ FILE: templates/newsletter-2.html ================================================

    This is a title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.

    Learn more

    Sub Section Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

    Sub Section Title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

    You received this email because you're signed up to receive updates from us. Click here to unsubscribe.

         ================================================ FILE: templates/newsletter.html ================================================

    The Insider

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa itaque illo doloribus soluta expedita dolores commodi fuga odit.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.

    More Reading:

    Get Involved:

    You received this email because you're signed up to get updates from us. Click here to unsubscribe.

         ================================================ FILE: templates/order.html ================================================

    Thanks for your order.

    Thanks for shopping with us! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad earum ducimus, non, eveniet neque dolores voluptas architecto sed, voluptatibus aut dolorem odio. Cupiditate a recusandae, illum cum voluptatum modi nostrum.

    Payment Method
    Dubloons

    Email Address
    thecapn@pirates.org

    Order ID
    239235983749636

    Shipping Method
    Boat (1–2 weeks)
    Shipping Address
    Captain Price
    123 Maple Rd
    Campbell, CA 95112

    Order Details

    Item#Price
    Ship's Cannon2$100
    Ship's Cannon2$100
    Ship's Cannon2$100
    Subtotal: $600

    What's Next?

    Our carrier raven will prepare your order for delivery. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi necessitatibus itaque debitis laudantium doloribus quasi nostrum distinctio suscipit, magni soluta eius animi voluptatem qui velit eligendi quam praesentium provident culpa?

    Call us at 800.555.1923
    Email us at support@discount.boat

    123 Maple Rd
    Campbell, CA 95112

    ================================================ FILE: templates/password.html ================================================

    Pirate Retirement Services

    Forgot Your Password?

    It happens. Click the link below to reset your password.

    You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, unsubscribe here.

         ================================================ FILE: templates/sidebar-hero.html ================================================

    Sidebar Hero

    Hi, Elijah Baily

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. Click it!

    Hello, Han Fastolfe

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. Click It!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.
    Header

    Sub-header

    Just a Plain Link »

    Just a Plain Link »

    Just a Plain Link »

    Just a Plain Link »

    Just a Plain Link »
    CONNECT WITH US:

    CONTACT INFO:

    Phone: 408-341-0600

    Email: foundation@get.foundation
    Terms Privacy Unsubscribe
    ================================================ FILE: templates/sidebar.html ================================================

    Sidebar

    Hello, Han Fastolfe

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. Click It!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.
    Header

    Sub-header

    Just a Plain Link »

    Just a Plain Link »

    Just a Plain Link »

    Just a Plain Link »

    Just a Plain Link »
    CONNECT WITH US:

    CONTACT INFO:

    Phone: 408-341-0600

    Email: foundation@get.foundation
    Terms Privacy Unsubscribe
    ================================================ FILE: templates/welcome.html ================================================

    Welcome to Kraken Academy

    About Course List Campus Map Contact

    An exciting future of terrorizing sailors awaits you at Kraken Academy.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa vel architecto, perspiciatis eius cum autem quidem, sunt consequuntur, impedit dolor vitae illum nobis sint nihil aliquid? Assumenda, amet, officia.

    krakenacademy.com Facebook Twitter (408)-555-0123
    ================================================ FILE: test/visual/_template.html ================================================ Title
    <%= contents %>
    ================================================ FILE: test/visual/pages/alignment.html ================================================
    Centered Text
    Centered Text
    Centered Text

    Centered Text

    Centered Text

    Right Text

    Right Text

    Left Text

    Left Text


    Center on all clients


    Center on all clients except Outlook 2007, 10, 13

    Center on all (nested columns)

    Center on all (nested columns)

    Center on all (nested columns)

         Centering a column

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.

    Presentations8

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sapiente quis at fuga reprehenderit, velit iure fugiat debitis repellat assumenda perspiciatis? Commodi minus labore sit dolorem reprehenderit eveniet porro asperiores.

         ================================================ FILE: test/visual/pages/anchor.html ================================================

    Testing to see if nasty phone and iOS links can be removed.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptates placeat laudantium, nihil minus commodi incidunt 513-555-5555 magni, accusamus vitae nemo? Sit, minima. Dolorem nisi quaerat voluptatum nobis, numquam saepe hic. 123 locust st santa cruz, ca 95060

         ================================================ FILE: test/visual/pages/attributes.html ================================================ the row should have dir="rtl"

    HEADLINE

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!

    HEADLINE

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!

         the row should have dir="rtl", the columns should have valign and align attributes

    HEADLINE

    SUBHEADLINE

         the items should have target="_blank"
    Item Item Item
    ================================================ FILE: test/visual/pages/block-inky.html ================================================

    one

    two

    one

    two

    three

    one

    two

    three

    four

    one

    two

    three

    four

    five

         ================================================ FILE: test/visual/pages/button-expanded-inky.html ================================================

    Text should be centered

    hover on buttons should change pointer full width of button

    on small, should work the same

    Connect With Us:
    Contact Info:

    Phone: 408-341-0600

    Email: foundation@get.foundation

         Make sure the above container is not greater than 600px or looks awkwardly too wide.     ================================================ FILE: test/visual/pages/button-hollow.html ================================================ ================================================ FILE: test/visual/pages/button-inky.html ================================================ Test Results - Passing 6/28/2016
    Expand small only with center tag
    Expand small only
    Radius and round edges except Outlook 2007, 10, 13
    ================================================ FILE: test/visual/pages/callout-in-grid.html ================================================

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque necessitatibus perferendis doloremque quod quam nisi, unde ipsum qui, nesciunt reiciendis adipisci. Ratione nemo adipisci aspernatur quaerat tempore omnis delectus ipsam!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, doloremque explicabo aperiam vitae autem dolorum id placeat cumque praesentium qui, similique rerum error quibusdam sed officia eligendi obcaecati illum. Quo!

    Not in a callout :(

    I'm in a callout!

    This whole row is in a callout!

    Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

         ================================================ FILE: test/visual/pages/center-width.html ================================================

    Sample text

    Sample text

    ================================================ FILE: test/visual/pages/container-radius.html ================================================

    Container should have a border and border radius except on Outlook 2000, 02, 03, 07, 10, 13

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam veritatis adipisci sint dolorem cupiditate, perferendis. Atque repellendus, perferendis temporibus quibusdam quod nam sint tenetur, ullam ab dicta suscipit at totam?

         ================================================ FILE: test/visual/pages/expander.html ================================================ Test for image that shrinks in Outlook 2000, 2002, 2003. This is caused by the use of the .expander please don't forget me

    What is the deal?

    Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.

         Make sure no expander is created in this table

    What is the deal?

    Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.

         ================================================ FILE: test/visual/pages/fluid-header.html ================================================

    BASIC

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error atque, tempore illo nobis. Iure delectus eveniet ut, eaque molestias necessitatibus dicta, eos quidem ex maxime neque quae, fugiat temporibus amet.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nisi error, labore porro reiciendis est, voluptate quasi exercitationem ad sed, odio, rem quos nostrum beatae consequatur. Velit accusantium, quo alias!

     ================================================ FILE: test/visual/pages/grid-collapse.html ================================================

    Collapsed

    Not Collapsed

         ================================================ FILE: test/visual/pages/grid-inky.html ================================================

    small="12" large="12"

    small="12" large="6"

    small="12" large="6"

    small="12" large="2"

    small="12" large="4"

    small="12" large="6"

    small="12" large="2"

    small="4" large="4"

    small="8" large="6"

    small="12" large="2"

    small="12" large="2"

    small="12" large="2"

    small="6" large="6" left align

         ================================================ FILE: test/visual/pages/grid-nested-inky.html ================================================

    nested 6 columns

    nested 6 columns

    2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf

         ================================================ FILE: test/visual/pages/grid-with-callouts-inky.html ================================================

    Lorem ipsum

    Lorem ipsum

    Small Alert Callout should be 6 columns in large

    Success

    Warning

    Normal 8 and 6

         ================================================ FILE: test/visual/pages/grid.html ================================================
    Thing 1 Thing 2 Thing 3

    This is a collapse column sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.

    One Word

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam impedit odit cum, nemo qui corporis similique placeat aut inventore voluptas debitis ratione deleniti sequi, cumque eos animi perspiciatis sunt.

    One word

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero enim eos ullam pariatur doloremque voluptatibus, modi repellat porro beatae provident dicta quidem rerum dolor nesciunt magnam ipsum illo cupiditate iusto.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet ut placeat vel hic corporis impedit delectus suscipit voluptatibus itaque, obcaecati sapiente sint cupiditate magni fugit ducimus error quae molestiae.

    One word

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet rerum, cumque. Esse dolorem voluptatibus deserunt facere earum explicabo ducimus minus incidunt sunt aliquam animi fugiat, alias debitis quas molestiae quaerat.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea commodi quis quae iusto, blanditiis amet repudiandae ipsam, saepe, minus nulla repellat consectetur impedit. Sequi ratione iste doloribus, ab dignissimos quibusdam.
    ================================================ FILE: test/visual/pages/hr.html ================================================
    ================================================ FILE: test/visual/pages/images.html ================================================ ================================================ FILE: test/visual/pages/index.html ================================================

    Testing 1, 2, 3!!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quo fuga commodi! Iusto maiores officia magni nam fuga, numquam maxime. Reiciendis ad natus exercitationem dolor reprehenderit animi, soluta tempora alias.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sapiente asperiores sit quia accusantium distinctio dolorum officiis libero, quo. Non, officiis, id! Ab cupiditate natus fugit dolorem velit eveniet similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ipsa beatae impedit dicta vero quis quibusdam similique optio expedita asperiores consectetur, obcaecati soluta deleniti facere aliquid fugiat nihil temporibus sed.

         ================================================ FILE: test/visual/pages/inliner-bugs.html ================================================ #417 - 2 sets of angle backets: outer set should not get converted to charachter codes. you should not see 2 angle brackets here:
    #337 - Should not be converted to ampersand apos;
    '
    Inky issue
    mdash; should not be converted to #x2014;
    —
    Inky issue
    quotes should not be converted to quot;
    "
    Inky issue
    ellipsis should not be converted to #x2019;
    …
    Inky issue
    #384 - Should not be converted to ampersand and nbsp
     
    Inky issue
    #305 - Should not be converted to ampersand amp;
    &
    Confirmed Inliner issue
    #326 - spaces should not be removed inside linear gradient values
    Hi

    confirmed on web inliner only (inliner-v2)
    #450 - & #xA0; should not be converted to & nbsp;
     
    Confirmed inliner-v2 issue issue.
    #284 - @font-face should show up in HTML

    confirmed inliner issue     ================================================ FILE: test/visual/pages/layout-break-center.html ================================================

    Name of Product

    $9.99

    $25.99

    Name of Product

    $9.99

    $25.99

    ================================================ FILE: test/visual/pages/list.html ================================================

    Feature Stories

    I realize this is actually a serious technique, but...

    Barb E. Dahl
    21 Ways to Dominate Rat Hearding

    Oren Jellow
    10 Steps To Successfully Outsourcing Your Your Counciousness

    Kandi Apple
    How to Have a Healthier and More Productive Pancake Breakfast

    Les Moore

         ================================================ FILE: test/visual/pages/menu-inky.html ================================================ centered menu
    Item Item Item Item
    vertical centered menu
    Item Item Item Item
    vertical on small centered menu
    Item 1 Item 2 Item 3
    left aligned menu Item Item Item Item     ================================================ FILE: test/visual/pages/offset-inky.html ================================================

    Offset columns should correctly align with the gutters of standard columns.

    1 of 12

    11 of 12

    Offset 1 of 12

    10 of 12

    2 of 12

    10 of 12

    Offset 2 of 12

    9 of 12

         ================================================ FILE: test/visual/pages/outlook-image-width.html ================================================

    This is a title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.

    Learn more

         ================================================ FILE: test/visual/pages/spacer.html ================================================

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error atque, tempore illo nobis. Iure delectus eveniet ut, eaque molestias necessitatibus dicta, eos quidem ex maxime neque quae, fugiat temporibus amet.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nisi error, labore porro reiciendis est, voluptate quasi exercitationem ad sed, odio, rem quos nostrum beatae consequatur. Velit accusantium, quo alias!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error atque, tempore illo nobis. Iure delectus eveniet ut, eaque molestias necessitatibus dicta, eos quidem ex maxime neque quae, fugiat temporibus amet.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nisi error, labore porro reiciendis est, voluptate quasi exercitationem ad sed, odio, rem quos nostrum beatae consequatur. Velit accusantium, quo alias!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error atque, tempore illo nobis. Iure delectus eveniet ut, eaque molestias necessitatibus dicta, eos quidem ex maxime neque quae, fugiat temporibus amet.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nisi error, labore porro reiciendis est, voluptate quasi exercitationem ad sed, odio, rem quos nostrum beatae consequatur. Velit accusantium, quo alias!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error atque, tempore illo nobis. Iure delectus eveniet ut, eaque molestias necessitatibus dicta, eos quidem ex maxime neque quae, fugiat temporibus amet.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nisi error, labore porro reiciendis est, voluptate quasi exercitationem ad sed, odio, rem quos nostrum beatae consequatur. Velit accusantium, quo alias!

     https://litmus.com/checklist/emails/public/e6d9076 ================================================ FILE: test/visual/pages/spacing.html ================================================

    These Elements Should All Have Spacing.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque excepturi aliquid suscipit esse cum laborum inventore cumque, quas hic eveniet unde doloribus. Ullam maiores, culpa necessitatibus exercitationem perspiciatis nesciunt nisi!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam voluptas possimus reprehenderit aut fugit soluta eum nihil. Deserunt eaque, fuga qui laborum repellat rerum laudantium ad, et blanditiis perferendis ducimus?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facere non quam quibusdam! Tenetur quo corporis, accusamus eum nulla amet deserunt consequuntur dolores inventore ratione modi voluptates nemo vero numquam.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam voluptas possimus reprehenderit aut fugit soluta eum nihil. Deserunt eaque, fuga qui laborum repellat rerum laudantium ad, et blanditiis perferendis ducimus?

         ================================================ FILE: test/visual/pages/thumbnail.html ================================================
    watch out for smacing issues on the full width thumbnails. The right side spacing should match left.     ================================================ FILE: test/visual/pages/type.html ================================================

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sapiente asperiores sit quia accusantium distinctio dolorum officiis libero, quo. Non, officiis, id! Ab cupiditate natus fugit dolorem velit eveniet similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ipsa beatae impedit dicta vero quis quibusdam similique optio expedita asperiores consectetur, obcaecati soluta deleniti facere aliquid fugiat nihil temporibus sed.

         ================================================ FILE: test/visual/pages/visibility.html ================================================

    furry friends

         image of a cute kitty

    name

    age

     image of a cute kitty

    name

    age

     image of a cute kitty

    show large

    age

         image of a cute kitty

    name

    age

     image of a cute kitty

    name

    age

     image of a cute kitty

    show large

    age

         image of a cute kitty

    name

    age

     image of a cute kitty

    name

    age

     image of a cute kitty

    show large

    age

         image of a cute kitty

    show small

    age

     image of a cute kitty

    show small

    age

    Show on all

    Calling all cars

    Calling all cars

    Calling all cars

    Hide for Large

    Calling all cars

    Calling all cars

    Calling all cars

    Show for Large

    Calling all cars

    Calling all cars

    Calling all cars

    This callout will only appear on small screens.

    This callout will only appear on large screens.

    Show for small

    Show for large

    Email: foundation@get.foundation