├── .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
└── foundation-emails.min.css
├── docs
├── assets
│ ├── img
│ │ ├── campaign-monitor-css-guide.jpg
│ │ ├── cm-email-client-stats.png
│ │ ├── icons
│ │ │ ├── footer-expo-retina.png
│ │ │ ├── footer-expo.png
│ │ │ ├── footer-foundation-retina.png
│ │ │ ├── footer-foundation.png
│ │ │ ├── footer-icons-retina.png
│ │ │ ├── footer-icons.png
│ │ │ ├── footer-products-retina.png
│ │ │ ├── footer-products.png
│ │ │ ├── footer-studios-retina.png
│ │ │ ├── footer-studios.png
│ │ │ ├── footer-top-icons-retina.png
│ │ │ ├── footer-top-icons.png
│ │ │ ├── footer-university.png
│ │ │ ├── foundation-favicon.ico
│ │ │ ├── social-retina.png
│ │ │ ├── social.png
│ │ │ └── youtube.png
│ │ ├── inky-class.png
│ │ ├── inky_gem_diagram.png
│ │ └── logos
│ │ │ └── sass-logo.svg
│ ├── 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.rb
│ └── foundation_emails
│ │ ├── engine.rb
│ │ └── version.rb
├── spec
│ ├── foundation
│ │ └── emails_spec.rb
│ └── spec_helper.rb
└── vendor
│ └── assets
│ └── stylesheets
│ ├── _foundation-emails.scss
│ └── foundation-emails
├── 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
│ ├── assets
│ └── 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
└── yarn.lock
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # Browsers that we support
2 | last 2 versions
3 | ie >= 9
4 | ios >= 7
5 | android >= 4.4
6 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!-- Please only file bugs with Foundation on GitHub. If you've got a more general question about how to use Foundation, we can help you on the Foundation Forum: https://get.foundation/forum -->
2 |
3 | **How can we reproduce this bug?**
4 |
5 | Write out the HTML (or Inky code) that causes the issue.
6 |
7 | **What did you expect to happen?**
8 |
9 | **What happened instead?**
10 |
11 | **What email clients does this happen in?**
12 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | Before submitting a pull request, make sure it's targeting the right branch:
2 |
3 | - For fixes to Ink 1.0, use `master`.
4 | - For fixes to Foundation for Emails 2, use `v2.0`.
5 |
6 | Happy coding! :)
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | node_modules/
3 | .sass-cache/
4 | npm-debug.log
5 | temp/
6 | _build/
7 | inky
8 | *.swp
9 | .templates
10 | .download
11 | foundation-emails.zip
12 | bower_components
13 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | _build
2 | docs
3 | gem
4 | inky
5 | testing
6 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 10.22.0
2 |
--------------------------------------------------------------------------------
/.sass-lint.yml:
--------------------------------------------------------------------------------
1 | files:
2 | include: 'scss/**/*.scss'
3 | options:
4 | formatter: stylish
5 | merge-default-rules: false
6 | rules:
7 | border-zero:
8 | - 1
9 | - convention: zero
10 | brace-style:
11 | - 1
12 | - allow-single-line: false
13 | class-name-format:
14 | - 1
15 | - convention: '([a-z0-9]+-?)+'
16 | clean-import-paths:
17 | - 1
18 | - filename-extension: false
19 | leading-underscore: false
20 | empty-line-between-blocks:
21 | - 1
22 | - ignore-single-line-rulesets: true
23 | extends-before-declarations: 1
24 | extends-before-mixins: 1
25 | final-newline:
26 | - 1
27 | - include: true
28 | force-attribute-nesting: 1
29 | force-element-nesting: 1
30 | force-pseudo-nesting: 1
31 | function-name-format:
32 | - 1
33 | - allow-leading-underscore: true
34 | convention: hyphenatedlowercase
35 | hex-length:
36 | - 1
37 | - style: short
38 | hex-notation:
39 | - 1
40 | - style: lowercase
41 | id-name-format:
42 | - 1
43 | - convention: '([a-z0-9]+-?)+'
44 | indentation:
45 | - 1
46 | - size: 2
47 | leading-zero:
48 | - 1
49 | - include: true
50 | mixin-name-format:
51 | - 1
52 | - allow-leading-underscore: true
53 | convention: hyphenatedlowercase
54 | mixins-before-declarations: 1
55 | nesting-depth:
56 | - 1
57 | - max-depth: 3
58 | no-color-keyword: 1
59 | no-color-literals: 1
60 | no-css-comments: 0
61 | no-debug: 1
62 | no-duplicate-properties: 1
63 | no-empty-rulesets: 1
64 | no-ids: 1
65 | no-important: 0
66 | no-invalid-hex: 1
67 | no-mergeable-selectors: 1
68 | no-misspelled-properties:
69 | - 1
70 | - extra-properties: []
71 | no-qualifying-elements:
72 | - 0
73 | - allow-element-with-attribute: false
74 | allow-element-with-class: false
75 | allow-element-with-id: false
76 | no-trailing-zero: 1
77 | no-url-protocols: 1
78 | placeholder-in-extend: 1
79 | placeholder-name-format:
80 | - 1
81 | - convention: '([a-z0-9]+-?)+'
82 | property-sort-order:
83 | - 0
84 | - ignore-custom-properties: false
85 | quotes:
86 | - 1
87 | - style: single
88 | shorthand-values: 1
89 | single-line-per-selector: 0
90 | space-after-bang:
91 | - 1
92 | - include: false
93 | space-after-colon:
94 | - 1
95 | - include: true
96 | space-after-comma: 1
97 | space-before-bang:
98 | - 1
99 | - include: true
100 | space-before-brace:
101 | - 1
102 | - include: true
103 | space-before-colon: 1
104 | space-between-parens:
105 | - 1
106 | - include: false
107 | trailing-semicolon: 1
108 | url-quotes: 1
109 | variable-for-property:
110 | - 0
111 | - properties: []
112 | variable-name-format:
113 | - 1
114 | - allow-leading-underscore: true
115 | convention: hyphenatedlowercase
116 | zero-unit: 1
117 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Foundation
2 |
3 | ZURB loves its community! We always want to hear from our users, whether they're reporting bugs, suggesting new features, or even adding them themselves.
4 |
5 | ## Reporting Bugs
6 |
7 | [Open a new issue](https://github.com/zurb/foundation-emails/issues/new) to report a problem you're having with Foundation for Apps. When writing your issue, keep these things in mind:
8 |
9 | - **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.
10 | - **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.
11 | - **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.
12 |
13 | ## Editing the Documentation
14 |
15 | The documentation is compiled by a tool called [Supercollider](https://github.com/gakimball/supercollider). Each page is compiled from 1–2 sources:
16 |
17 | - A Markdown file under `docs/pages/`.
18 | - If it's a Sass component, the relevant Sass file inside `scss/` is scanned for special [SassDoc](http://sassdoc.com/) comments.
19 |
20 | Each page is rendered in one big [Handlebars template](https://github.com/zurb/foundation-docs/blob/master/templates/component.html) that takes in all of the above data.
21 |
22 | Much of the guts of the documentation are stored in an external codebase called [foundation-docs](https://github.com/zurb/foundation-docs). This is code that's shared between the documentation for all three Foundation frameworks, including:
23 |
24 | - CSS specific to the documentation
25 | - The Handlebars template used to build pages
26 | - A series of Handlebars helpers for the template
27 | - A custom Markdown parser used when parsing pages
28 | - A script that generates the search results for documentation pages
29 |
30 | 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.
31 |
32 | ## Submitting Pull Requests
33 |
34 | 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.
35 |
36 | - **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:
37 | - Ink 1.0 changes: `v1.0`
38 | - Foundation for Emails 2.0+ bug fixes: `develop`
39 | - New features should be pointed to: `v2.3`
40 | - **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.
41 |
42 | ## Help Wanted
43 |
44 | Want something to work on? Let us guide you in the right direction.
45 |
46 | - Browse the [Help Wanted](https://github.com/zurb/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!
47 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2017 ZURB, inc.
2 |
3 | MIT License
4 |
5 | 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:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | 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.
10 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "foundation-emails",
3 | "version": "2.2.1",
4 | "homepage": "https://get.foundation/emails",
5 | "authors": [
6 | "ZURB <foundation@zurb.com>"
7 | ],
8 | "description": "A framework for designing responsive emails by ZURB.",
9 | "license": "MIT",
10 | "ignore": [
11 | "**/.*",
12 | "node_modules",
13 | "bower_components",
14 | "gem",
15 | "test",
16 | "tests"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/docs/assets/img/campaign-monitor-css-guide.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/campaign-monitor-css-guide.jpg
--------------------------------------------------------------------------------
/docs/assets/img/cm-email-client-stats.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/cm-email-client-stats.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-expo-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-expo-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-expo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-expo.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-foundation-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-foundation-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-foundation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-foundation.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-icons-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-icons-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-icons.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-products-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-products-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-products.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-products.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-studios-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-studios-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-studios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-studios.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-top-icons-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-top-icons-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-top-icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-top-icons.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/footer-university.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/footer-university.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/foundation-favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/foundation-favicon.ico
--------------------------------------------------------------------------------
/docs/assets/img/icons/social-retina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/social-retina.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/social.png
--------------------------------------------------------------------------------
/docs/assets/img/icons/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/icons/youtube.png
--------------------------------------------------------------------------------
/docs/assets/img/inky-class.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/inky-class.png
--------------------------------------------------------------------------------
/docs/assets/img/inky_gem_diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/docs/assets/img/inky_gem_diagram.png
--------------------------------------------------------------------------------
/docs/assets/img/logos/sass-logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="512" height="384" viewBox="0 0 512 384"><path fill="#CF649A" d="M440.6 220.6c-17.9.1-33.4 4.4-46.4 10.8-4.8-9.5-9.6-17.8-10.4-24-.9-7.2-2-11.6-.9-20.2s6.1-20.8 6.1-21.8c-.1-.9-1.1-5.3-11.4-5.4-10.3-.1-19.2 2-20.2 4.7s-3 8.9-4.3 15.3c-1.8 9.4-20.6 42.7-31.3 60.2-3.5-6.8-6.5-12.8-7.1-17.6-.9-7.2-2-11.6-.9-20.2s6.1-20.8 6.1-21.8c-.1-.9-1.1-5.3-11.4-5.4-10.3-.1-19.2 2-20.2 4.7s-2.1 9.1-4.3 15.3c-2.1 6.2-27.1 61.8-33.6 76.3-3.3 7.4-6.2 13.3-8.3 17.3s-.1.3-.3.7c-1.8 3.4-2.8 5.3-2.8 5.3v.1c-1.4 2.5-2.9 4.9-3.6 4.9-.5 0-1.5-6.7.2-15.9 3.7-19.3 12.7-49.4 12.6-50.5 0-.5 1.7-5.8-5.8-8.5-7.3-2.7-9.9 1.8-10.5 1.8-.6 0-1.1 1.6-1.1 1.6s8.1-33.9-15.5-33.9c-14.8 0-35.2 16.1-45.3 30.8-6.4 3.5-20 10.9-34.4 18.8-5.5 3-11.2 6.2-16.6 9.1l-1.1-1.2c-28.6-30.5-81.5-52.1-79.3-93.1.8-14.9 6-54.2 101.6-101.8 78.3-39 141-28.3 151.9-4.5 15.5 34-33.5 97.2-114.9 106.3-31 3.5-47.3-8.5-51.4-13-4.3-4.7-4.9-4.9-6.5-4-2.6 1.4-1 5.6 0 8.1 2.4 6.3 12.4 17.5 29.4 23.1 14.9 4.9 51.3 7.6 95.3-9.4 49.3-19.1 87.8-72.1 76.5-116.4-11.5-45.1-86.3-59.9-157-34.8-42.1 15-87.7 38.4-120.5 69.1-39 36.4-45.2 68.2-42.6 81.4 9.1 47.1 74 77.8 100 100.5-1.3.7-2.5 1.4-3.6 2-13 6.4-62.5 32.3-74.9 59.7-14 31 2.2 53.3 13 56.3 33.4 9.3 67.6-7.4 86.1-34.9 18.4-27.5 16.2-63.2 7.7-79.5l-.3-.6 10.2-6c6.6-3.9 13.1-7.5 18.8-10.6-3.2 8.7-5.5 19-6.7 34-1.4 17.6 5.8 40.4 15.3 49.4 4.2 3.9 9.2 4 12.3 4 11 0 16-9.1 21.5-20 6.8-13.3 12.8-28.7 12.8-28.7s-7.5 41.7 13 41.7c7.5 0 15-9.7 18.4-14.7v.1s.2-.3.6-1c.8-1.2 1.2-1.9 1.2-1.9v-.2c3-5.2 9.7-17.1 19.7-36.8 12.9-25.4 25.3-57.2 25.3-57.2s1.2 7.8 4.9 20.6c2.2 7.6 7 15.9 10.7 24-3 4.2-4.8 6.6-4.8 6.6l.1.1c-2.4 3.2-5.1 6.6-7.9 10-10.2 12.2-22.4 26.1-24 30.1-1.9 4.7-1.5 8.2 2.2 11 2.7 2 7.5 2.4 12.6 2 9.2-.6 15.6-2.9 18.8-4.3 5-1.8 10.7-4.5 16.2-8.5 10-7.4 16.1-17.9 15.5-31.9-.3-7.7-2.8-15.3-5.9-22.5.9-1.3 1.8-2.6 2.7-4 15.8-23.1 28-48.5 28-48.5s1.2 7.8 4.9 20.6c1.9 6.5 5.7 13.6 9.1 20.6-14.8 12.1-24.1 26.1-27.3 35.3-5.9 17-1.3 24.7 7.4 26.5 3.9.8 9.5-1 13.7-2.8 5.2-1.7 11.5-4.6 17.3-8.9 10-7.4 19.6-17.7 19.1-31.6-.3-6.4-2-12.7-4.3-18.7 12.6-5.2 28.9-8.2 49.6-5.7 44.5 5.2 53.3 33 51.6 44.6-1.7 11.6-11 18-14.1 20-3.1 1.9-4.1 2.6-3.8 4 .4 2.1 1.8 2 4.5 1.6 3.7-.6 23.4-9.5 24.2-30.9 1.2-27.5-24.9-57.5-71.2-57.2zm-343.2 115.7c-14.7 16.1-35.4 22.2-44.2 17-9.5-5.5-5.8-29.2 12.3-46.3 11-10.4 25.3-20 34.7-25.9 2.1-1.3 5.3-3.2 9.1-5.5.6-.4 1-.6 1-.6.7-.4 1.5-.9 2.3-1.4 6.7 24.4.3 45.8-15.2 62.7zm107.5-73.1c-5.1 12.5-15.9 44.6-22.4 42.8-5.6-1.5-9-25.8-1.1-49.8 4-12.1 12.5-26.5 17.5-32.1 8.1-9 16.9-12 19.1-8.3 2.6 4.8-9.9 39.6-13.1 47.4zm88.7 42.4c-2.2 1.1-4.2 1.9-5.1 1.3-.7-.4.9-1.9.9-1.9s11.1-11.9 15.5-17.4c2.5-3.2 5.5-6.9 8.7-11.1v1.2c0 14.4-13.8 24-20 27.9zm68.4-15.6c-1.6-1.2-1.4-4.9 4-16.5 2.1-4.6 6.9-12.3 15.2-19.6 1 3 1.6 5.9 1.5 8.6-.1 18-12.9 24.7-20.7 27.5z"/></svg>
--------------------------------------------------------------------------------
/docs/assets/js/codeSample.js:
--------------------------------------------------------------------------------
1 | !function() {
2 |
3 | var $currentText = $('[data-docs-code-current]');
4 | var $toggleButtons = $('[data-docs-code-toggle]');
5 |
6 | $toggleButtons.click(function(e) {
7 | e.preventDefault();
8 | $('body').toggleClass('is-inky-enabled');
9 |
10 | if ($('body').hasClass('is-inky-enabled')) {
11 | $currentText.text('Inky');
12 | $toggleButtons.text('Switch to HTML');
13 | }
14 | else {
15 | $currentText.text('HTML');
16 | $toggleButtons.text('Switch to Inky');
17 | }
18 | });
19 |
20 | }();
21 |
--------------------------------------------------------------------------------
/docs/assets/js/docs.ad.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | // TODO: Add alternate between advanced and intro
3 | var topic = $('h1.docs-page-title').text();
4 | var header = 'Master ' + topic;
5 | var body = 'Get up to speed FAST, learn straight from the experts who built Foundation for Emails.';
6 | var link = 'https://zurb.com/university/responsive-emails-foundation?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Struggling&utm_campaign=Docs%20To%20Emails';
7 | var cta = 'Learn More';
8 |
9 | var html = '<div class="ad-unit"><h3 class="ad-unit-title">' + header + '</h3>' +
10 | '<p class="ad-unit-text">' + body + '</p>' +
11 | '<a class="button ad-unit-button" href="' + link+ '">' +
12 | cta + '</a></div>';
13 | $('#TOCAdUnit').html(html);
14 |
15 | });
16 |
--------------------------------------------------------------------------------
/docs/assets/js/docs.js:
--------------------------------------------------------------------------------
1 | $(document).foundation();
2 |
--------------------------------------------------------------------------------
/docs/assets/scss/_code.scss:
--------------------------------------------------------------------------------
1 | .docs-code-html,
2 | .docs-code-inky {
3 | code {
4 | max-height: 300px;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/docs/assets/scss/_compatibility.scss:
--------------------------------------------------------------------------------
1 | // Compatability Table
2 | // -------------------
3 | // A styled table used on the compatability page to show which browsers the framework works with.
4 |
5 | $primary: #002b36;
6 | $secondary: #efefef;
7 | $alert: #cf2a0e;
8 | $warning: #ffae00;
9 | $success: #43AC6A;
10 | $gutter: 40px;
11 | $rad: 5px;
12 |
13 | @mixin font-size($sizeValue){
14 | font-size: $sizeValue + px;
15 | font-size: ($sizeValue / 10) + rem;
16 | }
17 |
18 | @mixin -breakpoint($point) {
19 | @if $point == smallmobile {
20 | @media (max-width: 200px) { @content; }
21 | }
22 | @if $point == mobile {
23 | @media (max-width: 640px) { @content; }
24 | }
25 | @if $point == tablet {
26 | @media (max-width: 1000px) { @content; }
27 | }
28 | @if $point == smallscreen {
29 | @media (max-width: 1120px) { @content; }
30 | }
31 | }
32 |
33 | .comparison-table {
34 | display: block;
35 | width: 100%;
36 | border-collapse: separate;
37 | thead tr {
38 | color: $primary;
39 | font-weight: bold;
40 | text-transform: uppercase;
41 | td { color: #666 !important; }
42 | td { padding-bottom: 10px; }
43 | td { border: none !important; }
44 | }
45 | tr {
46 | width: 100%;
47 | td {
48 | border-right: 1px solid #ddd;
49 | }
50 | &:first-child {
51 | td { border-top: 1px solid #ddd; }
52 | td:first-child {
53 |
54 | }
55 | td:last-child {
56 |
57 | }
58 | }
59 | &:last-child {
60 | td { border-bottom: 1px solid #ddd; }
61 | td:first-child {
62 |
63 | }
64 | td:last-child {
65 |
66 | }
67 | }
68 | td:first-child {
69 | width: 25%;
70 | padding: 10px;
71 | color: $primary;
72 | font-weight: bold;
73 | border-left: 1px solid #ddd;
74 | }
75 | td.marker.yes {
76 | width: 10%;
77 | text-align: center;
78 | vertical-align: middle;
79 | color: $success;
80 | font-weight: bold;
81 | }
82 | td.marker.mostly {
83 | width: 10%;
84 | text-align: center;
85 | vertical-align: middle;
86 | color: $warning;
87 | font-weight: bold;
88 | }
89 | td.marker.no {
90 | width: 10%;
91 | text-align: center;
92 | vertical-align: middle;
93 | color: $alert-color;
94 | font-size: 1.3rem;
95 | font-weight: bold;
96 | }
97 | }
98 | tr:nth-child(even) {
99 | background: $secondary;
100 | }
101 | @include -breakpoint(smallmobile) {
102 | td, tr td, tr td.marker, tr td:first-child, tr td:first-child + td {
103 | position: relative;
104 | display: block;
105 | width: 100%;
106 | border-top: none;
107 | border-bottom: none;
108 | border-left: 1px solid #ddd;
109 | }
110 | tr:first-child td:first-child {
111 |
112 | }
113 | tr:first-child td:last-child {
114 | border-top-right-radius: 0;
115 | }
116 | tr:last-child td:first-child {
117 | border-bottom-left-radius: 0;
118 | }
119 | tr:last-child td:last-child {
120 | border-bottom: 1px solid #ddd;
121 | }
122 | tr td:first-child {
123 | border-top: 1px solid #ddd;
124 | & + td {
125 | padding: 0 10px 10px;
126 | }
127 | }
128 | tr td.marker {
129 | padding: 10px;
130 | font-weight: bold;
131 | &:before {
132 | content: "Grid: ";
133 | }
134 | & + td.marker:before {
135 | content: "Layout/UI: ";
136 | }
137 | & + td.marker + td.marker:before {
138 | content: "JS: ";
139 | }
140 | }
141 | thead tr td.marker {
142 | display: none;
143 | }
144 | }
145 | }
146 |
147 | td.divider {
148 | background: $dark-gray;
149 |
150 | &:first-child {
151 | border-right: $dark-gray;
152 | }
153 |
154 | &:last-child {
155 | border-left: $dark-gray;
156 | }
157 | }
--------------------------------------------------------------------------------
/docs/assets/scss/_course-callout.scss:
--------------------------------------------------------------------------------
1 | .docs-course-callout {
2 | display: block;
3 | background: #A183D3;
4 | color: $white;
5 | padding: 1rem;
6 | margin-top: 1rem;
7 |
8 | &:hover,
9 | &:focus {
10 | color: $white;
11 | }
12 |
13 | .button {
14 | background: $white;
15 | color: #85769e;
16 | font-weight: bold;
17 | border-radius: 2px;
18 | box-shadow: 0 2px 0 #999;
19 | margin-bottom: 0;
20 | }
21 |
22 | p {
23 | font-size: rem-calc(14);
24 | line-height: 21px;
25 | }
26 | }
27 |
28 | .docs-course-callout-subtitle {
29 | text-transform: uppercase;
30 | font-weight: bold;
31 | letter-spacing: 1px;
32 | font-size: rem-calc(12);
33 | display: block;
34 | }
35 |
36 | .docs-course-callout-title {
37 | font-weight: bold;
38 | margin-bottom: 0.75rem;
39 | display: block;
40 | }
41 |
42 | .footer-course-upsell {
43 | overflow: hidden;
44 | img {
45 | margin-top: 35px;
46 | animation: ad-unit-hover 8s infinite ease;
47 | }
48 | border-top: 1px solid #cacaca;
49 | background: #F5F5F5;
50 | padding-top: 10px;
51 | margin-top: 25px;
52 | .emails-course-title {
53 | font-size: 30px;
54 | margin-bottom: 1rem;
55 | margin-top: 1rem;
56 | span {
57 | text-transform: uppercase;
58 | font-size: rem-calc(11px);
59 | font-weight: bold;
60 | display: block;
61 | margin-bottom: -6px;
62 | letter-spacing: 3px;
63 | color: rgb(175, 175, 175);
64 | }
65 | }
66 |
67 | p {
68 | color: rgb(125, 125, 125);
69 | font-size: 14px;
70 | }
71 | }
72 |
73 | @keyframes ad-unit-hover {
74 | 0% {
75 | transform: translateY(30px);
76 | }
77 |
78 | 55% {
79 | transform: translateY(0);
80 | }
81 |
82 | 100% {
83 | transform: translateY(30px);
84 | }
85 |
86 | }
87 |
--------------------------------------------------------------------------------
/docs/assets/scss/docs.scss:
--------------------------------------------------------------------------------
1 | $topbar-background: #2c3840;
2 | $topbar-hover-color: lighten($topbar-background, 10%);// The CSS for the Foundation docs is stored in an external codebase:
3 | // https://github.com/zurb/foundation-docs
4 | //
5 | // You can test Sass changes locally by running these commands:
6 | // git clone https://github.com/zurb/foundation-docs
7 | // npm link ./foundation-docs
8 | //
9 | // Feel free to submit pull requests to foundation-docs like you would Foundation itself!
10 |
11 | $foundation-palette: (
12 | primary: #7465be,
13 | secondary: #777,
14 | success: #3adb76,
15 | warning: #ffae00,
16 | alert: #ec5840,
17 | );
18 |
19 | @import 'node_modules/foundation-sites/scss/foundation';
20 | @import 'node_modules/motion-ui/src/motion-ui';
21 |
22 | @include foundation-everything;
23 | @include motion-ui-transitions;
24 |
25 | @import 'node_modules/foundation-docs/scss/foundation-docs';
26 |
27 | @import 'code';
28 | @import 'compatibility';
29 | @import 'course-callout';
30 |
31 | $topbar-background: #2c3840;
32 | $topbar-hover-color: lighten($topbar-background, 10%);
33 |
34 | .dropdown.menu > li.is-dropdown-submenu-parent > a {
35 | padding-right: 1rem;
36 | }
37 |
38 | .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
39 | display: none;
40 | }
41 |
42 | .docs-newsletter {
43 | background: #2a2f58;
44 | }
45 |
46 | .zurb-footer-top {
47 | background: #1C1F3A !important;
48 | }
49 |
50 | .callout.secondary.tip {
51 | border: none;
52 | border-left: 5px solid $primary-color;
53 | }
54 |
55 | .marketing-topbar,
56 | .title-bar {
57 | background: $topbar-background;
58 |
59 | .dropdown.menu a {
60 | background: $topbar-background;
61 | }
62 |
63 | .title {
64 | background: $topbar-background;
65 | }
66 | }
67 |
68 | .dropdown.menu a.button {
69 | background: $primary-color;
70 |
71 | &:hover {
72 | background: darken($primary-color, 10%);
73 | }
74 | }
75 |
76 | .is-dropdown-submenu-item a {
77 | &:hover {
78 | background: $topbar-hover-color;
79 | }
80 | }
81 |
82 | .marketing-topbar .menu a:hover:not(.button),
83 | .marketing-topbar .menu a:focus {
84 | background: $topbar-hover-color;
85 | }
86 |
87 | .marketing-topbar .menu .topbar-title a {
88 | &:hover,
89 | &:focus {
90 | background: $topbar-background;
91 | }
92 | }
93 |
94 | .docs-newsletter {
95 | padding: 1rem 0;
96 | }
97 |
98 | .footer-signup-form {
99 | padding-top: 1rem;
100 | padding-bottom: 1rem;
101 | }
102 | .zurb-footer-bottom {
103 | background: $topbar-background;
104 | }
105 |
106 | .ad-unit {
107 | max-width: 250px;
108 | padding: .5rem;
109 | background: #2a2f58;
110 | border-radius: 4px;
111 | }
112 |
113 | .ad-unit-title {
114 | padding: 10px 16px 5px 16px;
115 | text-align: center;
116 | color: #fff;
117 | font-size: 23px;
118 | font-weight: bold;
119 | font-family: 'proxima nova', helvetica, arial;
120 | animation: ad-title-anim 1.5s 1 ease;
121 | animation-fill-mode: backwards;
122 | }
123 |
124 | .ad-unit-text {
125 | color: #fff;
126 | font-size: 13px;
127 | text-align: center;
128 | padding: 0 15px 10px 15px;
129 | animation: ad-text-anim 1s 1 ease;
130 | animation-delay: 1s;
131 | animation-fill-mode: backwards;
132 | }
133 |
134 | .ad-unit-button {
135 | margin-bottom: 0;
136 | width: 100%;
137 | box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
138 | border: 0;
139 | border-radius: 3px;
140 | font-weight: bold;
141 | }
142 |
143 |
144 | @keyframes ad-title-anim {
145 | 0% { opacity: 0; transform: translateY(50%); }
146 | 100% { opacity: 1; }
147 | }
148 |
149 | @keyframes ad-text-anim {
150 | 0% { opacity: 0; transform: scale(.7, .7); }
151 | 100% { opacity: 1; transform: scale(1, 1);}
152 | }
153 |
154 | .youtube {
155 | background: url("../img/icons/youtube.png") no-repeat center 0;
156 | }
157 |
--------------------------------------------------------------------------------
/docs/layouts/default.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
3 | <html class="no-js" lang="en" dir="ltr">
4 | <head>
5 | <meta charset="utf-8">
6 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 | <meta name="description" content="{{description}}">
9 | <link rel="icon" href="assets/img/icons/foundation-favicon.ico" type="image/x-icon">
10 | <title>Foundation for Emails 2 Docs{{#unlesspage 'index'}} | {{title}}{{/unlesspage}}</title>
11 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css">
12 | <link href="assets/css/docs.css" rel="stylesheet" />
13 | <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
14 | <!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
15 | </head>
16 | <body class="docs-emails">
17 |
18 | <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
19 |
20 | {{> off-canvas}}
21 |
22 | <div class="off-canvas-content" data-off-canvas-content>
23 | <!-- Info Banner For Announcements or Links -->
24 | <!-- <a href="https://zurb.com/article/1416/foundation-6-is-here" id="notice">
25 | <div class="info">
26 | <h5>Foundation 6 is here!</h5>
27 | </div>
28 | </a> -->
29 |
30 | {{> navigation}}
31 | {{> mobile-navigation}}
32 |
33 | <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
34 |
35 | <div class="expanded row">
36 | <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
37 | <!-- body include must be left aligned for proper indentation of docs code examples -->
38 | {{> body}}
39 | </div>
40 | <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
41 | {{> component-list}}
42 | </div>
43 | </div>
44 |
45 | {{> footer}}
46 | </div>
47 |
48 | </div></div>
49 |
50 | <script>
51 | var _gaq = _gaq || [];
52 | _gaq.push(
53 | ['_setAccount', 'UA-2195009-2'],
54 | ['_trackPageview'],
55 | ['b._setAccount', 'UA-2195009-27'],
56 | ['c._setAccount', 'UA-2195009-47'],
57 | ['b._trackPageview']
58 | );
59 | (function() {
60 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
61 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
62 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
63 | })();
64 | </script>
65 |
66 | <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
67 | <script src="https://cdn.jsdelivr.net/what-input/1.2.3/what-input.min.js"></script>
68 | <script src="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.js"></script>
69 | <script src="https://cdn.jsdelivr.net/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
70 | <script src="assets/js/docs.js"></script>
71 | </body>
72 | </html>
73 |
--------------------------------------------------------------------------------
/docs/pages/button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button
3 | 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.
4 | sass: scss/components/_button.scss
5 | ---
6 |
7 | 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 `<table>`. Inside of the inner table, put an `<a>` with an `href` attribute containing your link.
8 |
9 | In Inky HTML, the `<button>` tag creates all of this markup for you.
10 |
11 | ```inky_example
12 | <button href="#">Button</button>
13 | ```
14 |
15 | <div class="callout primary">
16 | - It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br>
17 | - Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
18 | </div>
19 |
20 | ---
21 |
22 | ## Sizing
23 |
24 | 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).
25 |
26 | Buttons can be made larger or smaller by adding the class `.tiny`, `.small`, or `.large` to a button's outer `<table>`.
27 |
28 | In Inky HTML, add the same class to the `<button>` tag.
29 |
30 | ```inky_example
31 | <button href="#" class="tiny">Tiny Button</button>
32 | <button href="#" class="small">Small Button</button>
33 | <button href="#">Default Button</button>
34 | <button href="#" class="large">Large Button</button>
35 | ```
36 |
37 | Don't forget the `href=""` ;)
38 |
39 | ---
40 |
41 | ## Expanded
42 |
43 | To create an expanded button (full width of it's container), add the class `.expanded` to the outer `<table>` of the button, and wrap a `<center>` tag around the `<a>`.
44 |
45 | In Inky HTML, add the `.expanded` class to the `<button>` tag. If you want the button to be expanded on small only, add the `.small-expanded`.
46 |
47 | ```inky_example
48 | <row>
49 | <column>
50 | <button href="#" class="expanded">Expanded Button</button>
51 | <button href="#" class="small-expanded">Expand small only</button>
52 | </column>
53 | </row>
54 | ```
55 |
56 | ---
57 |
58 | ## Coloring
59 |
60 | Change the background color of a button by adding the class `.secondary`, `.success`, `.warning`, or `.alert` to the outer `<table>` (or the `<button>` tag in Inky HTML).
61 |
62 | ```inky_example
63 | <button href="#" class="secondary">Secondary Button</button>
64 | <button href="#" class="success">Success Button</button>
65 | <button href="#" class="warning">Warning Button</button>
66 | <button href="#" class="alert">Alert Button</button>
67 | ```
68 |
69 | ---
70 |
71 | ## Radius and Round
72 |
73 | Creating buttons with a radius or rounded edges (like a pill) can be achieved by adding the `.radius` or `.rounded` class to a button.
74 |
75 | *Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4+ (Gmail)*
76 |
77 | *Note - In order to create `.radius` and `.rounded` buttons, the border needs to be removed.*
78 |
79 | ```inky_example
80 | <button href="#" class="radius">Radius</button>
81 | <button href="#" class="rounded">Round</button>
82 |
83 | ```
84 |
--------------------------------------------------------------------------------
/docs/pages/callout.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Callout
3 | description: Formerly panels, callouts can be used to create sidebar panels or call out important content in an email.
4 | sass: scss/components/_callout.scss
5 | tags:
6 | - panel
7 | - alert
8 | ---
9 |
10 | ## Basics
11 |
12 | A Callout adds a border, background, and some padding. Callouts use a full table structure, with the class `.callout` on the outer `<table>` (for bottom margin) and the `.callout-inner` applied to the innermost `<th>`.
13 |
14 | When using [Inky](inky.html) HTML, the `<callout>` tag will create this structure for you. You can wrap them around a row or inside a column.
15 |
16 | ```inky_example
17 | <row>
18 | <columns small="6">
19 | <p>Not in a callout :(</p>
20 | </columns>
21 | <columns small="6">
22 | <callout class="secondary">
23 | <p>I'm in a callout!</p>
24 | </callout>
25 | </columns>
26 | </row>
27 |
28 | <callout class="primary">
29 | <row>
30 | <columns small="12">
31 | <p>This whole row is in a callout!</p>
32 | </columns>
33 | </row>
34 | </callout>
35 | ```
36 |
37 | ---
38 |
39 | ## Coloring Classes
40 |
41 | 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.
42 |
43 | ```inky_example
44 | <callout>
45 | <p>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.</p>
46 | </callout>
47 | <callout class="primary">
48 | <p>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.</p>
49 | </callout>
50 |
51 | <callout class="success">
52 | <p>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.</p>
53 | </callout>
54 |
55 | <callout class="warning">
56 | <p>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.</p>
57 | </callout>
58 |
59 | <callout class="alert">
60 | <p>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.</p>
61 | </callout>
62 | ```
63 |
--------------------------------------------------------------------------------
/docs/pages/gem-guide.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started with the Ruby Gem
3 | description: inky-rb is a gem that allows you to bring the power of Foundation for Emails into your Rails apps. It can be embedded into the Asset Pipeline, combining with a CSS inliner to let you generate awesomely responsive HTML emails that work across various clients.
4 | ---
5 |
6 | ## How It Works
7 |
8 | 
9 |
10 | **inky-rb** is a pure Ruby implementation of the Inky templating language that converts simple custom HTML tags like `<row>` and `<column>` into the complex table-based HTML required for emails.
11 |
12 | Using a CSS inliner like `premailer-rails` or `roadie`, you're able to keep your email templates lean by avoiding the need to manually embed styles in the markup. By parsing your email template, the inliner is able to locate your referenced stylesheet and go through all of the selectors specified within it, assigning the styles to matching elements within the document.
13 |
14 | The result of this approach is an HTML email, as styled or as responsive as you need it, with a fraction of the code required by writing emails the old fashioned way.
15 |
16 | ---
17 |
18 | ## Getting Started
19 |
20 | Installing inky-rb in your Rails application requires only a few simple steps. Get the ball rolling by adding the following to your app's Gemfile:
21 |
22 | ```ruby
23 | gem 'inky-rb', require: 'inky'
24 | # Stylesheet inlining for email
25 | gem 'premailer-rails'
26 | ```
27 |
28 | Then execute:
29 |
30 | ```bash
31 | bundle install
32 | ```
33 |
34 | Run the following command to set up the required styles and mailer layout:
35 |
36 | ```bash
37 | rails g inky:install
38 | ```
39 |
40 | (You can specify the generated mailer layout filename like so: `rails g inky:install some_name`)
41 |
42 | Rename your email templates to use the `.inky` file extension. Note that you'll still be able to use ERB within the `.inky` templates:
43 |
44 | ```ruby
45 | welcome.html => welcome.html.inky
46 | pw_reset.html.erb => pw_reset.html.inky
47 | ```
48 |
49 | Done! You're now all set to start writing responsive emails in your Rails app.
50 |
51 | ---
52 |
53 | ## Standalone Assets
54 |
55 | To include only the Foundation for Emails styles in your Asset Pipeline, without the Inky templating language, use the [**foundation_emails**](https://github.com/zurb/foundation-emails/#using-the-ruby-gem) gem.
56 |
--------------------------------------------------------------------------------
/docs/pages/global.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Global Styles
3 | description: Our global CSS includes helpful resets to ensure consistent styling across email clients.
4 | sass: scss/_global.scss
5 | ---
6 |
7 | ## Font Sizing
8 |
9 | The default font size is set to 100% of the browser style sheet, usually 16 pixels. This ensures compatibility with browser-based text zoom or user-set defaults. If you're using the Sass version of Foundation, edit the `$global-font-size` variable to change the base font size. This can be a percentage value, or a pixel value.
10 |
11 | ---
12 |
13 | ## Colors
14 |
15 | All interactive elements in Foundation, such as links and buttons, use the same color. The default shade of blue you see all over Foundation comes from the `$primary-color` Sass variable.
16 |
17 | Many components can also be colored with four other colors: secondary, alert, success, and warning. Use these colors to give more context to UI elements and actions.
18 |
19 | <div class="row small-up-1 medium-up-3 large-up-5">
20 | <div class="column">
21 | <div class="docs-color-block">
22 | <div class="docs-color-block-primary" style="background-color: #2199e8"></div>
23 | <p>Primary</p>
24 | </div>
25 | </div>
26 | <div class="column">
27 | <div class="docs-color-block">
28 | <div class="docs-color-block-secondary"></div>
29 | <p>Secondary</p>
30 | </div>
31 | </div>
32 | <div class="column">
33 | <div class="docs-color-block">
34 | <div class="docs-color-block-success"></div>
35 | <p>Success</p>
36 | </div>
37 | </div>
38 | <div class="column">
39 | <div class="docs-color-block">
40 | <div class="docs-color-block-warning"></div>
41 | <p>Warning</p>
42 | </div>
43 | </div>
44 | <div class="column">
45 | <div class="docs-color-block">
46 | <div class="docs-color-block-alert"></div>
47 | <p>Alert</p>
48 | </div>
49 | </div>
50 | <div class="column">
51 | <div class="docs-color-block">
52 | <div class="docs-color-block-white"></div>
53 | <p>White</p>
54 | </div>
55 | </div>
56 | <div class="column">
57 | <div class="docs-color-block">
58 | <div class="docs-color-block-light-gray"></div>
59 | <p>Light Gray</p>
60 | </div>
61 | </div>
62 | <div class="column">
63 | <div class="docs-color-block">
64 | <div class="docs-color-block-medium-gray"></div>
65 | <p>Medium Gray</p>
66 | </div>
67 | </div>
68 | <div class="column">
69 | <div class="docs-color-block">
70 | <div class="docs-color-block-dark-gray"></div>
71 | <p>Dark Gray</p>
72 | </div>
73 | </div>
74 | <div class="column">
75 | <div class="docs-color-block">
76 | <div class="docs-color-block-black"></div>
77 | <p>Black</p>
78 | </div>
79 | </div>
80 | </div>
81 |
82 | ---
83 |
84 | ### Color Classes
85 |
86 | Some components, such as [buttons](button.html) and [callouts](callout.html), have *coloring classes*, which let you change the color of the element by adding the name of the color as a CSS class.
87 |
88 | ```inky_example
89 | <button class="button" href="#">Primary Action</button>
90 | <button class="secondary button" href="#">Secondary Action</button>
91 | ```
92 |
93 | ```inky_example
94 | <callout class="success">
95 | <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
96 | </callout>
97 | <callout class="alert">
98 | <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
99 | </callout>
100 | ```
101 |
102 | ## Responsive Breakpoint
103 |
104 | Unlike Foundation for Sites, the Foundation for Emails CSS is written *desktop-first*. This is because many older desktop email clients don't support media queries, or `<style>` tags.
105 |
106 | **Your email layout shifts from desktop to mobile at 596 pixels.** This is the width of the container, plus the width of the gutters around the container. In the Sass version of Foundation, you can change the breakpoint by modifying these variables:
107 |
108 | - `$global-width`: width of the container. It's 580px by default.
109 | - `$global-gutter`: width of the grid gutter. It's padding to space columns away from each other or away from the edges of the container.
110 | - `$global-breakpoint`: The breakpoint at which the layout shifts. It's the variable that adds `$global-width` and `$global-gutter` together.
111 |
--------------------------------------------------------------------------------
/docs/pages/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Foundation for Emails
3 | description: Use Foundation for Emails to design responsive HTML emails that work in any email client.
4 | ---
5 |
6 | ## Getting Started
7 |
8 | There are two ways to get started with Foundation for Emails: the CSS version and the Sass version.
9 |
10 | The **CSS version** is a ZIP file download with all the HTML and CSS you need to get started writing an HTML email. You'll need to run your HTML through our web inliner before you can send them off.
11 |
12 | <a href="css-guide.html" class="large button">Get Started with CSS Version</a>
13 |
14 | The **Sass version** gives you more control over the visual styles of the framework, and a full build process, which includes a Sass compiler and image compression. It also includes Inky, our custom HTML language which makes writing code faster, a built-in inliner, and a live reloading server for testing. **The Sass version requires you to have Node.js installed.**
15 |
16 | <a href="sass-guide.html" class="large button">Get Started with Sass Version</a>
17 |
18 | ---
19 |
20 | ## What's in the Box?
21 |
22 | Get to know the pieces of Foundation.
23 |
24 | ### General
25 |
26 | <div class="row up-1 medium-up-2 large-up-3 docs-big-index">
27 | <div class="column"><a href="sass.html">
28 | <strong>Using Sass</strong>
29 | <p>Loading and customizing the Foundation for Emails Sass.</p>
30 | </a></div>
31 | <div class="column"><a href="inky.html">
32 | <strong>Using Inky</strong>
33 | <p>Our custom HTML tags for writing email components.</p>
34 | </a></div>
35 | <div class="column"><a href="zurb-stack.html">
36 | <strong>ZURB Stack</strong>
37 | <p>An all-in-one solution for email development.</p>
38 | </a></div>
39 | <div class="column"><a href="compatibility.html">
40 | <strong>Compatibility</strong>
41 | <p>Foundation works with every key email client—even Outlook.</p>
42 | </a></div>
43 | <div class="column"><a href="migration.html">
44 | <strong>Migrate from Ink</strong>
45 | <p>Upgrade your Ink emails to Foundation for Emails 2.</p>
46 | </a></div>
47 | </div>
48 |
49 | ### Components
50 |
51 | <div class="row up-1 medium-up-2 large-up-3 docs-big-index">
52 | <div class="column"><a href="grid.html">
53 | <strong>The Grid</strong>
54 | <p>A fully responsive grid with support for small and large layouts.</p>
55 | </a></div>
56 | <div class="column"><a href="global.html">
57 | <strong>Global Styles</strong>
58 | <p>Core framework styles and Sass variables.</p>
59 | </a></div>
60 | <div class="column"><a href="alignment.html">
61 | <strong>Alignment Classes</strong>
62 | <p>Utility classes to align text and images.</p>
63 | </a></div>
64 | <div class="column"><a href="button.html">
65 | <strong>Buttons</strong>
66 | <p>Buttons with support for multiple sizes and colors.</p>
67 | </a></div>
68 | <div class="column"><a href="callout.html">
69 | <strong>Callout</strong>
70 | <p>Colored panels to use for sectioning or calls to action.</p>
71 | </a></div>
72 | <div class="column"><a href="menu.html">
73 | <strong>Menu</strong>
74 | <p>Horizontal or vertical list of links.</p>
75 | </a></div>
76 | <div class="column"><a href="spacer.html">
77 | <strong>Spacer</strong>
78 | <p>Create consistant vertical spacing between elements.</p>
79 | </a></div>
80 | <div class="column"><a href="wrapper.html">
81 | <strong>Wrapper</strong>
82 | <p>Helps create full width or fluid backgrounds.</p>
83 | </a></div>
84 | <div class="column"><a href="typography.html">
85 | <strong>Typography</strong>
86 | <p>Core styles for paragraphs, headings, and more.</p>
87 | </a></div>
88 | <div class="column"><a href="visibility.html">
89 | <strong>Visibility</strong>
90 | <p>Utility classes to control how content appears at different screen sizes.</p>
91 | </a></div>
92 | </div>
93 |
--------------------------------------------------------------------------------
/docs/pages/inky.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Inky
3 | description: Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails.
4 | library: true
5 | ---
6 |
7 | ## Overview
8 |
9 | HTML emails require tables upon tables *upon tables* to work properly. Although Foundation for Emails takes a lot of the pain out of constructing these tables, we've made it even easier with **Inky**, a templating language that converts simple HTML tags like `<row>` and `<columns>` into complex table HTML.
10 |
11 | Inky keeps you out of a sea of tables and focused on your email. Check out this example—click "Switch to Inky" to see the difference.
12 |
13 | ```inky_example
14 | <container>
15 | <row>
16 | <columns>Put content in me!</columns>
17 | </row>
18 | </container>
19 | ```
20 | <div class="callout warning">
21 | The Inky templating language is part of the [ZURB Stack and the Sass version](zurb-stack.html). <br><a href="#how-to-inky">More on how to get Inky into your workflow</a>
22 | </div>
23 |
24 | ---
25 |
26 | ## Tags
27 |
28 | Inky currently supports these custom tags:
29 |
30 | - **Grid:**
31 | - `<container>`
32 | - `<row>`
33 | - `<columns>`
34 | - **Button:** `<button>`
35 | - **Callout:** `<callout>`
36 | - **Menu:**
37 | - `<menu>`
38 | - `<item>`
39 |
40 | ---
41 |
42 | ## FAQ
43 |
44 | Here are some frequently asked questions about Inky:
45 |
46 | **What’s a templating language?**
47 |
48 | Essentially, it is just custom HTML tags. Things like `<row>` and `<columns>` are understood by this language. Since email clients only work with table-based HTML, these tags don’t actually make it into your recipient’s inbox. Instead it’s translated into the table-based HTML needed for our approach to responsive emails.
49 |
50 | **How does it work?**
51 |
52 | We run a Gulp task that runs through your code, identifies our custom Inky tags, and translates them into valid HTML. For the more tech-savvy, you can [check out our task on our Github Repo](https://github.com/foundation/foundation-emails/blob/v2.0.0/gulpfile.js#L149).
53 |
54 | <a id="how-to-inky"></a>
55 | **How do I start Inky?**
56 |
57 | Inky is built into the ZURB Stack, but you can also use Inky standalone, or integrate it into your own build process. [Refer to the Inky readme to learn more.](https://github.com/zurb/inky#usage)
58 |
59 | **Do I have to have the Gulp tasks running for Inky to work?**
60 |
61 | Yes. In order for Inky to watch your files for changes, you need to be running either `npm start` or `npm run build` to see your changes reflected.
62 |
63 | **Do I have to use Inky? What if I just want to code my own email in tables?**
64 |
65 | You aren’t required to use Inky in your emails. You can write only in tables, or mix tables and Inky within the same email.
66 |
67 | **What are all of Inky’s tags and components?**
68 |
69 | You can check out all of the syntax and examples in the components section of the docs. We recommend you start off with [the grid](grid.html).
70 |
71 | **I found a bug—what should I do?**
72 |
73 | Foundation for Emails is completely open sourced and we love engaging with the community. Feel free to file a bug, or even crush the bug, through our [GitHub repo](https://github.com/zurb/inky/issues).
74 |
--------------------------------------------------------------------------------
/docs/pages/media-query.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Media Queries
3 | description: Use media queries to design responsive HTML emails that work in any email client.
4 | ---
5 |
6 | ## Default Media Query
7 |
8 | CSS media queries allow us to adjust the display and orientation of content at different screen sizes.
9 |
10 | Foundation for Emails has one breakpoint:
11 |
12 | - Small: 596 pixels or smaller.
13 |
14 | Many components can be modified at different screen sizes using special breakpoint classes. The grid is the most obvious example.
15 |
16 | **CSS Version**
17 | You can define the width of your columns on each breakpoint by using the grid with classes. `.small-6` creates a six column wide container (50%) width on the small breakpont. You can override this behavior on the large breakpoint by definining another size like `.large-4`.
18 |
19 | **Inky Version**
20 | In Inky, you can define the width by using the `small="x"` and `large="x"` attributes.
21 |
22 | ```inky_example
23 | <style>
24 | .columns {border: 1px solid #333;}
25 | </style>
26 |
27 | <row>
28 | <columns small="6" large="4">4 columns, 6 columns on small</columns>
29 | <columns small="6" large="8">8 columns, 6 columns on small</columns>
30 | </row>
31 | ```
32 |
33 | ---
34 |
35 | ## Using the Media Query
36 |
37 | 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:
38 |
39 | ```scss
40 | /* Small only */
41 | @media screen and (max-width: 596px) {}
42 | ```
43 |
44 | The Sass version of Foundation uses a convenient variable to set the breakpoint width. Use this media query to imitate the core breakpoint:
45 |
46 | ```scss
47 | /* Small only */
48 | @media only screen and (max-width: #{$global-breakpoint}) {}
49 | ```
50 |
51 | ### Example usage
52 |
53 | ```scss
54 | .newsletter-title {
55 | text-transform: uppercase;
56 | font-size: 9px;
57 | padding-left: 40px;
58 | font-weight: bold;
59 |
60 | @media only screen and (max-width: #{$global-breakpoint}) {
61 | padding-left: 0;
62 | }
63 | }
64 | ```
65 |
66 | ```scss
67 | @media only screen and (max-width: #{$global-breakpoint}) {
68 | p {
69 | font-size: 19px;
70 | font-weight: 600;
71 | }
72 | }
73 | ```
74 |
75 | ---
76 |
77 | ## Changing the Breakpoint
78 |
79 | Changing the breakpoint is easy in the Sass version. In the `_settings.scss` you can control the width of this breakpoint.
80 |
81 | ```scss
82 | $global-breakpoint: $global-width + $global-gutter;
83 | ```
84 |
85 | 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.
86 |
87 | ```scss
88 | $global-width: 580px;
89 | ```
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/docs/pages/menu.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Menu
3 | description: Use the menu component to create a horizontal or vertical list of links.
4 | sass: scss/components/_menu.scss
5 | ---
6 |
7 | ## Basics
8 |
9 | A menu is a `<table>` with a class of `.menu` and a `<tr>` inside of it. Each link in the menu is a `<th class="menu-item">` with an `<a>` inside of it.
10 |
11 | In Inky HTML, use the tag `<menu>` to make a menu, and the tag `<item>` to make an item.
12 |
13 | ```inky_example
14 | <menu>
15 | <item href="https://zurb.com">Item</item>
16 | <item href="https://zurb.com">Item</item>
17 | <item href="https://zurb.com">Item</item>
18 | </menu>
19 | ```
20 |
21 | <div class="callout primary">
22 | - It's important to add an `href` attribute to your `<item>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br>
23 | - Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
24 | </div>
25 |
26 | ---
27 |
28 | ## Vertical Menu
29 |
30 | Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu.
31 |
32 | ```inky_example
33 | <menu class="vertical">
34 | <item href="https://zurb.com">Item</item>
35 | <item href="https://zurb.com">Item</item>
36 | <item href="https://zurb.com">Item</item>
37 | </menu>
38 | ```
39 |
40 | ---
41 |
42 | ## Vertical Menu on the Small Breakpoint
43 |
44 | 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.
45 |
46 | ```inky_example
47 | <menu class="small-vertical">
48 | <item href="https://zurb.com">Item</item>
49 | <item href="https://zurb.com">Item</item>
50 | <item href="https://zurb.com">Item</item>
51 | </menu>
52 | ```
--------------------------------------------------------------------------------
/docs/pages/sass.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using Sass
3 | description: Foundation for Emails is written in Sass, which allows us to make the codebase customizable and flexible.
4 | ---
5 |
6 | <div class="primary callout">
7 | <p>Not familiar with Sass? The [official tutorial](https://sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
8 | </div>
9 |
10 | ## Compatibility
11 |
12 | <img src="assets/img/logos/sass-logo.svg" alt="Sass logo" class="float-right" style="width: 150px; height: 150px; margin-left: 1rem;">
13 |
14 | **Foundation for Emails can be compiled with Ruby Sass and dart-sass.** We tend to stick to the latest versions of both compilers when possible. Our documentation, as well as the ZURB Email Stack, are compiled with [sass](https://github.com/sass/dart-sass). We recommend these versions of either compiler:
15 |
16 | - Ruby Sass **3.4+**
17 | - dart-sass **1.35.2+**
18 |
19 | ---
20 |
21 | ## Loading the Framework
22 |
23 | If you're using the [ZURB Email Stack](zurb-stack.html) to create emails, Sass has already been set up for you. However, it's also easy to incorporate the Foundation for Emails Sass into your own email workflow.
24 |
25 | To get started, first install the framework files using Bower or npm.
26 |
27 | ```bash
28 | npm install foundation-emails --save
29 | ```
30 |
31 | Next, add the framework files as an import path in Sass. How you do this depends on your build process, but the path is the same regardless: `[packages_folder]/foundation-emails/scss`
32 |
33 | Here's an example using grunt-contrib-sass:
34 |
35 | ```js
36 | grunt.initConfig({
37 | sass: {
38 | dist: {
39 | options: {
40 | loadPath: ['node_modules/foundation-emails/scss']
41 | }
42 | }
43 | }
44 | });
45 | ```
46 |
47 | If you're using Compass, open your project's `config.rb` and add the import path there:
48 |
49 | ```ruby
50 | add_import_path "node_modules/foundation-emails/scss"
51 | ```
52 |
53 | Finally, add an `@import` statement to the top of your main Sass file.
54 |
55 | ```scss
56 | @import 'foundation-emails';
57 | ```
58 |
59 | You're also going to want a settings file for your project, which will allow you to modify the default styles of Foundation for Emails. **[Download the latest settings file here](https://raw.githubusercontent.com/zurb/foundation-emails/master/scss/settings/_settings.scss)**, add it to your project as `_settings.scss`, then import it *before* Foundation itself.
60 |
61 | ```scss
62 | @import 'settings';
63 | @import 'foundation-emails';
64 | ```
65 |
66 | ---
67 |
68 | ## The Settings File
69 |
70 | All Foundation projects include a **settings file**, named `_settings.scss`. If you're using the ZURB Stack, you can find the settings file under `src/assets/scss/`. If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can copy into your own Sass folder to work with.
71 |
72 | Every component includes a set of variables that modify core structural or visual styles. If there's something you can't customize with a variable, you can just write your own CSS to add it.
73 |
74 | <div class="callout warning">
75 | <p>Once you've set up a new project, your settings file can't be automatically updated when new versions change, add, or remove variables. Keep tabs on new <a href="https://github.com/zurb/foundation-emails/releases">Foundation releases</a> so you know when things change.</p>
76 | </div>
77 |
78 | Here's an example set of settings variables. These change the default styling of [buttons](button.html):
79 |
80 | ```scss
81 | // Text color of buttons.
82 | $button-color: $white;
83 |
84 | // Text color of buttons with a light background.
85 | $button-color-alt: $medium-gray;
86 |
87 | // Font weight of buttons.
88 | $button-font-weight: bold;
89 |
90 | // Background color of buttons.
91 | $button-background: $primary-color;
92 |
93 | // Border around buttons.
94 | $button-border: 2px solid $button-background;
95 | ```
96 |
97 | We put together some [Best Practices on Sass file structure](https://zurb.com/university/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure) that will help you keep your project clean.
98 |
--------------------------------------------------------------------------------
/docs/pages/spacer.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Spacer
3 | description: Vertical spacing in emails is inconsistent. The spacer component will help you create the space you need, the same on every device and client.
4 | tags:
5 | - spacing
6 | - height
7 | - margin
8 | - padding
9 | ---
10 |
11 | ## Basics
12 |
13 | Vertical spacing between email clients is not as simple as it sounds, in fact, it’s consistently inconsistent. Versions of Outlook don’t respect margin and padding the same and `<br>`’s are different all over the place.
14 |
15 | The spacer is used to create vertical spacing between elements. The size `size="x"` attribute allows you to set the height in pixels of vertical spacing you need.
16 |
17 | When using [Inky](inky.html) HTML, the `<spacer>` tag will create this structure for you. You can use them between rows, containers or inside wrappers, rows, columns, and containers. In this example, this spacer will create 100px of vertical spacing:
18 |
19 | ```inky_example
20 | <p>Stuff on top</p>
21 | <spacer size="100"></spacer>
22 | <p>Stuff on bottom</p>
23 | ```
24 |
25 | The Inky `<spacer>` tag also allows you to specify contextual spacer sizes for small or large screens. In the example below, there will be 40px of vertical spacing on small screens, and 100px of spacing on large screens.
26 |
27 |
28 | ```inky_example
29 | <p>Stuff above...</p>
30 | <spacer size-sm="40" size-lg="100"></spacer>
31 | <p>...stuff below.</p>
32 | ```
33 |
34 | Specify both `size-sm` and `size-lg` or use just one of those attributes to render a spacer only on the corresponding size screen.
35 |
--------------------------------------------------------------------------------
/docs/pages/styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CSS with Inky
3 | description: Coding with Inky is easy and fun! Because some of the CSS classes are generated by Inky, we created a guide to help you style your email.
4 | ---
5 |
6 |
--------------------------------------------------------------------------------
/docs/pages/thumbnail.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Thumbnail
3 | description: Spruce up an image tag with our thumbnail style.
4 | published: false
5 | ---
6 |
7 | The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>` that wraps it. Make sure the `<img>` has an alt attribute that describes the contents of the image.
8 |
9 | The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.
10 |
11 | ```inky_example
12 | <img src="https://placehold.it/200x200" class="thumbnail">
13 | ```
14 |
15 | <!-- <table class="thumbnail">
16 | <tr>
17 | <td><img src="//placehold.it/300x300" class="thumbnail" /></td>
18 | </tr>
19 | </table> -->
20 |
--------------------------------------------------------------------------------
/docs/pages/typography.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Typography
3 | description: Typography in Foundation for Emails is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.
4 | sass: scss/components/_typography.scss
5 | ---
6 |
7 | ## Paragraphs
8 |
9 | This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.
10 |
11 | ```html
12 | <p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.</p>
13 | ```
14 |
15 | ---
16 |
17 | ## Header
18 |
19 | Foundation includes styles for all headings.
20 |
21 | ```inky_example
22 | <h1>h1. This is a very large header.</h1>
23 | <h2>h2. This is a large header.</h2>
24 | <h3>h3. This is a medium header.</h3>
25 | <h4>h4. This is a moderate header.</h4>
26 | <h5>h5. This is a small header.</h5>
27 | <h6>h6. This is a tiny header.</h6>
28 | ```
29 |
30 | ---
31 |
32 | ### Header Sizes
33 |
34 | The framework includes two typographic scales—one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the `$hx-font-size` variables in your project's <a href="sass.html#the-settings-file">Settings File</a>.
35 |
36 | Header | Default |
37 | --------|---------|
38 | `<h1>` | 34px |
39 | `<h2>` | 30px |
40 | `<h3>` | 28px |
41 | `<h4>` | 24px |
42 | `<h5>` | 20px |
43 | `<h6>` | 18px |
44 |
45 | ---
46 |
47 | ## Small Header Segments
48 |
49 | By inserting a `<small>` element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
50 |
51 | ```inky_example
52 | <h3>Foundation for Emails <small>Version 2</small></h3>
53 | ```
54 |
55 | ---
56 |
57 | ## Text Sizes
58 |
59 | You can change the size of text in paragraphs with `.text-` classes. These classes will apply to the large breakpoint as well as the small.
60 |
61 | ```inky_example
62 | <container>
63 | <row>
64 | <columns>
65 | <p class="text-xs">Extra small</p>
66 | <p class="text-sm">Small</p>
67 | <p class="text-lg">Large</p>
68 | <p class="text-xl">Extra large</p>
69 | <p class="text-xxl">Extra extra large</p>
70 | </columns>
71 | </row>
72 | </container>
73 | ```
74 |
75 | ---
76 |
77 | ## Links
78 |
79 | Links are very standard, and the color is preset to the Foundation primary color. [Learn more about Foundation's global colors](global.html).
80 |
81 | ```html
82 | <p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>
83 | ```
84 |
85 | ---
86 |
87 | ## Dividers
88 |
89 | Use dividers to define thematic breaks between paragraphs or sections of your email.
90 |
91 | ```html
92 | <h-line></h-line>
93 | ```
94 |
--------------------------------------------------------------------------------
/docs/pages/visibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Visibility Classes
3 | description: Selectively show content for different screen sizes.
4 | tags:
5 | - show
6 | - hide
7 | ---
8 |
9 | Visibility classes allow you to control what content appears on what screen size.
10 |
11 | Foundation for Emails has two breakpoints: *small*, which is any email client under 596 pixels wide, and *large*, any client over 596 pixels. This means small generally correlates to mobile clients, and large correlates to desktop clients.
12 |
13 | Due to Outlook's lack of support for certain CSS properties, the Foundation for Emails visibility classes should be used in conjunction with conditional comments to ensure that the content is properly hidden (or shown) in Outlook 2007, 2010, 2013 and 2016. For instance, in order to hide an element in MS Outlook as well as in e-mail forwarded from MS Outlook, make sure to wrap that element with `<!--[if !mso]><!-->` and `<!--<![endif]-->` conditional formatting.
14 |
15 | <div class="primary callout">
16 | <p>If you're using a visibility class on an image, be sure to apply it to the parent element, not to the image itself.</p>
17 | </div>
18 |
19 | **To show content only on mobile clients,** add the class `.hide-for-large` to a div wrapping the element that needs to be hidden.
20 |
21 | **To show content only on desktop clients,** add the class `.show-for-large` to the element.
22 |
23 | ```inky_example
24 | <!--[if !mso]><!-->
25 | <div class="hide-for-large">
26 | <callout class="primary">
27 | <p>This callout will only appear on small screens.</p>
28 | </callout>
29 | </div>
30 | <!--<![endif]-->
31 |
32 | <callout class="show-for-large alert">
33 | <p>This callout will only appear on large screens.</p>
34 | </callout>
35 | ```
36 |
--------------------------------------------------------------------------------
/docs/pages/wrapper.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Wrapper
3 | description: Wrapper creates the necessary structure to wrap elements so that full width backgrounds can be applied.
4 | tags:
5 | - full width
6 | - fliud
7 | - header
8 | - footer
9 | ---
10 |
11 | ## Basics
12 |
13 | When using [Inky](inky.html) HTML, the `<wrapper>` tag will create a `<table>`, `<tr>`, `<th>` structure needed to create consistent full width backgrounds. You can add classes to the wrapper to target CSS properties on it or target elements within it. The `.wrapper-inner` class is available to add padding to the wrapper.
14 |
15 | ```inky_example
16 | <wrapper>
17 | content
18 | </wrapper>
19 | ```
20 |
21 | ## Full (fluid) width header or footer
22 |
23 | Creating a fluid header with the `<wrapper>` component is pretty straight forward. Wrapping a `<container>` will keep your content bound to the width of the container. Add a class to the `<wrapper class="">` to add a background color.
24 |
25 | ```inky_example
26 | <style type="text/css">
27 | .header {
28 | background: #8a8a8a;
29 | }
30 |
31 | .header .columns {
32 | padding-bottom: 0;
33 | }
34 |
35 | .header p {
36 | color: #fff;
37 | margin-bottom: 0;
38 | }
39 |
40 | .header .wrapper-inner {
41 | padding: 20px; /*controls the height of the header*/
42 | }
43 |
44 | .header .container {
45 | background: #8a8a8a;
46 | }
47 |
48 | .wrapper.secondary {
49 | background: #f3f3f3;
50 | }
51 | </style>
52 |
53 | <wrapper class="header" bgcolor="#8a8a8a">
54 | <container>
55 | <row class="collapse">
56 | <columns small="6" valign="middle">
57 | <img src="https://placehold.it/200x50/663399">
58 | </columns>
59 | <columns small="6" valign="middle">
60 | <p class="text-right">BASIC</p>
61 | </columns>
62 | </row>
63 | </container>
64 | </wrapper>
65 | ```
66 |
67 | Using this structure outside of the container will yield a fluid width background that expands to the width of the email client's viewport.
68 |
69 |
70 |
--------------------------------------------------------------------------------
/docs/pages/zurb-stack.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ZURB Stack
3 | descripiton: The ZURB email stack is a boilerplate that gives you everything you need to develop and test HTML emails.
4 | ---
5 |
6 | Email and web development can get complicated fast. We’ve introduced the ZURB 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 ZURB Stack includes:
7 |
8 | ## Gulp
9 | 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/).
10 |
11 | ## Sass
12 | 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/).
13 |
14 | ## Inlining
15 | 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.
16 |
17 | ## Build Options
18 | 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 }); ```.
19 |
20 | ## Panini
21 | 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/zurb/panini).
22 |
23 | ## BrowserSync
24 | BrowserSync is awesome. It’s the specific tool in our ZURB 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/).
25 |
26 | ## Image Compression
27 | 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).
28 |
29 | ## Migrating a Project to 2.2.1
30 | 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`.
31 |
32 | 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`.
33 |
34 | 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`.
35 |
36 | Next, open up command line and navigate to the root of your project folder. Run `npm install`. Once completed, run `foundation build`.
37 |
38 | ---
39 |
40 | The ZURB 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 ZURB Stack’s gulp file to make your perfect email environment.
41 |
--------------------------------------------------------------------------------
/docs/partials/component-list.html:
--------------------------------------------------------------------------------
1 | <ul class="vertical menu docs-nav" id="docs-menu">
2 | <p class="docs-nav-version">
3 | <span data-docs-version>v2.3.0</span>
4 | <a href="https://github.com/foundation/foundation-emails/releases/">(Changelog)</a>
5 | </p>
6 |
7 | <li class="docs-nav-title">Getting Started</li>
8 | <li><a href="index.html">Overview</a></li>
9 | <li><a href="css-guide.html">CSS Version</a></li>
10 | <li><a href="sass-guide.html">Sass Version</a></li>
11 | <li><a href="gem-guide.html">Ruby Gem</a></li>
12 |
13 | <li class="docs-nav-title">Guides</li>
14 | <li><a href="sass.html">Using Sass</a></li>
15 | <li><a href="inky.html">Using Inky</a></li>
16 | <li><a href="media-query.html">Media Queries</a></li>
17 | <li><a href="zurb-stack.html">ZURB Stack</a></li>
18 | <li><a href="compatibility.html">Compatibility</a></li>
19 | <li><a href="tips-tricks.html">Tips & Tricks</a></li>
20 | <li><a href="migration.html">Migrate from Ink</a></li>
21 |
22 | <li class="docs-nav-title">Components</li>
23 | <li><a href="alignment.html">Alignment Classes</a></li>
24 | <li><a href="button.html">Button</a></li>
25 | <li><a href="callout.html">Callout</a></li>
26 | <li><a href="global.html">Global Styles</a></li>
27 | <li><a href="grid.html">Grid</a></li>
28 | <li><a href="menu.html">Menu</a></li>
29 | <li><a href="spacer.html">Spacer</a></li>
30 | <li><a href="thumbnail.html">Thumbnail</a></li>
31 | <li><a href="typography.html">Typography</a></li>
32 | <li><a href="wrapper.html">Wrapper</a></li>
33 | <li><a href="visibility.html">Visibility Classes</a></li>
34 |
35 | <li class="docs-nav-title">Libraries</li>
36 | <li><a href="panini.html">Panini (Handlebars)</a></li>
37 | </ul>
38 |
--------------------------------------------------------------------------------
/docs/partials/course-callout.html:
--------------------------------------------------------------------------------
1 | <a class="docs-course-callout" href="https://zurb.com/university/responsive-emails-foundation">
2 | <span class="docs-course-callout-subtitle">ZURB Master Class</span>
3 | <span class="docs-course-callout-title">Responsive Emails</span>
4 | <p>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.</p>
5 | <span class="button">View Class</span>
6 | </a>
7 |
--------------------------------------------------------------------------------
/docs/partials/footer.html:
--------------------------------------------------------------------------------
1 | <div class="footer-course-upsell">
2 | <section class="emails-course">
3 | <div class="row">
4 | <div class="medium-7 medium-push-4 columns">
5 | <div class="course-callout">
6 | <h3 class="emails-course-title"><span>ZURB MASTER CLASS</span> Responsive Emails</h3>
7 | <p>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.</p>
8 | <a href="https://zurb.com/university/responsive-emails-intro?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Footer&utm_campaign=Footer%20Upsell" class="button primary" target="_blank">Learn Foundation for Emails</a>
9 | </div>
10 | </div>
11 | <div class="medium-2 medium-pull-8 columns">
12 | <a href="https://zurb.com/university/responsive-emails-intro?utm_source=Foundation%20Docs&utm_medium=Docs&utm_content=Footer&utm_campaign=Footer%20Upsell" class="" target="_blank"><img src="{{root}}assets/img/inky-class.png"/></a>
13 | </div>
14 | </div>
15 | </section>
16 | </div>
17 |
18 | <div class="zurb-footer-top bg-fblue">
19 | <div class="row property">
20 | <div class="medium-4 columns">
21 | <div class="property-info">
22 | <h3>Foundation for Emails</h3>
23 | <p>Foundation for Emails is a framework for responsive HTML emails created by <a href="https://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
24 | </p>
25 | </div>
26 | </div>
27 |
28 | <div class="medium-8 columns">
29 | <div class="row collapse">
30 | <div class="medium-4 columns">
31 | <div class="learn-links">
32 | <h4 class="hide-for-small">Want more?</h4>
33 | <ul>
34 | <li><a href="https://get.foundation/sites">Foundation for Sites</a></li>
35 | <li><a href="https://zurb.com/university/courses">Foundation Training</a></li>
36 | <li><a href="https://zurb.com/library">Design Resources</a></li>
37 | </ul>
38 | </div>
39 | </div>
40 | <div class="medium-4 columns">
41 | <div class="support-links">
42 | <h4 class="hide-for-small">Talk to us</h4>
43 | <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
44 | <p><a href="https://get.foundation/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
45 | </div>
46 | </div>
47 | <div class="medium-4 columns">
48 | <div class="connect-links">
49 | <h4 class="hide-for-small">Stay Updated</h4>
50 | <p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
51 | <a href="https://zurb.com/news" class="small button">Stay Connected</a>
52 | </div>
53 | </div>
54 | </div>
55 | </div>
56 | </div>
57 | </div>
58 |
59 | <div class="zurb-footer-bottom">
60 | <div class="row">
61 | <div class="medium-4 medium-push-8 columns">
62 | <ul class="home-social">
63 | <li><a href="https://www.youtube.com/ZURB" class="youtube"></a></li>
64 | <li><a href="https://www.twitter.com/ZURB" class="twitter"></a></li>
65 | <li><a href="https://www.facebook.com/ZURB" class="facebook"></a></li>
66 | <li><a href="https://zurb.com/contact" class="mail"></a></li>
67 | </ul>
68 | </div>
69 | <div class="medium-8 medium-pull-4 columns">
70 | <a href="https://www.zurb.com" class="zurb-logo regular"></a>
71 | <ul class="zurb-links">
72 | <li><a href="https://zurb.com/about">About</a></li>
73 | <li><a href="https://zurb.com/blog">Blog</a></li>
74 | <li><a href="https://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
75 | <li><a href="https://zurb.com/contact">Contact</a></li>
76 | <li><a href="https://zurb.com/sitemap">Sitemap</a></li>
77 | </ul>
78 | <p class="copyright">© 1998‐2018 ZURB, Inc. All rights reserved.</p>
79 | </div>
80 | </div>
81 | </div>
82 |
--------------------------------------------------------------------------------
/docs/partials/mobile-navigation.html:
--------------------------------------------------------------------------------
1 | <div class="title-bar hide-for-medium">
2 | <div class="title-bar-left">
3 | <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
4 | <span class="title-bar-title">Foundation</span>
5 | </div>
6 | </div>
7 |
8 | <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
9 | <button class="close-button" aria-label="Close menu" type="button" data-close>
10 | <span aria-hidden="true">×</span>
11 | </button>
12 | <ul class="mobile-ofc vertical menu">
13 |
14 | <li>
15 | <a href="https://get.foundation/learn/about.html">About</a>
16 | <ul class="submenu menu vertical" data-submenu>
17 | <li><a href="https://get.foundation/learn/about.html">About Foundation</a></li>
18 | <li><a href="https://get.foundation/learn/blog.html">Blog</a></li>
19 |
20 | <li><a href="https://get.foundation/learn/case-studies.html">Case Studies</a></li>
21 | <li><a href="https://get.foundation/learn/brands.html">Brands</a></li>
22 | <li><a href="https://get.foundation/learn/buzz.html">Buzz</a></li>
23 | </ul>
24 | </li>
25 |
26 | <li>
27 | <a href="https://get.foundation/develop/getting-started.html">Develop</a>
28 | <ul class="submenu menu vertical" data-submenu>
29 | <li class="title">Frameworks</li>
30 | <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
31 | <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
32 | <li class="divider"></li>
33 | <li class="title">Develop</li>
34 | <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
35 | <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
36 | <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
37 | <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
38 | <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
39 | </ul>
40 | </li>
41 |
42 | <li>
43 | <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
44 | <ul class="submenu menu vertical" data-submenu>
45 | <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
46 | <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
47 | <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
48 | <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
49 | <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
50 | </ul>
51 | </li>
52 |
53 | <li>
54 | <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
55 | <ul class="submenu menu vertical" data-submenu>
56 | <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
57 | <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
58 | <li><a href="https://github.com/foundation/foundation-sites/discussions">Foundation Forum</a></li>
59 | <li><a href="https://get.foundation/learn/events.html">Events</a></li>
60 | <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
61 | <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
62 | <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
63 | </ul>
64 | </li>
65 |
66 | <li>
67 | <a href="https://get.foundation/frameworks-docs.html">Docs</a>
68 | <ul class="submenu menu vertical" data-submenu>
69 | <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
70 | <li><a href="https://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
71 | </ul>
72 | </li>
73 |
74 | <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
75 |
76 | </ul>
77 | </div>
78 |
79 | <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
80 | <button class="close-button" aria-label="Close menu" type="button" data-close>
81 | <span aria-hidden="true">×</span>
82 | </button>
83 | <ul class="vertical menu">
84 | <li><a href="#">Foundation</a></li>
85 | <li><a href="#">Dot</a></li>
86 | <li><a href="#">ZURB</a></li>
87 | <li><a href="#">Com</a></li>
88 | <li><a href="#">Slash</a></li>
89 | <li><a href="#">Sites</a></li>
90 | </ul>
91 | </div>
92 |
--------------------------------------------------------------------------------
/docs/partials/navigation.html:
--------------------------------------------------------------------------------
1 | <nav class="marketing-topbar show-for-medium">
2 |
3 | <ul class="menu">
4 | <li class="topbar-title"><a href="https://get.foundation/index.html"><img src="https://get.foundation/assets/img/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
5 | </ul>
6 |
7 | <ul class="dropdown menu" data-dropdown-menu data-click-open="false">
8 |
9 | <li>
10 | <a href="https://zurb.com/responsive">Showcase</a>
11 | <ul class="submenu menu vertical" data-submenu>
12 | <li><a href="https://zurb.com/responsive">Foundation Showcase</a></li>
13 | <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
14 | <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
15 | <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
16 | <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
17 | <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
18 | </ul>
19 | </li>
20 |
21 | <li>
22 | <a href="https://get.foundation/develop/getting-started.html">Develop</a>
23 | <ul class="submenu menu vertical" data-submenu>
24 | <li class="title">Frameworks</li>
25 | <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
26 | <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
27 | <li class="divider"></li>
28 | <li class="title">Develop</li>
29 | <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
30 | <li><a href="https://get.foundation/emails/resources.html">Resources</a></li>
31 | <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
32 | <li><a href="https://get.foundation/upload.html">Annotate Code</a></li>
33 | </ul>
34 | </li>
35 |
36 | <li>
37 | <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
38 | <ul class="submenu menu vertical" data-submenu>
39 | <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
40 | <li><a href="https://zurb.com/university/lessons">Lessons</a></li>
41 | <li><a href="https://zurb.com/university/courses">Courses</a></li>
42 | <li><a href="https://zurb.com/university/training">Custom Training</a>
43 | <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
44 | <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
45 | </ul>
46 | </li>
47 |
48 | <li>
49 | <a href="https://get.foundation/get-involved/contribute.html">Get Involved</a>
50 | <ul class="submenu menu vertical" data-submenu>
51 | <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
52 | <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
53 | <li><a href="https://github.com/foundation/foundation-sites/discussions">Foundation Forum</a></li>
54 | <li><a href="https://get.foundation/learn/events.html">Events</a></li>
55 | <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
56 | <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
57 | <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
58 | </ul>
59 | </li>
60 |
61 | <li>
62 | <a href="https://get.foundation/frameworks-docs.html">Docs</a>
63 | <ul class="submenu menu vertical" data-submenu>
64 | <li><a target="_blank" href="https://get.foundation/sites/docs/">Sites Docs</a></li>
65 | <li><a target="_blank" href="https://get.foundation/emails/docs/">Emails Docs</a></li>
66 | </ul>
67 | </li>
68 |
69 | <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
70 |
71 | </ul>
72 |
73 | </nav>
74 |
--------------------------------------------------------------------------------
/docs/partials/off-canvas.html:
--------------------------------------------------------------------------------
1 | <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
2 | <button class="close-button" aria-label="Close menu" type="button" data-close>
3 | <span aria-hidden="true">×</span>
4 | </button>
5 | <ul class="mobile-ofc vertical menu">
6 |
7 | <li>
8 | <a href="https://zurb.com/responsive">Showcase</a>
9 | <ul class="submenu menu vertical" data-submenu>
10 | <li><a href="https://zurb.com/responsive">Foundation Showcase</a></li>
11 | <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
12 | <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
13 | <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
14 | <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
15 | <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
16 | </ul>
17 | </li>
18 |
19 | <li>
20 | <a href="https://get.foundation/develop/getting-started.html">Develop</a>
21 | <ul class="submenu menu vertical" data-submenu>
22 | <li class="title">Frameworks</li>
23 | <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
24 | <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
25 | <li class="divider"></li>
26 | <li class="title">Develop</li>
27 | <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
28 | <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
29 | <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
30 | <li><a href="https://get.foundation/develop/yeti-launch.html">Yeti Launch</a></li>
31 | <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
32 | </ul>
33 | </li>
34 |
35 | <li>
36 | <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
37 | <ul class="submenu menu vertical" data-submenu>
38 | <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
39 | <li><a href="https://zurb.com/university/lessons">Lessons</a></li>
40 | <li><a href="https://get.foundation/learn/classes.html">Courses</a></li>
41 | <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
42 | <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
43 | <li><a href="https://get.foundation/learn/responsive-reading.html">Responsive Reading</a></li>
44 | </ul>
45 | </li>
46 |
47 | <li>
48 | <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
49 | <ul class="submenu menu vertical" data-submenu>
50 | <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
51 | <li><a href="https://get.foundation/get-involved/premium-support.html">PLZ Halp</a></li>
52 | <li><a href="https://github.com/foundation/foundation-sites/discussions">Foundation Forum</a></li>
53 | <li><a href="https://get.foundation/learn/events.html">Events</a></li>
54 | <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
55 | <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
56 | <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
57 | </ul>
58 | </li>
59 |
60 | <li>
61 | <a href="https://get.foundation/frameworks-docs.html">Docs</a>
62 | <ul class="submenu menu vertical" data-submenu>
63 | <li><a href="https://get.foundation/docs/" target="_blank">Sites Docs</a></li>
64 | <li><a href="https://get.foundation/apps/docs/#!/" target="_blank">Apps Docs</a></li>
65 | <li><a href="https://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
66 | </ul>
67 | </li>
68 |
69 | <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>
70 |
71 | </ul>
72 | </div>
73 |
74 | <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
75 | <button class="close-button" aria-label="Close menu" type="button" data-close>
76 | <span aria-hidden="true">×</span>
77 | </button>
78 | <ul class="vertical menu">
79 | <li><a href="#">Foundation</a></li>
80 | <li><a href="#">Dot</a></li>
81 | <li><a href="#">ZURB</a></li>
82 | <li><a href="#">Com</a></li>
83 | <li><a href="#">Slash</a></li>
84 | <li><a href="#">Sites</a></li>
85 | </ul>
86 | </div>
87 |
--------------------------------------------------------------------------------
/gem/.gitignore:
--------------------------------------------------------------------------------
1 | /.bundle/
2 | /.yardoc
3 | /Gemfile.lock
4 | /_yardoc/
5 | /coverage/
6 | /doc/
7 | /pkg/
8 | /spec/reports/
9 | /tmp/
10 |
--------------------------------------------------------------------------------
/gem/.rspec:
--------------------------------------------------------------------------------
1 | --format documentation
2 | --color
3 |
--------------------------------------------------------------------------------
/gem/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: ruby
3 | rvm:
4 | - 2.3.0
5 | before_install: gem install bundler -v 1.12.4
6 |
--------------------------------------------------------------------------------
/gem/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | # Specify dependencies in foundation-emails.gemspec
4 | gemspec
5 |
--------------------------------------------------------------------------------
/gem/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2016 ZURB, inc.
2 |
3 | The MIT License
4 |
5 | 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:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | 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.
10 |
--------------------------------------------------------------------------------
/gem/README.md:
--------------------------------------------------------------------------------
1 | # foundation_emails
2 |
3 | [](https://badge.fury.io/rb/foundation_emails)
4 |
5 | **foundation_emails** is a gem that enables you to use Foundation for Emails assets within a Rails project.
6 |
7 | 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.
8 |
9 | ## Installation
10 |
11 | 1. Add the following line to your Gemfile:
12 |
13 | ```ruby
14 | gem 'foundation_emails'
15 | ```
16 |
17 | 2. Then execute:
18 |
19 | ```bash
20 | bundle install
21 | ```
22 |
23 | 3. Import Foundation for Emails in your emails' stylesheet(s):
24 |
25 | ```scss
26 | // app/assets/stylesheets/your_emails_stylesheet.scss
27 |
28 | @import "foundation-emails";
29 | ```
30 |
31 | ## License
32 |
33 | The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
34 |
--------------------------------------------------------------------------------
/gem/Rakefile:
--------------------------------------------------------------------------------
1 | require "bundler/gem_tasks"
2 | require "rspec/core/rake_task"
3 |
4 | RSpec::Core::RakeTask.new(:spec)
5 |
6 | task :default => :spec
7 |
--------------------------------------------------------------------------------
/gem/bin/console:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env ruby
2 |
3 | require "bundler/setup"
4 | require "foundation_emails"
5 |
6 | require "irb"
7 | IRB.start
8 |
--------------------------------------------------------------------------------
/gem/bin/setup:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | set -euo pipefail
3 | IFS=#39;\n\t'
4 | set -vx
5 |
6 | bundle install
7 |
--------------------------------------------------------------------------------
/gem/foundation-emails.gemspec:
--------------------------------------------------------------------------------
1 | # coding: utf-8
2 | lib = File.expand_path("../lib", __FILE__)
3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4 | require "foundation_emails/version"
5 |
6 | Gem::Specification.new do |spec|
7 | spec.name = "foundation_emails"
8 | spec.version = FoundationEmails::VERSION
9 | spec.authors = ["Foundation"]
10 | spec.email = ["contact@get.foundation"]
11 |
12 | spec.summary = %q{A framework for responsive emails.}
13 | spec.description = %q{Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client.}
14 | spec.homepage = "https://get.foundation/emails"
15 | spec.license = "MIT"
16 |
17 | spec.files = Dir[ File.join("**", "*") ].reject { |p| File.directory?(p) || p.match(%{^(test|spec|features)/}) }
18 | # Include symlinked files separately
19 | spec.files += Dir.glob("vendor/assets/stylesheets/foundation-emails/**/*.*")
20 | spec.bindir = "exe"
21 | spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
22 | spec.require_paths = ["lib"]
23 |
24 | spec.add_development_dependency "bundler", "~> 2"
25 | spec.add_development_dependency "rake", "~> 10.0"
26 | spec.add_development_dependency "rspec", "~> 3.0"
27 | end
28 |
--------------------------------------------------------------------------------
/gem/lib/foundation_emails.rb:
--------------------------------------------------------------------------------
1 | require "foundation_emails/version"
2 | require "foundation_emails/engine"
3 |
4 | module FoundationEmails
5 |
6 | end
7 |
--------------------------------------------------------------------------------
/gem/lib/foundation_emails/engine.rb:
--------------------------------------------------------------------------------
1 | require "rails"
2 |
3 | module FoundationEmails
4 | class Engine < ::Rails::Engine
5 | end
6 | end
7 |
--------------------------------------------------------------------------------
/gem/lib/foundation_emails/version.rb:
--------------------------------------------------------------------------------
1 | module FoundationEmails
2 | VERSION = "2.4.0.0"
3 | end
4 |
--------------------------------------------------------------------------------
/gem/spec/foundation/emails_spec.rb:
--------------------------------------------------------------------------------
1 | require "spec_helper"
2 |
3 | describe FoundationEmails do
4 | it "has a version number" do
5 | expect(FoundationEmails::VERSION).not_to be nil
6 | end
7 | end
8 |
--------------------------------------------------------------------------------
/gem/spec/spec_helper.rb:
--------------------------------------------------------------------------------
1 | $LOAD_PATH.unshift File.expand_path("../../lib", __FILE__)
2 | require "foundation_emails"
3 |
--------------------------------------------------------------------------------
/gem/vendor/assets/stylesheets/_foundation-emails.scss:
--------------------------------------------------------------------------------
1 | @import "foundation-emails/foundation-emails";
2 |
--------------------------------------------------------------------------------
/gem/vendor/assets/stylesheets/foundation-emails:
--------------------------------------------------------------------------------
1 | ../../../../scss/
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "foundation-emails",
3 | "version": "2.4.0",
4 | "description": "A framework for responsive emails",
5 | "keywords": [
6 | "responsive",
7 | "emails"
8 | ],
9 | "style": "dist/foundation-emails.min.css",
10 | "main": "dist/foundation-emails.css",
11 | "author": "Foundation <contact@get.foundation> (https://get.foundation)",
12 | "scripts": {
13 | "start": "gulp",
14 | "test": "gulp test",
15 | "dist": "gulp dist"
16 | },
17 | "repository": "https://github.com/foundation/foundation-emails",
18 | "bugs": "https://github.com/foundation/foundation-emails/issues",
19 | "devDependencies": {
20 | "browser-sync": "^2.9.10",
21 | "cheerio": "^1.0.0-rc.3",
22 | "cssnano": "^4.1.10",
23 | "foundation-docs": "foundation/foundation-docs",
24 | "foundation-sites": "foundation/foundation-sites",
25 | "gulp": "^4.0.2",
26 | "gulp-autoprefixer": "^7.0.1",
27 | "gulp-cached": "^1.1.0",
28 | "gulp-concat": "^2.6.0",
29 | "gulp-htmlmin": "^5.0.1",
30 | "gulp-if": "^3.0.0",
31 | "gulp-inject-string": "^1.1.0",
32 | "gulp-inline-css": "^3.4.0",
33 | "gulp-load-plugins": "^2.0.1",
34 | "gulp-postcss": "^8.0.0",
35 | "gulp-prettify": "^0.5.0",
36 | "gulp-prompt": "^1.2.0",
37 | "gulp-rename": "^1.2.2",
38 | "gulp-rsync": "0.0.8",
39 | "gulp-sass": "^4.1.0",
40 | "gulp-sass-lint": "^1.4.0",
41 | "gulp-sourcemaps": "^2.6.5",
42 | "gulp-wrap": "^0.15.0",
43 | "gulp-zip": "^5.0.1",
44 | "inky": "^1.4.1",
45 | "js-yaml": "^3.14.0",
46 | "lazypipe": "^1.0.1",
47 | "lodash.template": ">=4.5.0",
48 | "marked": "^4.0.10",
49 | "motion-ui": "^2.0.3",
50 | "multiline": "^2.0.0",
51 | "octophant": "^1.0.0",
52 | "panini": "^1.7.1",
53 | "rimraf": "^3.0.0",
54 | "run-sequence": "^2.2.1",
55 | "sass": "^1.35.2",
56 | "siphon-media-query": "^1.0.0",
57 | "supercollider": "^1.5.2",
58 | "typeahead.js": "^0.11.1",
59 | "yargs": "^14.2.0"
60 | },
61 | "resolutions": {
62 | "minimist": "^1.2.5",
63 | "braces": "^2.3.2",
64 | "lodash.template": ">=4.5.0"
65 | },
66 | "license": "MIT",
67 | "eyeglass": {
68 | "name": "foundation-emails",
69 | "sassDir": "scss",
70 | "needs": "^0.8.0"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/scss/_global.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group global
7 | ////
8 |
9 | /// Primary color for interactive components like links and buttons.
10 | /// @type Color
11 | $primary-color: #2199e8 !default;
12 |
13 | /// Secondary color, used with components that support the `.secondary` class.
14 | /// @type Color
15 | $secondary-color: #777777 !default;
16 |
17 | /// Color to indicate a positive status or action, used with the `.success` class.
18 | /// @type Color
19 | $success-color: #3adb76 !default;
20 |
21 | /// Color to indicate a caution status or action, used with the `.warning` class.
22 | /// @type Color
23 | $warning-color: #ffae00 !default;
24 |
25 | /// Color to indicate a negative status or action, used with the `.alert` class.
26 | /// @type Color
27 | $alert-color: #ec5840 !default;
28 |
29 | /// Color used for light gray UI items within Foundation.
30 | /// @type Color
31 | $light-gray: #f3f3f3 !default;
32 |
33 | /// Color used for medium gray UI items within Foundation.
34 | /// @type Color
35 | $medium-gray: #cacaca !default;
36 |
37 | /// Color used for dark gray UI items within Foundation.
38 | /// @type Color
39 | $dark-gray: #8a8a8a !default;
40 |
41 | /// Color used for black ui items within Foundation
42 | /// @type Color
43 | $black: #0a0a0a !default;
44 |
45 | /// Color used for white ui items within Foundation
46 | /// @type Color
47 | $white: #fefefe !default;
48 |
49 | /// Color used code.
50 | /// @type Color
51 | $pre-color: #ff6908 !default;
52 |
53 | /// Width of the container.
54 | /// @type Number
55 | $global-width: 580px !default;
56 |
57 | /// Width of the container on small screens.
58 | /// @type Length
59 | $global-width-small: 95% !default;
60 |
61 | /// Gutter for grid elements.
62 | /// @type length
63 | $global-gutter: 16px !default;
64 |
65 | /// Gutter for grid elements on small screens.
66 | /// @type length
67 | $global-gutter-small: $global-gutter !default;
68 |
69 | /// Body background color.
70 | /// @type Length
71 | $body-background: $light-gray !default;
72 |
73 | /// Color for the container background
74 | /// @type Color
75 | $container-background: $white !default;
76 |
77 | /// Global padding.
78 | /// @type Number
79 | $global-padding: 16px !default;
80 |
81 | /// Global margin. Margin requires a capital 'M' to workin Outlook.com
82 | /// @type Number
83 | $global-margin: 16px !default;
84 |
85 | /// Global radius of radius-corners.
86 | /// @type Number
87 | $global-radius: 3px !default;
88 |
89 | /// Global rounded radius of rounded-corners.
90 | /// @type Number
91 | $global-rounded: 500px !default;
92 |
93 | /// Global media query to switch from desktop to mobile styles.
94 | /// @type String
95 | $global-breakpoint: $global-width + $global-gutter !default;
96 |
97 | .wrapper {
98 | width: 100%;
99 | }
100 |
--------------------------------------------------------------------------------
/scss/components/_alignment.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group alignment
7 | ////
8 |
9 | table,
10 | th,
11 | td,
12 | h1,
13 | h2,
14 | h3,
15 | h4,
16 | h5,
17 | h6,
18 | p,
19 | span {
20 | &.text-center {
21 | text-align: center;
22 | }
23 |
24 | &.text-left {
25 | text-align: left;
26 | }
27 |
28 | &.text-right {
29 | text-align: right;
30 | }
31 | }
32 |
33 | span.text-center {
34 | display: block;
35 | width: 100%;
36 | text-align: center;
37 | }
38 |
39 | @media only screen and (max-width: #{$global-breakpoint}) {
40 | .small-float-center {
41 | margin: 0 auto !important;
42 | float: none !important;
43 | text-align: center !important;
44 | }
45 |
46 | .small-text-center {
47 | text-align: center !important;
48 | }
49 |
50 | .small-text-left {
51 | text-align: left !important;
52 | }
53 |
54 | .small-text-right {
55 | text-align: right !important;
56 | }
57 | }
58 |
59 | img.float-left {
60 | float: left;
61 | text-align: left;
62 | }
63 |
64 | img.float-right {
65 | float: right;
66 | text-align: right;
67 | }
68 |
69 | img.float-center,
70 | img.text-center {
71 | margin: 0 auto;
72 | Margin: 0 auto;
73 | float: none;
74 | text-align: center;
75 | }
76 |
77 | table,
78 | td,
79 | th {
80 | &.float-center {
81 | margin: 0 auto;
82 | Margin: 0 auto;
83 | float: none;
84 | text-align: center;
85 | }
86 | }
87 |
88 | td.columns,
89 | td.column,
90 | th.columns,
91 | th.column {
92 | &[valign="bottom"] {
93 | vertical-align: bottom;
94 | }
95 | }
96 |
97 | td.columns,
98 | td.column,
99 | th.columns,
100 | th.column {
101 | &[valign="middle"] {
102 | vertical-align: middle;
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/scss/components/_callout.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group callout
7 | ////
8 |
9 | /// Background color of a callout.
10 | /// @type Color
11 | $callout-background: $white !default;
12 |
13 | /// Fade value for callout backgrounds.
14 | /// @type Number
15 | $callout-background-fade: 85% !default;
16 |
17 | /// Padding inside a callout.
18 | /// @type Length
19 | $callout-padding: 10px !default;
20 |
21 | /// Padding inside a callout on small screens.
22 | /// @type Length
23 | $callout-padding-small: $callout-padding !default;
24 |
25 | /// Bottom margin of a callout.
26 | /// @type Length
27 | $callout-margin-bottom: $global-margin !default;
28 |
29 | /// Border around a callout.
30 | /// @type Border
31 | $callout-border: 1px solid darken($callout-background, 20%) !default;
32 |
33 | /// Border around a callout with the `.primary` class.
34 | /// @type Border
35 | $callout-border-primary: 1px solid darken($primary-color, 20%) !default;
36 |
37 | /// Border around a callout with the `.secondary` class.
38 | /// @type Border
39 | $callout-border-secondary: 1px solid darken($secondary-color, 20%) !default;
40 |
41 | /// Border around a callout with the `.success` class.
42 | /// @type Border
43 | $callout-border-success: 1px solid darken($success-color, 20%) !default;
44 |
45 | /// Border around a callout with the `.warning` class.
46 | /// @type Border
47 | $callout-border-warning: 1px solid darken($warning-color, 20%) !default;
48 |
49 | /// Border around a callout with the `.alert` class.
50 | /// @type Border
51 | $callout-border-alert: 1px solid darken($alert-color, 20%) !default;
52 |
53 | table.callout {
54 | margin-bottom: $callout-margin-bottom;
55 | Margin-bottom: $callout-margin-bottom;
56 | }
57 |
58 | th.callout-inner {
59 | width: 100%;
60 | border: $callout-border;
61 | padding: $callout-padding;
62 | background: $callout-background;
63 |
64 | &.primary {
65 | background: scale-color($primary-color, $lightness: $callout-background-fade);
66 | border: $callout-border-primary;
67 | color: $black;
68 | }
69 |
70 | &.secondary {
71 | background: scale-color($secondary-color, $lightness: $callout-background-fade);
72 | border: $callout-border-secondary;
73 | color: $black;
74 | }
75 |
76 | &.success {
77 | background: scale-color($success-color, $lightness: $callout-background-fade);
78 | border: $callout-border-success;
79 | color: $black;
80 | }
81 |
82 | &.warning {
83 | background: scale-color($warning-color, $lightness: $callout-background-fade);
84 | border: $callout-border-warning;
85 | color: $black;
86 | }
87 |
88 | &.alert {
89 | background: scale-color($alert-color, $lightness: $callout-background-fade);
90 | border: $callout-border-alert;
91 | color: $black;
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/scss/components/_code.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foundation/foundation-emails/9e371709f93bbe99e897db6b9976115c0aba45d3/scss/components/_code.scss
--------------------------------------------------------------------------------
/scss/components/_media-query.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group media-query
7 | ////
8 |
9 | @media only screen and (max-width: #{$global-breakpoint}) {
10 | table.body img {
11 | width: auto;
12 | height: auto;
13 | }
14 |
15 | table.body center {
16 | min-width: 0 !important;
17 | }
18 |
19 | table.body .container {
20 | width: $global-width-small !important;
21 | }
22 |
23 | //If it supports border-box, why not? Am I right?
24 | //Also, by default pad that to the global-gutter variable
25 | table.body .columns,
26 | table.body .column {
27 | height: auto !important;
28 | -moz-box-sizing: border-box;
29 | -webkit-box-sizing: border-box;
30 | box-sizing: border-box;
31 | padding-left: $global-gutter-small !important;
32 | padding-right: $global-gutter-small !important;
33 | }
34 |
35 | // Collpased columns have no gutter.
36 | .collapse {
37 | table.body & > tbody > tr > .columns,
38 | table.body & > tbody > tr > .column {
39 | padding-left: 0 !important;
40 | padding-right: 0 !important;
41 | }
42 | }
43 |
44 | // Basic grid rules
45 | @for $i from 1 through $grid-column-count {
46 | td.small-#{$i},
47 | th.small-#{$i} {
48 | display: inline-block !important;
49 | width: -zf-grid-calc-pct($i, $grid-column-count) !important;
50 | }
51 | }
52 |
53 | //If it's the last column in column count (12 by default),
54 | //give it block and 100% width to knock down the wimpy columns to their own row.
55 | .columns td.small-#{$grid-column-count},
56 | .column td.small-#{$grid-column-count},
57 | .columns th.small-#{$grid-column-count},
58 | .column th.small-#{$grid-column-count} {
59 | display: block !important;
60 | width: 100% !important;
61 | }
62 |
63 | @for $i from 1 through ($grid-column-count - 1) {
64 | table.body td.small-offset-#{$i},
65 | table.body th.small-offset-#{$i} {
66 | //1.5 takes in effect a whole empty cell.
67 | margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
68 | Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
69 | }
70 | }
71 |
72 | table.body table.columns td.expander,
73 | table.body table.columns th.expander {
74 | display: none !important;
75 | }
76 |
77 | table.body .right-text-pad,
78 | table.body .text-pad-right {
79 | padding-left: $text-padding !important;
80 | }
81 |
82 | table.body .left-text-pad,
83 | table.body .text-pad-left {
84 | padding-right: $text-padding !important;
85 | }
86 |
87 | //menu
88 | table.menu {
89 | width: 100% !important;
90 |
91 | td,
92 | th {
93 | width: auto !important;
94 | display: inline-block !important;
95 | }
96 |
97 | &.vertical,
98 | &.small-vertical {
99 | td,
100 | th {
101 | display: block !important;
102 | }
103 | }
104 | }
105 |
106 | // Centers the menus!
107 | table.menu[align="center"] {
108 | width: auto !important;
109 | }
110 |
111 | // expands buttons for small only
112 | table.button.small-expand,
113 | table.button.small-expanded {
114 | width: 100% !important;
115 |
116 | table {
117 | width: 100%;
118 |
119 | a {
120 | text-align: center !important;
121 | width: 100% !important;
122 | padding-left: 0 !important;
123 | padding-right: 0 !important;
124 | }
125 | }
126 |
127 | center {
128 | min-width: 0;
129 | }
130 | }
131 |
132 | // Small padding inside callouts
133 | th.callout-inner {
134 | padding: $callout-padding-small !important;
135 | }
136 | }
137 |
138 |
--------------------------------------------------------------------------------
/scss/components/_menu.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group menu
7 | ////
8 |
9 | /// Padding inside a menu item.
10 | /// @type Length
11 | $menu-item-padding: 10px !default;
12 |
13 | /// Right-hand spacing of items in menus with the `.simple` class.
14 | /// @type Length
15 | $menu-item-gutter: 10px !default;
16 |
17 | /// This is the color of the menu item links.
18 | /// @type Color
19 | $menu-item-color: $primary-color !default;
20 |
21 | table.menu {
22 | width: $global-width;
23 |
24 | td.menu-item,
25 | th.menu-item {
26 | padding-top: $menu-item-padding;
27 | padding-right: $menu-item-gutter;
28 | padding-bottom: $menu-item-padding;
29 | padding-left: $menu-item-padding;
30 |
31 | a {
32 | color: $menu-item-color;
33 | }
34 | }
35 | }
36 |
37 | // Doesn't work on the pesky ESPs like outlook 2000
38 | table.menu.vertical {
39 | td.menu-item,
40 | th.menu-item {
41 | padding-top: $menu-item-padding;
42 | padding-right: 0;
43 | padding-bottom: $menu-item-padding;
44 | padding-left: $menu-item-padding;
45 | display: block;
46 |
47 | a {
48 | width: 100%;
49 | }
50 | }
51 |
52 | // Nested lists need some more padding to the left
53 | td.menu-item,
54 | th.menu-item {
55 | table.menu.vertical {
56 | td.menu-item,
57 | th.menu-item {
58 | padding-left: $menu-item-padding;
59 | }
60 | }
61 | }
62 | }
63 |
64 | table.menu.text-center a {
65 | text-align: center;
66 | }
67 |
68 | //Centers the menus!
69 | .menu[align="center"] {
70 | width: auto;
71 | }
72 |
73 | .menu[align="center"] tr {
74 | text-align: center;
75 | }
76 |
77 | // Remove outside padding so that the menu aligns with other elements on the page
78 | .menu:not(.float-center) {
79 | .menu-item:first-child{padding-left:0!important;}
80 | .menu-item:last-child{padding-right:0!important;}
81 | }
82 | .menu.vertical .menu-item {
83 | padding-left:0!important;
84 | padding-right:0!important;
85 | }
86 | @media only screen and (max-width: #{$global-breakpoint}) {
87 | .menu.small-vertical .menu-item {
88 | padding-left:0!important;
89 | padding-right:0!important;
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/scss/components/_normalize.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group normalize
7 | ////
8 |
9 | #outlook a {
10 | padding: 0;
11 | }
12 |
13 | body {
14 | width: 100% !important;
15 | min-width: 100%;
16 | -webkit-text-size-adjust: 100%;
17 | -ms-text-size-adjust: 100%;
18 | margin: 0;
19 | Margin: 0;
20 | padding: 0;
21 | -moz-box-sizing: border-box;
22 | -webkit-box-sizing: border-box;
23 | box-sizing: border-box;
24 | }
25 |
26 | .ExternalClass {
27 | width: 100%;
28 |
29 | &,
30 | p,
31 | span,
32 | font,
33 | td,
34 | th,
35 | div {
36 | line-height: 100%;
37 | }
38 | }
39 |
40 | #backgroundTable {
41 | margin: 0;
42 | Margin: 0;
43 | padding: 0;
44 | width: 100% !important;
45 | line-height: 100% !important;
46 | }
47 |
48 | img {
49 | outline: none;
50 | text-decoration: none;
51 | -ms-interpolation-mode: bicubic;
52 | width: auto;
53 | max-width: 100%;
54 | clear: both;
55 | display: block;
56 | }
57 |
58 | center {
59 | width: 100%;
60 | }
61 |
62 | a img {
63 | border: none;
64 | }
65 |
66 | table {
67 | border-spacing: 0;
68 | border-collapse: collapse;
69 | }
70 |
71 | td, th {
72 | word-wrap: break-word;
73 | -webkit-hyphens: auto;
74 | -moz-hyphens: auto;
75 | hyphens: auto;
76 | border-collapse: collapse !important;
77 | -moz-box-sizing: border-box;
78 | -webkit-box-sizing: border-box;
79 | box-sizing: border-box;
80 | }
81 |
82 | table, tr, td, th {
83 | padding: 0;
84 | vertical-align: top;
85 | text-align: left;
86 | }
87 |
--------------------------------------------------------------------------------
/scss/components/_outlook-first.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group outlook
7 | ////
8 |
9 | body.outlook p {
10 | display: inline !important;
11 | }
12 |
--------------------------------------------------------------------------------
/scss/components/_thumbnail.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group thumbnail
7 | ////
8 |
9 | /// Border around thumbnail images.
10 | /// @type Border
11 | $thumbnail-border: solid 4px $white !default;
12 |
13 | /// Bottom margin for thumbnail images.
14 | /// @type Length
15 | $thumbnail-margin-bottom: $global-margin !default;
16 |
17 | /// Box shadow under thumbnail images.
18 | /// @type Shadow
19 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
20 |
21 | /// Box shadow under thumbnail images.
22 | /// @type Shadow
23 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
24 |
25 | /// Transition proprties for thumbnail images.
26 | /// @type Transition
27 | $thumbnail-transition: box-shadow 200ms ease-out !default;
28 |
29 | /// Default radius for thumbnail images.
30 | /// @type Number
31 | $thumbnail-radius: $global-radius !default;
32 |
33 | /// Adds thumbnail styles to an element.
34 | .thumbnail {
35 | border: $thumbnail-border;
36 | box-shadow: $thumbnail-shadow;
37 | display: inline-block;
38 | line-height: 0;
39 | max-width: 100%;
40 | transition: $thumbnail-transition;
41 | border-radius: $thumbnail-radius;
42 | margin-bottom: $thumbnail-margin-bottom;
43 |
44 | &:hover,
45 | &:focus {
46 | box-shadow: $thumbnail-shadow-hover;
47 | }
48 | }
49 |
50 |
--------------------------------------------------------------------------------
/scss/components/_visibility.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 |
5 | ////
6 | /// @group visibility
7 | ////
8 |
9 | .hide-for-large {
10 | display: none;
11 | mso-hide: all; // hide selected elements in Outlook 2007-2013
12 | overflow: hidden;
13 | max-height: 0;
14 | font-size: 0;
15 | width: 0;
16 | line-height: 0;
17 |
18 | @media only screen and (max-width: #{$global-breakpoint}) {
19 | display: block !important;
20 | width: auto !important;
21 | overflow: visible !important;
22 | max-height: none !important;
23 | font-size: inherit !important;
24 | line-height: inherit !important;
25 | }
26 | }
27 |
28 | table.body table.container .hide-for-large * {
29 | mso-hide: all; // hide selected elements in Outlook 2007-2013
30 | }
31 |
32 | table.body table.container .hide-for-large,
33 | table.body table.container .row.hide-for-large {
34 | @media only screen and (max-width: #{$global-breakpoint}) {
35 | display: table !important;
36 | width: 100% !important;
37 | }
38 | }
39 |
40 | table.body table.container .callout-inner.hide-for-large {
41 | @media only screen and (max-width: #{$global-breakpoint}) {
42 | display: table-cell !important;
43 | width: 100% !important;
44 | }
45 | }
46 |
47 | table.body table.container .show-for-large {
48 | @media only screen and (max-width: #{$global-breakpoint}) {
49 | display: none !important;
50 | width: 0;
51 | mso-hide: all; // hide selected elements in Outlook 2007-2013
52 | overflow: hidden;
53 | }
54 | }
55 |
56 | // [todo] add image resets
57 | // img {
58 | // max-height: 0;
59 | // width: 0;
60 | // }
61 | // in media query
62 | // img {
63 | // max-height: none !important;
64 | // width: auto !important;
65 | // }
66 |
67 |
--------------------------------------------------------------------------------
/scss/foundation-emails.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 |
5 | @import
6 | 'util/util',
7 | 'global',
8 | 'components/normalize',
9 | 'grid/grid',
10 | 'grid/block-grid',
11 | 'components/alignment',
12 | 'components/visibility',
13 | 'components/typography',
14 | 'components/button',
15 | 'components/callout',
16 | 'components/thumbnail',
17 | 'components/menu',
18 | 'components/outlook-first',
19 | 'components/media-query';
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/scss/grid/_block-grid.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 | @use "sass:math";
5 |
6 | ////
7 | /// @group block-grid
8 | ////
9 |
10 | /// The highest number of `.x-up` classes available when using the block grid CSS.
11 | /// @type Number
12 | $block-grid-max: 8 !default;
13 |
14 | /// Gutter between elements in a block grid.
15 | /// @type Number
16 | $block-grid-gutter: $global-gutter !default;
17 |
18 | .block-grid {
19 | width: 100%;
20 | max-width: $global-width;
21 |
22 | td {
23 | display: inline-block;
24 | padding: math.div($block-grid-gutter, 2);
25 | }
26 | }
27 |
28 | // Sizing classes
29 | @for $i from 2 through $block-grid-max {
30 | .up-#{$i} td {
31 | width: floor(math.div($global-width - $i * $block-grid-gutter, $i)) !important;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/scss/grid/_grid.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // zurb.com/ink/
3 | // Licensed under MIT Open Source
4 | @use "sass:math";
5 |
6 | ////
7 | /// @group grid
8 | ////
9 |
10 | /// Default number of columns for an email.
11 | /// @type Number
12 | $grid-column-count: 12 !default;
13 |
14 | /// Default padding for the bottom of a column.
15 | /// @type Number
16 | $column-padding-bottom: $global-padding !default;
17 |
18 | /// Default border radius for the container. Use a px value
19 | /// @type Number
20 | $container-radius: 0 !default;
21 |
22 | //For viewing email in browser
23 | @media only screen {
24 | html {
25 | min-height: 100%;
26 | background: $body-background;
27 | }
28 | }
29 |
30 | table {
31 | &.body {
32 | background: $body-background;
33 | height: 100%;
34 | width: 100%;
35 | }
36 |
37 | &.container {
38 | background: $container-background;
39 | width: $global-width;
40 | margin: 0 auto;
41 | Margin: 0 auto;
42 | text-align: inherit;
43 | }
44 |
45 | &.row {
46 | padding: 0;
47 | width: 100%;
48 | position: relative;
49 | }
50 |
51 | &.spacer {
52 | width: 100%;
53 | td {
54 | mso-line-height-rule: exactly;
55 | }
56 | }
57 | }
58 |
59 | table.container table.row {
60 | display: table;
61 | }
62 |
63 | td.columns,
64 | td.column,
65 | th.columns,
66 | th.column {
67 | margin: 0 auto;
68 | Margin: 0 auto;
69 | padding-left: $global-gutter;
70 | padding-bottom: $column-padding-bottom;
71 |
72 | // Prevents Nested columns from double the padding
73 | .column.first,
74 | .columns.first {
75 | padding-left: 0 !important;
76 | }
77 |
78 | .column.last,
79 | .columns.last {
80 | padding-right: 0 !important;
81 | }
82 |
83 | .column,
84 | .columns {
85 | &:not([class*=large-offset]) {
86 | padding-left: 0 !important;
87 | padding-right: 0 !important;
88 | }
89 | }
90 | }
91 |
92 | td.columns.last,
93 | td.column.last,
94 | th.columns.last,
95 | th.column.last {
96 | padding-right: $global-gutter;
97 | }
98 |
99 | //makes sure nested tables are 100% width
100 | td.columns,
101 | td.column,
102 | th.columns,
103 | th.column {
104 | table {
105 | width: 100%;
106 |
107 | &.button {
108 | width:auto;
109 |
110 | &.expand,
111 | &.expanded {
112 | width: 100%;
113 | }
114 | }
115 | }
116 | }
117 |
118 | @for $i from 1 through $grid-column-count {
119 | td.large-#{$i},
120 | th.large-#{$i} {
121 | width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
122 | padding-left: math.div($global-gutter, 2);
123 | padding-right: math.div($global-gutter, 2);
124 | }
125 |
126 | td.large-#{$i}.first,
127 | th.large-#{$i}.first {
128 | padding-left: $global-gutter;
129 | }
130 |
131 | td.large-#{$i}.last,
132 | th.large-#{$i}.last {
133 | padding-right: $global-gutter;
134 | }
135 |
136 | //Collapsed logic
137 | .collapse > tbody > tr {
138 | > td.large-#{$i},
139 | > th.large-#{$i} {
140 | &:not([class*=large-offset]) {
141 | padding-right: 0;
142 | padding-left: 0;
143 | width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
144 | }
145 | }
146 |
147 | //Gotta give it that extra love for the first and last columns.
148 | td.large-#{$i}.first,
149 | th.large-#{$i}.first,
150 | td.large-#{$i}.last,
151 | th.large-#{$i}.last {
152 | width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
153 | }
154 | }
155 |
156 | .body .columns td.large-#{$i},
157 | .body .column td.large-#{$i},
158 | .body .columns th.large-#{$i},
159 | .body .column th.large-#{$i} {
160 | width: -zf-grid-calc-pct($i, $grid-column-count);
161 | }
162 | }
163 |
164 | @for $i from 1 through ($grid-column-count - 1) {
165 | td.large-offset-#{$i},
166 | td.large-offset-#{$i}.first,
167 | td.large-offset-#{$i}.last,
168 | th.large-offset-#{$i},
169 | th.large-offset-#{$i}.first,
170 | th.large-offset-#{$i}.last {
171 | //1.5 takes in effect a whole empty cell.
172 | padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
173 | }
174 | }
175 |
176 | td.expander,
177 | th.expander {
178 | visibility: hidden;
179 | width: 0;
180 | padding: 0 !important;
181 | }
182 |
183 | // adds radius to container
184 | table.container.radius {
185 | border-radius: $container-radius;
186 | border-collapse: separate;
187 | }
188 |
--------------------------------------------------------------------------------
/scss/settings/_settings.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails Settings
2 | // ------------------------------
3 | //
4 | // Table of Contents:
5 | //
6 | // 1. Global
7 | // 2. Grid
8 | // 3. Block Grid
9 | // 4. Typography
10 | // 5. Button
11 | // 6. Callout
12 | // 7. Menu
13 | // 8. Thumbnail
14 |
15 |
16 | // 1. Global
17 | // ---------
18 |
19 | $primary-color: #2199e8;
20 | $secondary-color: #777777;
21 | $success-color: #3adb76;
22 | $warning-color: #ffae00;
23 | $alert-color: #ec5840;
24 | $light-gray: #f3f3f3;
25 | $medium-gray: #cacaca;
26 | $dark-gray: #8a8a8a;
27 | $black: #0a0a0a;
28 | $white: #fefefe;
29 | $pre-color: #ff6908;
30 | $global-width: 580px;
31 | $global-width-small: 95%;
32 | $global-gutter: 16px;
33 | $global-gutter-small: $global-gutter;
34 | $body-background: $light-gray;
35 | $container-background: $white;
36 | $global-padding: 16px;
37 | $global-margin: 16px;
38 | $global-radius: 3px;
39 | $global-rounded: 500px;
40 | $global-breakpoint: $global-width + $global-gutter;
41 |
42 | // 2. Grid
43 | // -------
44 |
45 | $grid-column-count: 12;
46 | $column-padding-bottom: $global-padding;
47 | $container-radius: 0;
48 |
49 | // 3. Block Grid
50 | // -------------
51 |
52 | $block-grid-max: 8;
53 | $block-grid-gutter: $global-gutter;
54 |
55 | // 4. Typography
56 | // -------------
57 |
58 | $global-font-color: $black;
59 | $body-font-family: Helvetica, Arial, sans-serif;
60 | $global-font-weight: normal;
61 | $header-color: inherit;
62 | $global-line-height: 130%;
63 | $global-font-size: 16px;
64 | $body-line-height: $global-line-height;
65 | $header-font-family: $body-font-family;
66 | $header-font-weight: $global-font-weight;
67 | $h1-font-size: floor($global-font-size * 2.125);
68 | $h2-font-size: floor($global-font-size * 1.875);
69 | $h3-font-size: floor($global-font-size * 1.75);
70 | $h4-font-size: floor($global-font-size * 1.5);
71 | $h5-font-size: floor($global-font-size * 1.2);
72 | $h6-font-size: floor($global-font-size * 1.125);
73 | $header-margin-bottom: 10px;
74 | $paragraph-margin-bottom: 10px;
75 | $small-font-size: 80%;
76 | $small-font-color: $medium-gray;
77 | $lead-font-size: $global-font-size * 1.25;
78 | $lead-line-height: 160%;
79 | $text-padding: 10px;
80 | $subheader-lineheight: 1.4;
81 | $subheader-color: $dark-gray;
82 | $subheader-font-weight: $global-font-weight;
83 | $subheader-margin-top: 4px;
84 | $subheader-margin-bottom: 8px;
85 | $hr-width: $global-width;
86 | $hr-border: 1px solid $black;
87 | $hr-margin: 20px;
88 | $hr-align: center;
89 | $anchor-text-decoration: none;
90 | $anchor-color: $primary-color;
91 | $anchor-color-visited: $anchor-color;
92 | $anchor-color-hover: darken($primary-color, 10%);
93 | $anchor-color-active: $anchor-color-hover;
94 | $stat-font-size: 40px;
95 | $remove-ios-blue: true;
96 |
97 | // 5. Button
98 | // ---------
99 |
100 | $button-padding: (
101 | tiny: 4px 8px 4px 8px,
102 | small: 5px 10px 5px 10px,
103 | default: 8px 16px 8px 16px,
104 | large: 10px 20px 10px 20px,
105 | );
106 | $button-font-size: (
107 | tiny: 10px,
108 | small: 12px,
109 | default: 16px,
110 | large: 20px,
111 | );
112 | $button-color: $white;
113 | $button-color-alt: $medium-gray;
114 | $button-font-weight: bold;
115 | $button-margin: 0 0 $global-margin 0;
116 | $button-background: $primary-color;
117 | $button-border: 2px solid $button-background;
118 | $button-radius: $global-radius;
119 | $button-rounded: $global-rounded;
120 |
121 | // 6. Callout
122 | // ----------
123 |
124 | $callout-background: $white;
125 | $callout-background-fade: 85%;
126 | $callout-padding: 10px;
127 | $callout-padding-small: $callout-padding;
128 | $callout-margin-bottom: $global-margin;
129 | $callout-border: 1px solid darken($callout-background, 20%);
130 | $callout-border-primary: 1px solid darken($primary-color, 20%);
131 | $callout-border-secondary: 1px solid darken($secondary-color, 20%);
132 | $callout-border-success: 1px solid darken($success-color, 20%);
133 | $callout-border-warning: 1px solid darken($warning-color, 20%);
134 | $callout-border-alert: 1px solid darken($alert-color, 20%);
135 |
136 | // 7. Menu
137 | // -------
138 |
139 | $menu-item-padding: 10px;
140 | $menu-item-gutter: 10px;
141 | $menu-item-color: $primary-color;
142 |
143 | // 8. Thumbnail
144 | // ------------
145 |
146 | $thumbnail-border: solid 4px $white;
147 | $thumbnail-margin-bottom: $global-margin;
148 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
149 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
150 | $thumbnail-transition: box-shadow 200ms ease-out;
151 | $thumbnail-radius: $global-radius;
152 |
153 |
--------------------------------------------------------------------------------
/scss/util/_util.scss:
--------------------------------------------------------------------------------
1 | // Foundation for Emails by ZURB
2 | // foundation.zurb.com
3 | // Licensed under MIT Open Source
4 | @use "sass:math";
5 |
6 | /// Calculates a percentage value for a grid column width.
7 | /// @access private
8 | /// @param {number} $colNumber - Column count of the column.
9 | /// @param {number} $totalColumns - Column count of the entire row.
10 | /// @returns {number} A percentage width value.
11 | @function -zf-grid-calc-pct($colNumber, $totalColumns) {
12 | @return math.div(floor(percentage(math.div($colNumber, $totalColumns)) * 1000000), 1000000);
13 | }
14 |
15 | /// Calculates a pixel value for a grid column width.
16 | /// @access private
17 | /// @param {number} $columnNumber - Column count of the column.
18 | /// @param {number} $totalColumns - Column count of the entire row.
19 | /// @param {number} $containerWidth - Width of the surrounding container, in pixels.
20 | /// @returns {number} A pixel width value.
21 | @function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
22 | @return (math.div($containerWidth, $totalColumns) * $columnNumber - $global-gutter);
23 | }
24 |
--------------------------------------------------------------------------------
/templates/basic.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 |
3 | .header {
4 | background: #8a8a8a;
5 | }
6 |
7 | .header .columns {
8 | padding-bottom: 0;
9 | }
10 |
11 | .header p {
12 | color: #fff;
13 | margin-bottom: 0;
14 | }
15 |
16 | .header .wrapper-inner {
17 | padding: 20px; /*controls the height of the header*/
18 | }
19 |
20 | .header .container {
21 | background: #8a8a8a;
22 | }
23 |
24 | .wrapper.secondary {
25 | background: #f3f3f3;
26 | }
27 |
28 | </style>
29 | <!-- move the above styles into your custom stylesheet -->
30 |
31 |
32 | <wrapper class="header" bgcolor="#8a8a8a">
33 | <container>
34 | <row class="collapse">
35 | <columns small="6" valign="middle">
36 | <img src="http://placehold.it/200x50/663399">
37 | </columns>
38 | <columns small="6" valign="middle">
39 | <p class="text-right">BASIC</p>
40 | </columns>
41 | </row>
42 | </container>
43 | </wrapper>
44 |
45 | <container>
46 |
47 | <spacer size="16"></spacer>
48 |
49 | <row>
50 | <columns>
51 |
52 | <h1>Hi, Susan Calvin</h1>
53 | <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
54 | <p>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?</p>
55 | <callout class="primary">
56 | <p>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!</p>
57 | </callout>
58 |
59 | </columns>
60 | </row>
61 |
62 | <wrapper class="secondary">
63 | <spacer size="16"></spacer>
64 | <row>
65 | <columns small="12" large="6">
66 | <h5>Connect With Us:</h5>
67 | <menu class="vertical">
68 | <item style="text-align: left;" href="#">Twitter</item>
69 | <item style="text-align: left;" href="#">Facebook</item>
70 | <item style="text-align: left;" href="#">Google +</item>
71 | </menu>
72 | </columns>
73 | <columns small="12" large="6">
74 | <h5>Contact Info:</h5>
75 | <p>Phone: 408-341-0600</p>
76 | <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
77 | </columns>
78 | </row>
79 | </wrapper>
80 |
81 | </container>
--------------------------------------------------------------------------------
/templates/drip.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 |
8 | .container.header {
9 | background: #f3f3f3;
10 | }
11 |
12 | .body-drip {
13 | border-top: 8px solid #663399;
14 | }
15 | </style>
16 | <!-- move the above styles into your custom stylesheet -->
17 |
18 |
19 | <spacer size="16"></spacer>
20 |
21 | <container class="header">
22 | <row class="collapse">
23 | <columns>
24 | <img src="http://placehold.it/150x30/663399" alt="">
25 | </columns>
26 | </row>
27 | </container>
28 |
29 | <container class="body-drip">
30 |
31 | <spacer size="16"></spacer>
32 |
33 | <center>
34 | <img src="http://placehold.it/120/663399" alt="">
35 | </center>
36 |
37 | <spacer size="16"></spacer>
38 |
39 | <row>
40 | <columns>
41 | <h4 class="text-center">Responsive Emails</h4>
42 | <p class="text-center">15 sections | 567 Min</p>
43 | </columns>
44 | </row>
45 |
46 | <hr/>
47 |
48 | <row>
49 | <columns>
50 | <p class="text-center">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.</p>
51 | <center>
52 | <button href="#" class="success">Get smarter now ↣</button>
53 | </center>
54 | </columns>
55 | </row>
56 |
57 | <row class="collapsed footer">
58 | <columns>
59 | <spacer size="16"></spacer>
60 | <p class="text-center">@copywrite nobody<br/>
61 | <a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
62 | <center>
63 | <menu>
64 | <item><img src="http://placehold.it/25/663399" alt=""></item>
65 | <item><img src="http://placehold.it/25/663399" alt=""></item>
66 | <item><img src="http://placehold.it/25/663399" alt=""></item>
67 | <item><img src="http://placehold.it/25/663399" alt=""></item>
68 | <item><img src="http://placehold.it/25/663399" alt=""></item>
69 | </menu>
70 | </center>
71 | </columns>
72 | </row>
73 |
74 | </container>
--------------------------------------------------------------------------------
/templates/hero.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 |
3 | .header {
4 | background: #8a8a8a;
5 | }
6 |
7 | .header .columns {
8 | padding-bottom: 0;
9 | }
10 |
11 | .header p {
12 | color: #fff;
13 | margin-bottom: 0;
14 | }
15 |
16 | .header .wrapper-inner {
17 | padding: 20px; /*controls the height of the header*/
18 | }
19 |
20 | .header .container {
21 | background: #8a8a8a;
22 | }
23 |
24 | .wrapper.secondary {
25 | background: #f3f3f3;
26 | }
27 |
28 | </style>
29 | <!-- move the above styles into your custom stylesheet -->
30 |
31 | <wrapper class="header">
32 | <container>
33 | <row class="collapse">
34 | <columns small="6">
35 | <img src="http://placehold.it/200x50/663399">
36 | </columns>
37 | <columns small="6">
38 | <p class="text-right">HERO</p>
39 | </columns>
40 | </row>
41 | </container>
42 | </wrapper>
43 |
44 | <container>
45 |
46 | <spacer size="16"></spacer>
47 |
48 | <row>
49 | <columns small="12">
50 | <h1>Hi, Elijah Baily</h1>
51 | <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
52 | <img src="http://placehold.it/548x300" alt="">
53 | <callout class="primary">
54 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
55 | </callout>
56 | <h2>Title Ipsum <small>This is a note.</small></h2>
57 | <p>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.</p>
58 |
59 | <button class="large secondary" href="#">Click Me!</button>
60 |
61 | </columns>
62 | </row>
63 |
64 | <wrapper class="secondary">
65 | <spacer size="16"></spacer>
66 | <row>
67 | <columns small="12" large="6">
68 | <h5>Connect With Us:</h5>
69 | <menu class="vertical" align="left">
70 | <item style="text-align: left;" href="#">Twitter</item>
71 | <item style="text-align: left;" href="#">Facebook</item>
72 | <item style="text-align: left;" href="#">Google +</item>
73 | </menu>
74 | </columns>
75 | <columns small="12" large="6">
76 | <h5>Contact Info:</h5>
77 | <p>Phone: 408-341-0600</p>
78 | <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
79 | </columns>
80 | </row>
81 | </wrapper>
82 |
83 | <center>
84 | <menu>
85 | <item href="#">Terms</item>
86 | <item href="#">Privacy</item>
87 | <item href="#">Unsubscribe</item>
88 | </menu>
89 | </center>
90 |
91 | </container>
92 |
--------------------------------------------------------------------------------
/templates/marketing.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 | </style>
8 | <!-- move the above styles into your custom stylesheet -->
9 |
10 |
11 | <spacer size="16"></spacer>
12 |
13 | <container>
14 | <row>
15 | <columns large="4">
16 | <center>
17 | <img src="http://placehold.it/125x200">
18 | </center>
19 | </columns>
20 | <columns large="8">
21 | <h1>Do Something Radical With This App.</h1>
22 | <button class="large" href="#">Sign Up</button>
23 | </columns>
24 | </row>
25 |
26 | <spacer size="16"></spacer>
27 |
28 | <row>
29 | <columns>
30 | <h3 class="text-center">It's Never Been Easier to Do Things.</h3>
31 | <p class="text-center">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.</p>
32 | </columns>
33 | </row>
34 | <row>
35 | <columns large="4">
36 | <center>
37 | <img src="http://placehold.it/50x50">
38 | </center>
39 | <h5 class="text-center">Feature One</h5>
40 | <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
41 | </columns>
42 | <columns large="4">
43 | <center>
44 | <img src="http://placehold.it/50x50">
45 | </center>
46 | <h5 class="text-center">Feature Two</h5>
47 | <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
48 | </columns>
49 | <columns large="4">
50 | <center>
51 | <img src="http://placehold.it/50x50">
52 | </center>
53 | <h5 class="text-center">Feature Three</h5>
54 | <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
55 | </columns>
56 | </row>
57 |
58 | <spacer size="16"></spacer>
59 |
60 | <row>
61 | <columns>
62 | <h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
63 |
64 | <spacer size="16"></spacer>
65 |
66 | <button class="large expand" href="#">Sign Up</button>
67 | </columns>
68 | </row>
69 |
70 | <row class="collapsed footer">
71 | <columns>
72 | <spacer size="16"></spacer>
73 | <p class="text-center">@copywrite nobody<br/>
74 | <a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
75 | <center>
76 | <menu>
77 | <item><img src="http://placehold.it/25" alt=""></item>
78 | <item><img src="http://placehold.it/25" alt=""></item>
79 | <item><img src="http://placehold.it/25" alt=""></item>
80 | <item><img src="http://placehold.it/25" alt=""></item>
81 | <item><img src="http://placehold.it/25" alt=""></item>
82 | </menu>
83 | </center>
84 | </columns>
85 | </row>
86 |
87 | <spacer size="16"></spacer>
88 |
89 | </container>
90 |
--------------------------------------------------------------------------------
/templates/newsletter-2.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 | </style>
8 | <!-- move the above styles into your custom stylesheet -->
9 |
10 | <spacer size="16"></spacer>
11 |
12 | <container>
13 |
14 | <spacer size="16"></spacer>
15 |
16 | <row>
17 | <columns>
18 | <center>
19 | <img src="http://placehold.it/548x200">
20 | </center>
21 | </columns>
22 | </row>
23 | <row>
24 | <columns large="8">
25 | <h2>This is a title</h2>
26 | <p>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.</p>
27 | <p><a href="#">Learn more</a></p>
28 | </columns>
29 | <columns large="4">
30 | <img class="small-float-center" src="http://placehold.it/170x129" width="170" alt="">
31 | </columns>
32 | </row>
33 | <row>
34 | <columns large="6">
35 | <h4>Sub Section Title</h4>
36 | <p>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.</p>
37 | <p>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.</p>
38 | </columns>
39 | <columns large="6">
40 | <h4>Sub Section Title</h4>
41 | <p>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.</p>
42 | <p>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.</p>
43 | </columns>
44 | </row>
45 | <row>
46 | <columns>
47 | <p>You received this email because you're signed up to receive updates from us. <a href="#">Click here to unsubscribe.</a></p>
48 | </columns>
49 | </row>
50 | </container>
51 |
--------------------------------------------------------------------------------
/templates/newsletter.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 | </style>
8 | <!-- move the above styles into your custom stylesheet -->
9 |
10 | <container>
11 |
12 | <spacer size="16"></spacer>
13 |
14 | <row>
15 | <columns>
16 | <h1 class="text-center">The Insider</h1>
17 | <center>
18 | <img src="http://placehold.it/500x200">
19 | </center>
20 |
21 | <spacer size="16"></spacer>
22 |
23 | <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa itaque illo doloribus soluta expedita dolores commodi fuga odit.</p>
24 | <p>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.</p>
25 | <p>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.</p>
26 |
27 | <row>
28 | <columns large="6">
29 | <h4>More Reading:</h4>
30 | <ul>
31 | <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
32 | <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
33 | <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
34 | </ul>
35 | </columns>
36 | <columns>
37 | <h4>Get Involved:</h4>
38 | <ul>
39 | <li><a href="#">Facebook</a></li>
40 | <li><a href="#">Twitter</a></li>
41 | <li><a href="#">Instagram</a></li>
42 | </ul>
43 | </columns>
44 | </row>
45 |
46 | <p><small>You received this email because you're signed up to get updates from us. <a href="#">Click here to unsubscribe.</a></small></p>
47 | </columns>
48 | </row>
49 | </container>
50 |
--------------------------------------------------------------------------------
/templates/order.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 | </style>
8 | <!-- move the above styles into your custom stylesheet -->
9 |
10 | <spacer size="16"></spacer>
11 |
12 | <container>
13 |
14 | <spacer size="16"></spacer>
15 |
16 | <row>
17 | <columns>
18 | <h1>Thanks for your order.</h1>
19 | <p>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.</p>
20 |
21 | <spacer size="16"></spacer>
22 |
23 | <callout class="secondary">
24 | <row>
25 | <columns large="6">
26 | <p>
27 | <strong>Payment Method</strong><br/>
28 | Dubloons
29 | </p>
30 | <p>
31 | <strong>Email Address</strong><br/>
32 | thecapn@pirates.org
33 | </p>
34 | <p>
35 | <strong>Order ID</strong><br/>
36 | 239235983749636
37 | </p>
38 | </columns>
39 | <columns large="6">
40 | <p>
41 | <strong>Shipping Method</strong><br/>
42 | Boat (1–2 weeks)<br/>
43 | <strong>Shipping Address</strong><br/>
44 | Captain Price<br/>
45 | 123 Maple Rd<br/>
46 | Campbell, CA 95112
47 | </p>
48 | </columns>
49 | </row>
50 | </callout>
51 |
52 | <h4>Order Details</h4>
53 |
54 | <table>
55 | <tr><th>Item</th><th>#</th><th>Price</th></tr>
56 | <tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
57 | <tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
58 | <tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
59 | <tr>
60 | <td colspan="2"><b>Subtotal:</b></td>
61 | <td>$600</td>
62 | </tr>
63 | </table>
64 |
65 | <hr/>
66 |
67 | <h4>What's Next?</h4>
68 |
69 | <p>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?</p>
70 | </columns>
71 | </row>
72 | <row class="footer text-center">
73 | <columns large="3">
74 | <img src="http://placehold.it/170x30" alt="">
75 | </columns>
76 | <columns large="3">
77 | <p>
78 | Call us at 800.555.1923<br/>
79 | Email us at support@discount.boat
80 | </p>
81 | </columns>
82 | <columns large="3">
83 | <p>
84 | 123 Maple Rd<br/>
85 | Campbell, CA 95112
86 | </p>
87 | </columns>
88 | </row>
89 | </container>
90 |
--------------------------------------------------------------------------------
/templates/password.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 |
8 | .header {
9 | background: #f3f3f3;
10 | }
11 | </style>
12 | <!-- move the above styles into your custom stylesheet -->
13 |
14 | <spacer size="16"></spacer>
15 |
16 | <container>
17 |
18 | <row class="header">
19 | <columns>
20 |
21 | <spacer size="16"></spacer>
22 |
23 | <h4 class="text-center">Pirate Retirement Services</h4>
24 | </columns>
25 | </row>
26 | <row>
27 | <columns>
28 |
29 | <spacer size="32"></spacer>
30 |
31 | <center>
32 | <img src="http://placehold.it/250x250">
33 | </center>
34 |
35 | <spacer size="16"></spacer>
36 |
37 | <h1 class="text-center">Forgot Your Password?</h1>
38 |
39 | <spacer size="16"></spacer>
40 |
41 | <p class="text-center">It happens. Click the link below to reset your password.</p>
42 | <button class="large expand" href="#">Reset Password</button>
43 |
44 | <hr/>
45 |
46 | <p><small>You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, <a href="#">unsubscribe here</a>.</small></p>
47 | </columns>
48 | </row>
49 |
50 | <spacer size="16"></spacer>
51 | </container>
52 |
--------------------------------------------------------------------------------
/templates/sidebar-hero.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 |
3 | .header {
4 | background: #8a8a8a;
5 | }
6 |
7 | .header .columns {
8 | padding-bottom: 0;
9 | }
10 |
11 | .header p {
12 | color: #fff;
13 | margin-bottom: 0;
14 | }
15 |
16 | .header .wrapper-inner {
17 | padding: 20px; /*controls the height of the header*/
18 | }
19 |
20 | .header .container {
21 | background: #8a8a8a;
22 | }
23 |
24 | .wrapper.secondary {
25 | background: #f3f3f3;
26 | }
27 |
28 | </style>
29 | <!-- move the above styles into your custom stylesheet -->
30 |
31 | <spacer size="16"></spacer>
32 |
33 | <wrapper class="header" bgcolor="#8a8a8a">
34 | <container>
35 | <row class="collapse">
36 | <columns small="6" valign="middle">
37 | <img src="http://placehold.it/200x50/663399">
38 | </columns>
39 | <columns small="6" valign="middle">
40 | <p class="text-right">Sidebar Hero</p>
41 | </columns>
42 | </row>
43 | </container>
44 | </wrapper>
45 |
46 | <container>
47 |
48 | <spacer size="16"></spacer>
49 |
50 | <row>
51 | <columns>
52 | <h1>Hi, Elijah Baily</h1>
53 | <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
54 | <center>
55 | <img src="http://placehold.it/548x300" alt="">
56 | </center>
57 | <callout class="primary">
58 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
59 | </callout>
60 | </columns>
61 | </row>
62 | <row>
63 | <columns large="7">
64 | <h3>Hello, Han Fastolfe</h3>
65 | <p>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?</p>
66 | <p>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.</p>
67 | <callout class="secondary">
68 | 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. <a href="#">Click It!</a>
69 | </callout>
70 | <p>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!</p>
71 | <p>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.</p>
72 | <button class="expand" href="#">Click Me!</button>
73 | </columns>
74 | <columns large="5" class="sidebar">
75 | <callout class="secondary">
76 | <h5>Header</h5>
77 | <p class="lead">Sub-header</p>
78 | <p><a href="#">Just a Plain Link »</a></p>
79 | <p><a href="#">Just a Plain Link »</a></p>
80 | <p><a href="#">Just a Plain Link »</a></p>
81 | <p><a href="#">Just a Plain Link »</a></p>
82 | <p><a href="#">Just a Plain Link »</a></p>
83 | </callout>
84 | <callout class="secondary">
85 | <h6>CONNECT WITH US:</h6>
86 | <button class="facebook expand" href="#">Facebook</button>
87 | <button class="twitter expand" href="#">Twitter</button>
88 | <button class="google expand" href="#">Google+</button>
89 | <p>CONTACT INFO:</p>
90 | <p>Phone: 408-341-0600</p>
91 | <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
92 | </callout>
93 | </columns>
94 | </row>
95 |
96 | <center>
97 | <menu>
98 | <item href="#">Terms</item>
99 | <item href="#">Privacy</item>
100 | <item href="#">Unsubscribe</item>
101 | </menu>
102 | </center>
103 |
104 | </container>
105 |
--------------------------------------------------------------------------------
/templates/sidebar.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 |
3 | .header {
4 | background: #8a8a8a;
5 | }
6 |
7 | .header .columns {
8 | padding-bottom: 0;
9 | }
10 |
11 | .header p {
12 | color: #fff;
13 | margin-bottom: 0;
14 | }
15 |
16 | .header .wrapper-inner {
17 | padding: 20px; /*controls the height of the header*/
18 | }
19 |
20 | .header .container {
21 | background: #8a8a8a;
22 | }
23 |
24 | .wrapper.secondary {
25 | background: #f3f3f3;
26 | }
27 |
28 | </style>
29 | <!-- move the above styles into your custom stylesheet -->
30 |
31 | <spacer size="16"></spacer>
32 |
33 | <wrapper class="header" bgcolor="#8a8a8a">
34 | <container>
35 | <row class="collapse">
36 | <columns small="6" valign="middle">
37 | <img src="http://placehold.it/200x50/663399">
38 | </columns>
39 | <columns small="6" valign="middle">
40 | <p class="text-right">Sidebar</p>
41 | </columns>
42 | </row>
43 | </container>
44 | </wrapper>
45 |
46 | <container>
47 |
48 | <spacer size="16"></spacer>
49 |
50 | <row>
51 | <columns large="7">
52 | <h2>Hello, Han Fastolfe</h2>
53 | <p>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?</p>
54 | <p>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.</p>
55 | <callout class="secondary">
56 | 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. <a href="#">Click It!</a>
57 | </callout>
58 | <p>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!</p>
59 | <p>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.</p>
60 | <button class="expand" href="#">Click Me!</button>
61 | </columns>
62 | <columns large="5" class="sidebar">
63 | <callout class="secondary">
64 | <h5>Header</h5>
65 | <p class="lead">Sub-header</p>
66 | <p><a href="#">Just a Plain Link »</a></p>
67 | <p><a href="#">Just a Plain Link »</a></p>
68 | <p><a href="#">Just a Plain Link »</a></p>
69 | <p><a href="#">Just a Plain Link »</a></p>
70 | <p><a href="#">Just a Plain Link »</a></p>
71 | </callout>
72 | <callout class="secondary">
73 | <h6>CONNECT WITH US:</h6>
74 | <button class="facebook expand" href="#">Facebook</button>
75 | <button class="twitter expand" href="#">Twitter</button>
76 | <button class="google expand" href="#">Google+</button>
77 | <p>CONTACT INFO:</p>
78 | <p>Phone: 408-341-0600</p>
79 | <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
80 | </callout>
81 | </columns>
82 | </row>
83 | <row>
84 | <columns>
85 | <center>
86 | <menu>
87 | <item href="#">Terms</item>
88 | <item href="#">Privacy</item>
89 | <item href="#">Unsubscribe</item>
90 | </menu>
91 | </center>
92 | </columns>
93 | </row>
94 | </container>
95 |
--------------------------------------------------------------------------------
/templates/welcome.html:
--------------------------------------------------------------------------------
1 | <style type="text/css">
2 | body,
3 | html,
4 | .body {
5 | background: #f3f3f3 !important;
6 | }
7 |
8 | .container.header {
9 | background: #f3f3f3;
10 | }
11 |
12 | .body-border {
13 | border-top: 8px solid #663399;
14 | }
15 | </style>
16 | <!-- move the above styles into your custom stylesheet -->
17 |
18 | <spacer size="16"></spacer>
19 |
20 | <container class="header">
21 | <row>
22 | <columns>
23 | <h1 class="text-center">Welcome to Kraken Academy</h1>
24 |
25 | <center>
26 | <menu class="text-center">
27 | <item href="#">About</item>
28 | <item href="#">Course List</item>
29 | <item href="#">Campus Map</item>
30 | <item href="#">Contact</item>
31 | </menu>
32 | </center>
33 |
34 | </columns>
35 | </row>
36 | </container>
37 |
38 | <container class="body-border">
39 | <row>
40 | <columns>
41 |
42 | <spacer size="32"></spacer>
43 |
44 | <center>
45 | <img src="http://placehold.it/200x200">
46 | </center>
47 |
48 | <spacer size="16"></spacer>
49 |
50 | <h4>An exciting future of terrorizing sailors awaits you at Kraken Academy.</h4>
51 | <p>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.</p>
52 |
53 | <center>
54 | <menu>
55 | <item href="#">krakenacademy.com</item>
56 | <item href="#">Facebook</item>
57 | <item href="#">Twitter</item>
58 | <item href="#">(408)-555-0123</item>
59 | </menu>
60 | </center>
61 |
62 | </columns>
63 | </row>
64 |
65 | <spacer size="16"></spacer>
66 | </container>
67 |
--------------------------------------------------------------------------------
/test/visual/_template.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 | <html xmlns="http://www.w3.org/1999/xhtml">
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 | <meta name="viewport" content="width=device-width" />
6 | <title>Title</title>
7 | <link rel="stylesheet" href="../assets/css/foundation-emails.css" />
8 | </head>
9 |
10 | <body>
11 | <!-- <style> -->
12 | <table class="body" data-made-with-foundation>
13 | <tr>
14 | <td class="float-center" align="center" valign="top">
15 | <center>
16 | <%= contents %>
17 | </center>
18 | </td>
19 | </tr>
20 | </table>
21 | </body>
22 | </html>
23 |
--------------------------------------------------------------------------------
/test/visual/assets:
--------------------------------------------------------------------------------
1 | ../../_build/assets
--------------------------------------------------------------------------------
/test/visual/pages/alignment.html:
--------------------------------------------------------------------------------
1 | <style>
2 | .columns {
3 | border: 1px solid dodgerblue;
4 | }
5 | </style>
6 |
7 | <container>
8 | <row>
9 | <columns class="small-4 large-4 columns first">
10 | <center>Centered Text</center>
11 | </columns>
12 | <columns class="small-4 large-4 columns">
13 | <center>Centered Text</center>
14 | </columns>
15 | <columns class="small-4 large-4 columns last">
16 | <center>Centered Text</center>
17 | </columns>
18 | </row>
19 | </container>
20 |
21 | <container>
22 | <row>
23 | <columns small="12" large="12">
24 | <p class="text-center">Centered Text</p>
25 | <h4 class="text-center">Centered Text</h4>
26 | <p class="text-right">Right Text</p>
27 | <h4 class="text-right">Right Text</h4>
28 | <p class="text-left">Left Text</p>
29 | <h4 class="text-left">Left Text</h4>
30 | <br/>
31 | <p>Center on all clients</p>
32 | <center>
33 | <img src="http://placehold.it/200?text=center" alt="">
34 | </center>
35 | <br/>
36 | <p>Center on all clients except Outlook 2007, 10, 13</p>
37 | <img class="float-center" src="http://placehold.it/200?text=center" alt="">
38 | <img class="float-right" src="http://placehold.it/200?text=right" alt="">
39 | <img class="float-left" src="http://placehold.it/200?text=left" alt="">
40 |
41 | </columns>
42 | </row>
43 | </container>
44 |
45 | <container>
46 | <row>
47 | <columns small="12" large="12">
48 | <row>
49 | <columns small="12" large="12">
50 | <p>Center on all (nested columns)</p>
51 | <center>
52 | <img src="http://placehold.it/200?text=center" alt="">
53 | </center>
54 | </columns>
55 | </row>
56 | </columns>
57 | </row>
58 | </container>
59 |
60 | <container>
61 | <row>
62 | <columns small="12" large="12">
63 | <row>
64 | <columns small="6" large="6">
65 | <p>Center on all (nested columns)</p>
66 | <center>
67 | <img src="http://placehold.it/200?text=center" alt="">
68 | </center>
69 | </columns>
70 | <columns small="6" large="6">
71 | <p>Center on all (nested columns)</p>
72 | <center>
73 | <img src="http://placehold.it/200?text=center" alt="">
74 | </center>
75 | </columns>
76 | </row>
77 | </columns>
78 | </row>
79 | </container>
80 |
81 | <container>
82 | <row>
83 | <columns small="4"></columns>
84 | <columns small="4">Centering a column</columns>
85 | <columns small="4"></columns>
86 | </row>
87 |
88 | <center>
89 | <button href="#">Center</button>
90 | </center>
91 |
92 | <row>
93 | <columns small="6" large="6">
94 | <p>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.</p>
95 | <center>
96 | <button href="#">Center</button>
97 | </center>
98 | </columns>
99 | <columns small="6" large="6">
100 | <p>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.</p>
101 | <center>
102 | <button href="#">Center</button>
103 | </center>
104 | </columns>
105 | </row>
106 |
107 | <row>
108 | <columns small="12" large="4">
109 | <callout>
110 | <h3 class="small-text-center">Presentations<span>8</span></h3>
111 | <spacer size="35"></spacer>
112 | <center>
113 | <img src="http://placehold.it/74x50">
114 | </center>
115 | <spacer size="40"></spacer>
116 | </callout>
117 | </columns>
118 | <columns small="12" large="8">
119 | <p>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.</p>
120 | </columns>
121 | </row>
122 |
123 | <button class="success" href="https://litmus.com/checklist/emails/public/120ca5f">Passing Tests</button>
124 |
125 | </container>
126 |
--------------------------------------------------------------------------------
/test/visual/pages/anchor.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row class="collapse">
3 | <columns small="12" large="12">
4 | <h1>Testing to see if nasty phone and iOS links can be removed.</h1>
5 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptates placeat laudantium, nihil minus commodi incidunt <a href="tel:1-408-555-5555">513-555-5555</a> magni, accusamus vitae nemo? Sit, minima. Dolorem nisi quaerat voluptatum nobis, numquam saepe hic. 123 locust st santa cruz, ca 95060</p>
6 | </columns>
7 | </row>
8 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/attributes.html:
--------------------------------------------------------------------------------
1 | <container>
2 |
3 | <spacer size="32"></spacer>
4 |
5 | the row should have dir="rtl"
6 | <row dir="rtl">
7 | <columns large="4" valign="middle" align="center">
8 | <img class="small-float-center" src="http://placehold.it/300x200/345" alt="">
9 | </columns>
10 | <columns large="8">
11 | <h4>HEADLINE</h4>
12 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!</p>
13 | </columns>
14 | </row>
15 |
16 | <row>
17 | <columns large="4" valign="middle">
18 | <img class="small-float-center" src="http://placehold.it/300x200/621" alt="">
19 | </columns>
20 | <columns large="8">
21 | <h4>HEADLINE</h4>
22 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, soluta aliquam dolor error nisi, dolorum rem voluptatem placeat temporibus eveniet vel distinctio!</p>
23 | </columns>
24 | </row>
25 |
26 | the row should have dir="rtl", the columns should have valign and align attributes
27 |
28 | <row dir="rtl">
29 | <columns large="4" valign="middle" align="center">
30 | <img class="small-float-center" src="http://placehold.it/250/349" alt="">
31 | </columns>
32 | <columns large="8" valign="middle" align="center">
33 | <h4 style="margin-bottom: 0;" class="text-right">HEADLINE</h4>
34 | <p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
35 | </columns>
36 | </row>
37 |
38 | the items should have target="_blank"
39 | <center>
40 | <menu>
41 | <item target="_blank" href="http://zurb.com">Item</item>
42 | <item target="_blank" href="http://zurb.com">Item</item>
43 | <item target="_blank" href="http://zurb.com">Item</item>
44 | </menu>
45 | </center>
46 | </container>
47 |
--------------------------------------------------------------------------------
/test/visual/pages/block-inky.html:
--------------------------------------------------------------------------------
1 | <style>
2 | .block-grid p {
3 | background: dodgerblue;
4 | text-align: center !important;
5 | color: white !important;
6 | }
7 | </style>
8 |
9 | <container>
10 | <block-grid up="2">
11 | <td><p>one</p></td>
12 | <td><p>two</p></td>
13 | </block-grid>
14 | <block-grid up="3">
15 | <td><p>one</p></td>
16 | <td><p>two</p></td>
17 | <td><p>three</p></td>
18 | </block-grid>
19 | <block-grid up="4">
20 | <td><p>one</p></td>
21 | <td><p>two</p></td>
22 | <td><p>three</p></td>
23 | <td><p>four</p></td>
24 | </block-grid>
25 | <block-grid up="5">
26 | <td><p>one</p></td>
27 | <td><p>two</p></td>
28 | <td><p>three</p></td>
29 | <td><p>four</p></td>
30 | <td><p>five</p></td>
31 | </block-grid>
32 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/button-expanded-inky.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <p>Text should be centered</p>
3 | <p>hover on buttons should change pointer full width of button</p>
4 | <p>on small, should work the same</p>
5 | <row>
6 | <columns small="12" large="6">
7 | <button href="#" class="expanded">button</button>
8 | </columns>
9 | <columns small="12" large="6">
10 | <button href="#" class="expanded">example text 2</button>
11 | </columns>
12 | </row>
13 |
14 | <row>
15 | <columns small="6" large="6">
16 | <button href="#" class="expanded">button</button>
17 | </columns>
18 | <columns small="6" large="6">
19 | <button href="#" class="expanded">example text 2</button>
20 | </columns>
21 | </row>
22 |
23 | <row>
24 | <columns small="12" large="3">
25 | <button href="#" class="expanded">button</button>
26 | </columns>
27 | <columns small="12" large="9">
28 | <button href="#" class="expanded">example text 2</button>
29 | </columns>
30 | </row>
31 |
32 | <row>
33 | <columns small="12" large="4">
34 | <button href="#" class="expanded">button</button>
35 | </columns>
36 | <columns small="12" large="8">
37 | <button href="#" class="expanded">example text 2</button>
38 | </columns>
39 | </row>
40 |
41 | <row>
42 | <columns small="4" large="4">
43 | <button href="#" class="small expanded">button</button>
44 | </columns>
45 | <columns small="6" large="8">
46 | <button href="#" class="small expanded">example text 2</button>
47 | </columns>
48 | </row>
49 |
50 | <callout class="secondary">
51 | <row>
52 | <columns large="6">
53 | <h5>Connect With Us:</h5>
54 | <button class="facebook expanded" href="http://zurb.com">Facebook</button>
55 | <button class="twitter expanded" href="http://zurb.com">Twitter</button>
56 | <button class="google expanded" href="http://zurb.com">Google+</button>
57 | </columns>
58 | <columns large="6">
59 | <h5>Contact Info:</h5>
60 | <p>Phone: 408-341-0600</p>
61 | <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
62 | </columns>
63 | </row>
64 | </callout>
65 | <em>Make sure the above container is not greater than 600px or looks awkwardly too wide.</em>
66 | </container>
67 |
68 |
--------------------------------------------------------------------------------
/test/visual/pages/button-hollow.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns small="12" large="12">
4 | <button href="#" class="hollow">Default Hollow</button>
5 | <button href="#" class="hollow round secondary">Secondary Hollow</button>
6 | <button href="#" class="hollow radius success">Success Hollow</button>
7 | <button href="#" class="hollow warning">Warning Hollow</button>
8 | <button href="#" class="hollow alert expanded">Alert Hollow</button>
9 | </columns>
10 | </row>
11 | </container>
12 |
--------------------------------------------------------------------------------
/test/visual/pages/button-inky.html:
--------------------------------------------------------------------------------
1 | <style>
2 | .border {
3 | border-bottom: 3px solid blue;
4 | }
5 | </style>
6 | <container>
7 | <a href="https://litmus.com/checklist/emails/public/52b6fb8">Test Results - Passing 6/28/2016</a>
8 | <row>
9 | <columns small="12" large="12">
10 | <center>
11 | <button href="http://zurb.com" class="tiny" href="http://zurb.com">I am a tiny button</button>
12 | </center>
13 | </columns>
14 | </row>
15 | <row>
16 | <columns small="12" large="12">
17 | <button href="http://zurb.com" class="small" href="http://zurb.com">I am a small button</button>
18 | </columns>
19 | </row>
20 | <row>
21 | <columns small="12" large="12">
22 | <button href="http://zurb.com" class="" href="http://zurb.com">I am a default button</button>
23 | </columns>
24 | </row>
25 | <row>
26 | <columns small="12" large="12">
27 | <button href="http://zurb.com" class="large" href="http://zurb.com">I am a large button</button>
28 | </columns>
29 | </row>
30 | <row>
31 | <columns small="12" large="12">
32 | <button href="http://zurb.com" class="secondary" href="http://zurb.com">I am secondary</button>
33 | </columns>
34 | </row>
35 | <row>
36 | <columns small="12" large="12">
37 | <button href="http://zurb.com" class="success" href="http://zurb.com">I am successful</button>
38 | </columns>
39 | </row>
40 | <row>
41 | <columns small="12" large="12">
42 | <button class="alert" href="http://zurb.com">I alert</button>
43 | </columns>
44 | </row>
45 | <row>
46 | <columns small="12" large="12">
47 | <button class="warning" href="http://zurb.com">I warn</button>
48 | </columns>
49 | </row>
50 | <row>
51 | <columns small="12" large="12">
52 | <button href="http://zurb.com" class="expand">I expand</button>
53 | </columns>
54 | </row>
55 | <row>
56 | <columns small="12" large="12">
57 | Expand small only with center tag
58 | <center>
59 | <button href="http://zurb.com" class="small-expand">Expand small only</button>
60 | </center>
61 | </columns>
62 | </row>
63 | <row>
64 | <columns small="12" large="12">
65 | Expand small only
66 | <center>
67 | <button href="http://zurb.com" class="small-expand">Expand small only</button>
68 | </center>
69 | </columns>
70 | </row>
71 | <row>
72 | <columns small="12" large="12">
73 | <center>
74 | <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand and have lots of text</button>
75 | </columns>
76 | </row>
77 | <row>
78 | <columns small="12" large="12">
79 | Radius and round edges except Outlook 2007, 10, 13
80 | <button href="http://zurb.com" class="radius">I have a radius</button>
81 | <button href="http://zurb.com" class="radius secondary">I have a radius</button>
82 | <button href="http://zurb.com" class="radius alert">I have a radius</button>
83 | <button href="http://zurb.com" class="radius warning">I have a radius</button>
84 | </columns>
85 | </row>
86 | <row>
87 | <columns small="12" large="12">
88 | <button href="http://zurb.com" class="rounded">I am rounded</button>
89 | <button href="http://zurb.com" class="rounded secondary">I am rounded</button>
90 | <button href="http://zurb.com" class="rounded alert">I am rounded</button>
91 | <button href="http://zurb.com" class="rounded warning">I am rounded</button>
92 | </columns>
93 | </row>
94 | <row>
95 | <columns small="12" large="12">
96 | <center>
97 | <button href="http://zurb.com" class="radius">I am centered</button>
98 | </center>
99 | </columns>
100 | </row>
101 | <row>
102 | <columns small="12" large="12">
103 | <center>
104 | <button href="http://zurb.com" class="border">I am centered</button>
105 | </center>
106 | </columns>
107 | </row>
108 | <row>
109 | <columns small="12" large="12">
110 | <button href="http://zurb.com">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, qui aliquam rerum aliquid sapiente nulla et ipsa autem error, corporis hic! At temporibus aspernatur sed facilis odit harum, nobis fugit?</button>
111 | </columns>
112 | </row>
113 | <row>
114 | <columns small="12" large="12">
115 | <button class="expanded" href="http://zurb.com">Lorem ipsum </button>
116 | </columns>
117 | </row>
118 | </container>
119 |
--------------------------------------------------------------------------------
/test/visual/pages/callout-in-grid.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns>
4 | <callout class="secondary">
5 | <row>
6 | <columns>
7 | <p>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!</p>
8 | </columns>
9 | <columns>
10 | <p>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!</p>
11 | </columns>
12 | </row>
13 | </callout>
14 | <row>
15 | <columns small="6">
16 | <p>Not in a callout :(</p>
17 | </columns>
18 | <columns small="6">
19 | <callout class="secondary">
20 | <p>I'm in a callout!</p>
21 | </callout>
22 | </columns>
23 | </row>
24 |
25 | <callout class="primary">
26 | <row>
27 | <columns small="12">
28 | <p>This whole row is in a callout!</p>
29 | </columns>
30 | </row>
31 | </callout>
32 |
33 | <callout>
34 | <p>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.</p>
35 | </callout>
36 | <callout class="primary">
37 | <p>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.</p>
38 | </callout>
39 |
40 | <callout class="success">
41 | <p>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.</p>
42 | </callout>
43 |
44 | <callout class="warning">
45 | <p>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.</p>
46 | </callout>
47 |
48 | <callout class="alert">
49 | <p>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.</p>
50 | </callout>
51 |
52 | </columns>
53 | </row>
54 |
55 | </container>
56 |
--------------------------------------------------------------------------------
/test/visual/pages/center-width.html:
--------------------------------------------------------------------------------
1 | <!-- From https://github.com/zurb/foundation-emails/issues/185 -->
2 | <table class="container">
3 | <tbody><tr>
4 | <td>
5 | <table class="row ">
6 | <tbody><tr class="">
7 | <th class="columns first last small-12 large-12 ">
8 | <center>
9 | <p class="text-center">
10 | Sample text
11 | </p>
12 | </center>
13 | </th>
14 | </tr>
15 | </tbody></table>
16 | <table class="row collapse">
17 | <tbody><tr class="">
18 | <th class="columns first last small-12 large-12 ">
19 | <center>
20 | <p class="text-center">
21 | Sample text
22 | </p>
23 | </center>
24 | </th>
25 | </tr>
26 | </tbody></table>
27 | </td>
28 | </tr></tbody>
29 | </table>
30 |
--------------------------------------------------------------------------------
/test/visual/pages/container-radius.html:
--------------------------------------------------------------------------------
1 | <spacer size="100"></spacer>
2 |
3 | <container class="radius" style="border: 1px solid salmon;">
4 |
5 | <spacer size="100"></spacer>
6 |
7 | <row>
8 | <columns small="12" large="12">
9 | <h4>Container should have a border and border radius except on Outlook 2000, 02, 03, 07, 10, 13</h4>
10 | <p>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?</p>
11 | <p>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?</p>
12 | <p>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?</p>
13 | <p>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?</p>
14 | <p>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?</p>
15 | <p>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?</p>
16 | <p>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?</p>
17 | <p>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?</p>
18 | <p>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?</p>
19 | </columns>
20 | </row>
21 |
22 | <spacer size="100"></spacer>
23 |
24 | </container>
25 |
26 |
--------------------------------------------------------------------------------
/test/visual/pages/expander.html:
--------------------------------------------------------------------------------
1 |
2 | Test for image that shrinks in Outlook 2000, 2002, 2003. This is caused by the use of the .expander
3 | <container>
4 | <row>
5 | <columns small="12" large="3" class="large-offset-1">
6 | <img class="small-float-center" src="http://placehold.it/200?text=small-center" alt="please don't forget me">
7 | </columns>
8 | <columns small="12" large="8">
9 | <h4 class="small-text-center">What is the deal?</h4>
10 | <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
11 | </columns>
12 | </row>
13 | </container>
14 |
15 | Make sure no expander is created in this table
16 | <container>
17 | <row>
18 | <columns small="12" large="12" no-expander>
19 | <h4 class="small-text-center">What is the deal?</h4>
20 | <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
21 | </columns>
22 | </row>
23 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/fluid-header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <wrapper class="header">
5 | <spacer size="16"></spacer>
6 | <center>
7 | <container class="header-container">
8 | <row class="collapse">
9 | <columns small="6" valign="middle">
10 | <img src="http://placehold.it/200x50/663399">
11 | </columns>
12 | <columns small="6" valign="middle" style="table-layout: fixed;">
13 | <p class="text-right">BASIC</p>
14 | </columns>
15 | </row>
16 | </container>
17 | </center>
18 | <spacer size="16"></spacer>
19 | </wrapper>
20 |
21 |
22 | <container>
23 | <p>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.</p>
24 | <p>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!</p>
25 | </container>
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test/visual/pages/grid-collapse.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row class="collapse">
3 | <columns small="12" large="12">
4 | <h4>Collapsed</h4>
5 | </columns>
6 | </row>
7 | <row class="collapse">
8 | <columns small="6" large="6">
9 | <img src="http://placehold.it/300" alt="">
10 | </columns>
11 | <columns small="6" large="6">
12 | <img src="http://placehold.it/300" alt="">
13 | </columns>
14 | </row>
15 | <row class="">
16 | <columns small="12" large="12">
17 | <h4>Not Collapsed</h4>
18 | </columns>
19 | </row>
20 | <row class="">
21 | <columns small="6" large="6">
22 | <img src="http://placehold.it/300" alt="">
23 | </columns>
24 | <columns small="6" large="6">
25 | <img src="http://placehold.it/300" alt="">
26 | </columns>
27 | </row>
28 | </container>
29 |
30 |
--------------------------------------------------------------------------------
/test/visual/pages/grid-inky.html:
--------------------------------------------------------------------------------
1 |
2 | <style type="text/css">
3 | table.body {
4 | background: red !important;
5 | }
6 | .columns {
7 | border: 1px solid dodgerblue;
8 | }
9 | </style>
10 |
11 | <container>
12 | <row>
13 | <columns small="12" large="12">
14 | <h4>small="12" large="12"</h4>
15 | </columns>
16 | </row>
17 | <row>
18 | <columns small="12" large="6">
19 | <h4>small="12" large="6"</h4>
20 | </columns>
21 | <columns small="12" large="6">
22 | <h4>small="12" large="6"</h4>
23 | </columns>
24 | </row>
25 | <row>
26 | <columns small="12" large="2">
27 | <h4>small="12" large="2"</h4>
28 | </columns>
29 | <columns small="12" large="4">
30 | <h4>small="12" large="4"</h4>
31 | </columns>
32 | <columns small="12" large="6">
33 | <h4>small="12" large="6"</h4>
34 | </columns>
35 | </row>
36 | <row>
37 | <columns small="12" large="2">
38 | <h4>small="12" large="2"</h4>
39 | </columns>
40 | <columns small="4" large="4">
41 | <h4>small="4" large="4"</h4>
42 | </columns>
43 | <columns small="8" large="6">
44 | <h4>small="8" large="6"
45 | </columns>
46 | </row>
47 | <row>
48 | <columns small="12" large="2">
49 | <h4>small="12" large="2"</h4>
50 | </columns>
51 | <columns small="12" large="2">
52 | <h4>small="12" large="2"</h4>
53 | </columns>
54 | <columns small="12" large="2">
55 | <h4>small="12" large="2"</h4>
56 | </columns>
57 | <columns small="6" large="6">
58 | <p>small="6" large="6" left align</p>
59 | </columns>
60 | </row>
61 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/grid-nested-inky.html:
--------------------------------------------------------------------------------
1 |
2 | <style>
3 | .blue {
4 | background: dodgerblue;
5 | }
6 | .red {
7 | background: salmon;
8 | }
9 |
10 | p {
11 | border: 1px solid #333;
12 | }
13 | </style>
14 |
15 |
16 | <container>
17 |
18 | <row>
19 | <columns small="12">
20 |
21 | <row>
22 | <columns small="6" class="blue">
23 | <p>nested 6 columns</p>
24 | </columns>
25 | <columns small="6" class="red">
26 | <row>
27 | <columns small="6" class="blue">
28 | <p>nested 6 columns</p>
29 | </columns>
30 | <columns small="6" class="red">
31 | <p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
32 | </columns>
33 | </row>
34 | </columns>
35 | </row>
36 |
37 | </columns>
38 | </row>
39 |
40 | </container>
41 |
42 | <container>
43 | <row>
44 | <columns small="12">
45 |
46 | <row>
47 | <columns large="6">
48 |
49 | </columns>
50 | <columns large="6">
51 |
52 | </columns>
53 | </row>
54 |
55 | </columns>
56 | </row>
57 | </container>
58 |
--------------------------------------------------------------------------------
/test/visual/pages/grid-with-callouts-inky.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns small="12" large="12">
4 | <callout>
5 | <p>Lorem ipsum</p>
6 | </callout>
7 | </columns>
8 | </row>
9 | <row class="collapse">
10 | <columns small="12" large="12">
11 | <callout>
12 | <p>Lorem ipsum</p>
13 | </callout>
14 | </columns>
15 | </row>
16 | <row>
17 | <columns small="12" large="6">
18 | <callout class="alert">
19 | <p>Small Alert Callout should be 6 columns in large</p>
20 | </callout>
21 | </columns>
22 | <columns small="12" large="6">
23 | <callout class="primary">
24 | </callout>
25 | </columns>
26 | </row>
27 | <row>
28 | <columns small="12" large="2">
29 | <callout class="success">
30 | <p>Success</p>
31 | </callout>
32 | </columns>
33 | <columns small="4" large="4">
34 | <callout class="warning">
35 | <p>Warning</p>
36 | </callout>
37 | </columns>
38 | <columns small="8" large="6">
39 | <callout>
40 | <p>Normal 8 and 6</p>
41 | </callout>
42 | </columns>
43 | </row>
44 | </container>
45 |
--------------------------------------------------------------------------------
/test/visual/pages/grid.html:
--------------------------------------------------------------------------------
1 | <table class="container">
2 | <tr>
3 | <td>
4 |
5 | <table class="row">
6 | <tr>
7 | <th class="columns first">
8 | Thing 1
9 | </th>
10 | <th class="columns">
11 | Thing 2
12 | </th>
13 | <th class="columns last">
14 | Thing 3
15 | </th>
16 | </tr>
17 | </table>
18 |
19 | <table class="row collapse">
20 | <tr>
21 | <th class="small-12 large-12 columns first last">
22 | <p>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.</p>
23 | </th>
24 | </tr>
25 | </table>
26 |
27 | <table class="row">
28 | <tr>
29 | <th class="small-12 large-6 columns first">
30 | <p>One Word</p>
31 | </th>
32 | <th class="small-12 large-6 columns last">
33 | <p>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.</p>
34 | </th>
35 | </tr>
36 | </table>
37 |
38 |
39 | <table class="row">
40 | <tr>
41 | <th class="small-12 large-2 columns first">
42 | <table>
43 | <tr>
44 | <th>
45 | <p>One word</p>
46 | </th>
47 | <th class="expander"></th>
48 | </tr>
49 | </table>
50 | </th>
51 | <th class="small-12 large-4 columns">
52 | <table>
53 | <tr>
54 | <th>
55 | <p>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.</p>
56 | </th>
57 | <th class="expander"></th>
58 | </tr>
59 | </table>
60 | </th>
61 | <th class="small-12 large-6 columns last">
62 | <table>
63 | <tr>
64 | <th>
65 | <p>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.</p>
66 | </th>
67 | <th class="expander"></th>
68 | </tr>
69 | </table>
70 | </th>
71 | </tr>
72 | </table>
73 |
74 | <table class="row">
75 | <tr>
76 | <th class="small-12 large-2 columns first">
77 | <table>
78 | <tr>
79 | <th>
80 | <p>One word</p>
81 | </th>
82 | <th class="expander"></th>
83 | </tr>
84 | </table>
85 | </th>
86 | <th class="small-4 large-4 columns">
87 | <table>
88 | <tr>
89 | <th>
90 | <p>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.</p>
91 | </th>
92 | <th class="expander"></th>
93 | </tr>
94 | </table>
95 | </th>
96 | <th class="small-8 large-6 columns last">
97 | <table>
98 | <tr>
99 | <th>
100 | <p>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.</p>
101 | </th>
102 | <th class="expander"></th>
103 | </tr>
104 | </table>
105 | </th>
106 | </tr>
107 | </table>
108 | </td>
109 | </tr>
110 | </table>
--------------------------------------------------------------------------------
/test/visual/pages/hr.html:
--------------------------------------------------------------------------------
1 | <style>
2 | table.hr {
3 | width: 100%;
4 | }
5 |
6 | table.hr {
7 | border:solid 1px black;
8 | border-width:1px 0 0 0;
9 | height:1px;
10 | background:none;
11 | margin: 0;
12 | width:100%;
13 | padding-top:10px;
14 | padding-bottom:10px;
15 | }
16 |
17 | table.hr.red th {
18 | border:solid 4px red;
19 | border-width:4px 0 0 0;
20 | height:4px;
21 | }
22 | table.hr.blue th {
23 | border:solid 10px blue;
24 | border-width:10px 0 0 0;
25 | height:10px;
26 | }
27 | table.hr.green th {
28 | border:solid 25px green;
29 | border-width:25px 0 0 0;
30 | height:25px;
31 | }
32 | </style>
33 |
34 |
35 | <container>
36 |
37 | <spacer size="35"></spacer>
38 |
39 | <hr class="red">
40 |
41 | <row>
42 | <columns no-expander small="12" large="12">
43 | <hr class="blue">
44 | </columns>
45 | </row>
46 |
47 | <hr class="green">
48 |
49 | <hr>
50 |
51 | <spacer size="35"></spacer>
52 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/images.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns small="12" large="12">
4 | <img style="width: 14px;" src="http://placehold.it/600" alt="">
5 | </columns>
6 | </row>
7 |
8 | <row>
9 | <columns small="12" large="12">
10 | <img style="width: 480px;" src="http://placehold.it/600" alt="">
11 | </columns>
12 | </row>
13 |
14 | <row>
15 | <columns small="12" large="12">
16 | <img src="http://placehold.it/600" alt="">
17 | </columns>
18 | </row>
19 | <row>
20 | <columns small="12" large="6">
21 | <img src="http://placehold.it/400" alt="">
22 | </columns>
23 | <columns small="12" large="6">
24 | <img src="http://placehold.it/400" alt="">
25 | </columns>
26 | </row>
27 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/index.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns small="12" large="12">
4 | <h3>Testing 1, 2, 3!!</h3>
5 | <p>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.</p>
6 | </columns>
7 | </row>
8 | <row>
9 | <columns small="12" large="6" class="offset-large-6">
10 | <p>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.</p>
11 | </columns>
12 | </row>
13 | </container>
14 |
--------------------------------------------------------------------------------
/test/visual/pages/inliner-bugs.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns>
4 |
5 | #417 - 2 sets of angle backets: outer set should not get converted to charachter codes. you should not see 2 angle brackets here:
6 | <br>
7 |
8 | <!-- <raw><<LCG Program\TG LCG Coupon Code Default='246996'>></raw>
9 | confirmed on inliner (both) need to -->
10 |
11 | <hr>
12 |
13 |
14 | #337 - Should not be converted to ampersand apos;
15 | <br>
16 | '
17 | <br>
18 | Inky issue
19 |
20 | <hr>
21 | mdash; should not be converted to #x2014;
22 | <br>
23 | —
24 | <br>
25 | Inky issue
26 | <hr>
27 |
28 |
29 | quotes should not be converted to quot;
30 | <br>
31 | "
32 | <br>
33 | Inky issue
34 | <hr>
35 |
36 | ellipsis should not be converted to #x2019;
37 | <br>
38 | …
39 | <br>
40 | Inky issue
41 | <hr>
42 |
43 | #384 - Should not be converted to ampersand and nbsp
44 | <br>
45 |
46 | <br>
47 | Inky issue
48 |
49 | <hr>
50 |
51 | #305 - Should not be converted to ampersand amp;
52 | <br>
53 | &
54 | <br>
55 | Confirmed Inliner issue
56 |
57 | <hr>
58 |
59 | #326 - spaces should not be removed inside linear gradient values
60 | <br>
61 | <style>
62 | .test {
63 | background: linear-gradient(to bottom, red 0%, green 100%)
64 | }
65 | </style>
66 | <div class="test">Hi</div>
67 | <br>
68 | confirmed on web inliner only (inliner-v2)
69 |
70 | <hr>
71 |
72 | #450 - & #xA0; should not be converted to & nbsp;
73 |
74 | <table class="spacer">
75 | <tbody>
76 | <tr>
77 | <td height="16px" style="font-size:16px;line-height:16px;"> </td>
78 | </tr>
79 | </tbody>
80 | </table>
81 |
82 | Confirmed inliner-v2 issue issue.
83 |
84 | <hr>
85 |
86 | #284 - @font-face should show up in HTML
87 | <br>
88 | <style>
89 | @font-face {
90 | font-family: 'Franklin Gothic';
91 | src: url("https://example.com/Franklin-Gothic.woff") format("woff");
92 | }
93 | }
94 | </style>
95 | <br>
96 | confirmed inliner issue
97 |
98 | </columns>
99 | </row>
100 | </container>
101 |
102 |
--------------------------------------------------------------------------------
/test/visual/pages/layout-break-center.html:
--------------------------------------------------------------------------------
1 | <container>
2 |
3 |
4 | <!-- 2 columns CTA / non collapsable / no gutter -->
5 | <row class="collapse">
6 | <columns>
7 | <wrapper class="product-listing" >
8 | <row class="no-padding-b">
9 | <columns small="6" large="6">
10 | <a href="http://google.com" title="" target="_blank">
11 | <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
12 | </a>
13 | <p class="text-center"><span class="name text-center">Name of Product</span></p>
14 |
15 | <p class="pre-price text-center" style="text-decoration:line-through;">$9.99</p>
16 | <p class="price text-center">
17 | $25.99
18 | </p>
19 |
20 | <center>
21 | <button href="http://tacticalgear.com" class="small">button</button>
22 | </center>
23 | </columns>
24 | <columns small="6" large="6">
25 | <a href="http://google.com" title="" target="_blank">
26 | <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
27 | </a>
28 | <p class="text-center">
29 | <span class="name text-center">
30 | Name of Product
31 | </span>
32 | </p>
33 |
34 | <p class="pre-price text-center" style="text-decoration:line-through;">
35 | $9.99
36 | </p>
37 | <p class="price text-center">
38 | $25.99
39 | </p>
40 |
41 | <center>
42 | <button href="http://google.com" class="small">button</button>
43 | </center>
44 |
45 | </columns>
46 | </row>
47 | </wrapper>
48 | </columns>
49 | </row>
50 |
51 |
52 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/list.html:
--------------------------------------------------------------------------------
1 | <container>
2 |
3 | <row class="feature-list">
4 | <columns small="12" large="12">
5 |
6 | <h4>Feature Stories</h4>
7 |
8 | <row class="feature-list-item">
9 | <columns small="12" large="2" class="hide-for-small">
10 | <img height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
11 | </columns>
12 | <columns small="12" large="10">
13 | <h6 class="feature-list-item-header"><a href="#">I realize this is actually a serious technique, but...</a></h6>
14 | <p class="feature-list-item-info">Barb E. Dahl</p>
15 | </columns>
16 | </row>
17 |
18 | <row class="feature-list-item">
19 | <columns small="12" large="2" class="hide-for-small">
20 | <img class="feature-list-image" height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
21 | </columns>
22 | <columns small="12" large="10">
23 | <h6 class="feature-list-item-header"><a href="#">21 Ways to Dominate Rat Hearding</a></h6>
24 | <p class="feature-list-item-info">Oren Jellow</p>
25 | </columns>
26 | </row>
27 |
28 | <row class="feature-list-item">
29 | <columns small="12" large="2" class="hide-for-small">
30 | <img class="feature-list-image" height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
31 | </columns>
32 | <columns small="12" large="10">
33 | <h6 class="feature-list-item-header"><a href="#">10 Steps To Successfully Outsourcing Your Your Counciousness</a></h6>
34 | <p class="feature-list-item-info">Kandi Apple</p>
35 | </columns>
36 | </row>
37 |
38 | <row class="feature-list-item">
39 | <columns small="12" large="2" class="hide-for-small" >
40 | <img class="feature-list-image" height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
41 | </columns>
42 | <columns small="12" large="10">
43 | <h6 class="feature-list-item-header"><a href="#">How to Have a Healthier and More Productive Pancake Breakfast</a></h6>
44 | <p class="feature-list-item-info">Les Moore</p>
45 | </columns>
46 | </row>
47 |
48 | </columns>
49 | </row>
50 |
51 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/menu-inky.html:
--------------------------------------------------------------------------------
1 | <container>
2 | centered menu
3 | <row>
4 | <columns>
5 | <center>
6 | <menu>
7 | <item href="http://zurb.com">Item</item>
8 | <item href="http://zurb.com">Item</item>
9 | <item href="http://zurb.com">Item</item>
10 | <item href="http://zurb.com">Item</item>
11 | </menu>
12 | </center>
13 | </columns>
14 | </row>
15 | vertical centered menu
16 | <row>
17 | <columns>
18 | <center>
19 | <menu class="vertical">
20 | <item href="http://zurb.com">Item</item>
21 | <item href="http://zurb.com">Item</item>
22 | <item href="http://zurb.com">Item</item>
23 | <item href="http://zurb.com">Item</item>
24 | </menu>
25 | </center>
26 | </columns>
27 | </row>
28 | vertical on small centered menu
29 | <row>
30 | <columns>
31 | <center>
32 | <menu class="small-vertical">
33 | <item href="#">Item 1</item>
34 | <item href="#">Item 2</item>
35 | <item href="#">Item 3</item>
36 | </menu>
37 | </center>
38 | </columns>
39 | </row>
40 | left aligned menu
41 | <row>
42 | <columns small="12" large="12">
43 | <menu>
44 | <item href="http://zurb.com">Item</item>
45 | <item href="http://zurb.com">Item</item>
46 | <item href="http://zurb.com">Item</item>
47 | <item href="http://zurb.com">Item</item>
48 | </menu>
49 | </columns>
50 | </row>
51 | </container>
52 |
--------------------------------------------------------------------------------
/test/visual/pages/offset-inky.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | <container>
4 | <row>
5 | <columns>
6 | <p>Offset columns should correctly align with the gutters of standard columns.</p>
7 | </columns>
8 | </row>
9 | <row>
10 | <columns large="1">
11 | <p>1 of 12</p>
12 | </columns>
13 | <columns large="11">
14 | <p>11 of 12</p>
15 | </columns>
16 | </row>
17 | <row>
18 | <columns large="1" class="large-offset-1">
19 | <p>Offset 1 of 12</p>
20 | </columns>
21 | <columns large="10">
22 | <p>10 of 12</p>
23 | </columns>
24 | </row>
25 | <row>
26 | <columns large="2">
27 | <p>2 of 12</p>
28 | </columns>
29 | <columns large="10">
30 | <p>10 of 12</p>
31 | </columns>
32 | </row>
33 | <row>
34 | <columns small="4" large="2" class="small-offset-4 large-offset-2">
35 | <p>Offset 2 of 12</p>
36 | </columns>
37 | <columns small="4" large="8">
38 | <p>9 of 12</p>
39 | </columns>
40 | </row>
41 | </container>
42 |
--------------------------------------------------------------------------------
/test/visual/pages/outlook-image-width.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns large="8">
4 | <h2>This is a title</h2>
5 | <p>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.</p>
6 | <p><a href="#">Learn more</a></p>
7 | </columns>
8 | <columns class="test" large="4">
9 | <img src="http://placehold.it/170x129" alt="">
10 | </columns>
11 | </row>
12 | </container>
13 |
--------------------------------------------------------------------------------
/test/visual/pages/spacer.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <p>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.</p>
3 | <spacer size="32"></spacer>
4 | <img src="http://placehold.it/32" alt="">
5 | <p>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!</p>
6 | <p>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.</p>
7 | <spacer size="66"></spacer>
8 | <img src="http://placehold.it/66" alt="">
9 | <p>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!</p>
10 | <p>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.</p>
11 | <spacer size="99"></spacer>
12 | <img src="http://placehold.it/99" alt="">
13 | <p>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!</p>
14 | <p>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.</p>
15 | <spacer size="120"></spacer>
16 | <img src="http://placehold.it/120" alt="">
17 | <p>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!</p>
18 | </container>
19 |
20 | https://litmus.com/checklist/emails/public/e6d9076
--------------------------------------------------------------------------------
/test/visual/pages/spacing.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns>
4 | <h1>These Elements Should All Have Spacing.</h1>
5 | <p>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!</p>
6 | <button href="#">Button</button>
7 | <p>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?</p>
8 | <callout>
9 | <p>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.</p>
10 | </callout>
11 | <p>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?</p>
12 | </columns>
13 | </row>
14 | </container>
15 |
--------------------------------------------------------------------------------
/test/visual/pages/thumbnail.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns>
4 | <center>
5 | <img src="http://placehold.it/800x300" alt="" class="thumbnail">
6 | </center>
7 | </columns>
8 | </row>
9 | <row>
10 | <columns>
11 | <center>
12 | <img src="http://placehold.it/300x300" alt="" class="thumbnail">
13 | </center>
14 | </columns>
15 | </row>
16 | watch out for smacing issues on the full width thumbnails. The right side spacing should match left.
17 | <row>
18 | <columns small="6">
19 | <img src="http://placehold.it/300x300" alt="" class="thumbnail">
20 | </columns>
21 | <columns small="6">
22 | <img src="http://placehold.it/300x300" alt="" class="thumbnail">
23 | </columns>
24 | </row>
25 | <row>
26 | <columns large="6">
27 | <img src="http://placehold.it/300x300" alt="" class="thumbnail">
28 | </columns>
29 | <columns large="6">
30 | <img src="http://placehold.it/300x300" alt="" class="thumbnail">
31 | </columns>
32 | </row>
33 | </container>
34 |
--------------------------------------------------------------------------------
/test/visual/pages/type.html:
--------------------------------------------------------------------------------
1 | <container>
2 | <row>
3 | <columns small="12" large="12">
4 |
5 | </columns>
6 | </row>
7 | <row>
8 | <columns small="12" large="6" class="offset-large-6">
9 | <p>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.</p>
10 | </columns>
11 | </row>
12 | </container>
--------------------------------------------------------------------------------
/test/visual/pages/visibility.html:
--------------------------------------------------------------------------------
1 | <container>
2 |
3 | <row>
4 | <columns small="12" large="12">
5 | <h4 class="text-center">furry friends</h4>
6 | </columns>
7 | </row>
8 |
9 | <row>
10 | <columns small="6" large="4">
11 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
12 | <p class="text-center">name</p>
13 | <p class="text-center">age</p>
14 | </columns>
15 | <columns small="6" large="4">
16 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
17 | <p class="text-center">name</p>
18 | <p class="text-center">age</p>
19 | </columns>
20 | <columns small="6" large="4" class="show-for-large">
21 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
22 | <p class="text-center">show large</p>
23 | <p class="text-center">age</p>
24 | </columns>
25 | </row>
26 |
27 | <row>
28 | <columns small="6" large="4">
29 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
30 | <p class="text-center">name</p>
31 | <p class="text-center">age</p>
32 | </columns>
33 | <columns small="6" large="4">
34 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
35 | <p class="text-center">name</p>
36 | <p class="text-center">age</p>
37 | </columns>
38 | <columns small="6" large="4" class="show-for-large">
39 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
40 | <p class="text-center">show large</p>
41 | <p class="text-center">age</p>
42 | </columns>
43 | </row>
44 |
45 | <row>
46 | <columns small="6" large="4">
47 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
48 | <p class="text-center">name</p>
49 | <p class="text-center">age</p>
50 | </columns>
51 | <columns small="6" large="4">
52 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
53 | <p class="text-center">name</p>
54 | <p class="text-center">age</p>
55 | </columns>
56 | <columns small="6" large="4" class="show-for-large">
57 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
58 | <p class="text-center">show large</p>
59 | <p class="text-center">age</p>
60 | </columns>
61 | </row>
62 |
63 | <row class="hide-for-large">
64 | <columns small="6" large="6">
65 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
66 | <p class="text-center">show small</p>
67 | <p class="text-center">age</p>
68 | </columns>
69 | <columns small="6" large="6">
70 | <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
71 | <p class="text-center">show small</p>
72 | <p class="text-center">age</p>
73 | </columns>
74 | </row>
75 |
76 | <row>
77 | <columns small="12" large="12">
78 | <callout class="primary">
79 | <h1>Show on all</h1>
80 | <p>Calling all cars</p>
81 | <p>Calling all cars</p>
82 | <p>Calling all cars</p>
83 | </callout>
84 | </columns>
85 | </row>
86 |
87 | <row>
88 | <columns small="12" large="12">
89 | <callout class="primary hide-for-large">
90 | <h1>Hide for Large</h1>
91 | <p>Calling all cars</p>
92 | <p>Calling all cars</p>
93 | <p>Calling all cars</p>
94 | </callout>
95 | </columns>
96 | </row>
97 |
98 | <row>
99 | <columns small="12" large="12">
100 | <callout class="primary show-for-large">
101 | <h1>Show for Large</h1>
102 | <p>Calling all cars</p>
103 | <p>Calling all cars</p>
104 | <p>Calling all cars</p>
105 | </callout>
106 | </columns>
107 | </row>
108 |
109 | <callout class="hide-for-large primary">
110 | <p>This callout will only appear on small screens.</p>
111 | </callout>
112 |
113 | <callout class="show-for-large alert">
114 | <p>This callout will only appear on large screens.</p>
115 | </callout>
116 |
117 |
118 | <row class="callout">
119 | <columns small="6" large="4">
120 | <p class="hide-for-large">Show for small</p>
121 | <p class="show-for-large">Show for large</p>
122 | </columns>
123 | <columns small="6" large="4">
124 | <button class="hide-for-large" href="">show small</button>
125 | <button class="show-for-large" href="">show large</button>
126 | </columns>
127 | </row>
128 |
129 | </container>
--------------------------------------------------------------------------------