Foundation for Emails editable vendor lib
This commit is contained in:
Derek Montgomery
Mark Moser
parent
d5d15b3537
commit
c628fa58a0
3
.gitignore
vendored
3
.gitignore
vendored
@ -37,7 +37,8 @@ tmux*log
|
|||||||
/.bundle/
|
/.bundle/
|
||||||
/vendor/bundle
|
/vendor/bundle
|
||||||
/lib/bundler/man/
|
/lib/bundler/man/
|
||||||
/vendor/assets
|
/vendor/assets/*
|
||||||
|
!/vendor/assets/foundation-emails
|
||||||
bower_components/
|
bower_components/
|
||||||
node_modules/
|
node_modules/
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|||||||
18
app/assets/stylesheets/mailers/foundation_emails.scss
Normal file
18
app/assets/stylesheets/mailers/foundation_emails.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@import "foundation-emails/scss/foundation-emails";
|
||||||
|
|
||||||
|
.pd-logo {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-container {
|
||||||
|
max-width:600px;
|
||||||
|
background-color:green;
|
||||||
|
.email-title {
|
||||||
|
font-family: 'HalisR', Helvetica Neue, Helvetica, Ariel, sans-serif !important;
|
||||||
|
.prft-slash {
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: 100;
|
||||||
|
color: #EF0734;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
<%= stylesheet_link_tag "foundation_emails" %>
|
<%= stylesheet_link_tag "mailers/foundation_emails" %>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -13,3 +13,4 @@ Rails.application.config.assets.version = '1.0'
|
|||||||
Rails.application.config.assets.precompile += ['vendor/assets/**/*']
|
Rails.application.config.assets.precompile += ['vendor/assets/**/*']
|
||||||
Rails.application.config.assets.precompile += %w(ie9.js)
|
Rails.application.config.assets.precompile += %w(ie9.js)
|
||||||
Rails.application.config.assets.precompile += %w(foundation_emails.css)
|
Rails.application.config.assets.precompile += %w(foundation_emails.css)
|
||||||
|
Rails.application.config.assets.precompile += ['mailers/foundation_emails.css']
|
||||||
|
|||||||
28
vendor/assets/foundation-emails/.bower.json
vendored
Normal file
28
vendor/assets/foundation-emails/.bower.json
vendored
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "foundation-emails",
|
||||||
|
"version": "2.2.1",
|
||||||
|
"homepage": "http://foundation.zurb.com/emails",
|
||||||
|
"authors": [
|
||||||
|
"ZURB <foundation@zurb.com>"
|
||||||
|
],
|
||||||
|
"description": "A framework for designing responsive emails by ZURB.",
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"gem",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
],
|
||||||
|
"_release": "2.2.1",
|
||||||
|
"_resolution": {
|
||||||
|
"type": "version",
|
||||||
|
"tag": "v2.2.1",
|
||||||
|
"commit": "de8db7c234e7b04e30e006de19625035f9e2fa5c"
|
||||||
|
},
|
||||||
|
"_source": "https://github.com/zurb/foundation-emails.git",
|
||||||
|
"_target": "^2.2.1",
|
||||||
|
"_originalSource": "foundation-emails",
|
||||||
|
"_direct": true
|
||||||
|
}
|
||||||
46
vendor/assets/foundation-emails/CONTRIBUTING.md
vendored
Normal file
46
vendor/assets/foundation-emails/CONTRIBUTING.md
vendored
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
# Contributing to Foundation
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## Reporting Bugs
|
||||||
|
|
||||||
|
[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:
|
||||||
|
|
||||||
|
- **Be descriptive.** If you can, upload a screenshot of problem you're having, or copy and paste any JavaScript or command line errors you encounter. Being detailed will help us hone in on the problem faster.
|
||||||
|
- **Post your code.** It's very helpful to see any HTML, Sass, or JavaScript you've written that you think may be causing the problem. In some cases, we might be able to fix your problem just by fixing your code.
|
||||||
|
- **Help us recreate it.** If your problem is complex, tell us the steps needed to recreate the issue. Sometimes we need to see the problem for ourselves, in our own testing environment, so we can more easily debug it.
|
||||||
|
|
||||||
|
## Editing the Documentation
|
||||||
|
|
||||||
|
The documentation is compiled by a tool called [Supercollider](https://github.com/gakimball/supercollider). Each page is compiled from 1–2 sources:
|
||||||
|
|
||||||
|
- A Markdown file under `docs/pages/`.
|
||||||
|
- If it's a Sass component, the relevant Sass file inside `scss/` is scanned for special [SassDoc](http://sassdoc.com/) comments.
|
||||||
|
|
||||||
|
Each page is rendered in one big [Handlebars template](https://github.com/zurb/foundation-docs/blob/master/templates/component.html) that takes in all of the above data.
|
||||||
|
|
||||||
|
Much of the guts of the documentation are stored in an external codebase called [foundation-docs](https://github.com/zurb/foundation-docs). This is code that's shared between the documentation for all three Foundation frameworks, including:
|
||||||
|
|
||||||
|
- CSS specific to the documentation
|
||||||
|
- The Handlebars template used to build pages
|
||||||
|
- A series of Handlebars helpers for the template
|
||||||
|
- A custom Markdown parser used when parsing pages
|
||||||
|
- A script that generates the search results for documentation pages
|
||||||
|
|
||||||
|
To hack on this repo locally, clone the foundation-docs repo into a folder adjacent to this repo's folder on your machine. Then run `npm link ../foundation-docs` to wire the two together.
|
||||||
|
|
||||||
|
## Submitting Pull Requests
|
||||||
|
|
||||||
|
If you think you can solve a problem yourself, or want to implement a new feature, go for it! Follow these guidelines to make the most killer PR ever.
|
||||||
|
|
||||||
|
- **Target the right branch.** So we can properly follow [semantic versioning](http://semver.org/), be sure to develop your pull request in the right branch:
|
||||||
|
- Ink 1.0 changes: `v1.0`
|
||||||
|
- Foundation for Emails 2.0+ bug fixes: `develop`
|
||||||
|
- New features should be pointed to: `v2.2`
|
||||||
|
- **Test, test, and test.** The Foundation frameworks are used by thousands and thousands of designers and developers, so making sure your changes work in every email client is important! Please test bug fixes or new features in Litmus, or another email testing service.
|
||||||
|
|
||||||
|
## Help Wanted
|
||||||
|
|
||||||
|
Want something to work on? Let us guide you in the right direction.
|
||||||
|
|
||||||
|
- Browse the [Help Wanted](https://github.com/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!
|
||||||
9
vendor/assets/foundation-emails/LICENSE.md
vendored
Normal file
9
vendor/assets/foundation-emails/LICENSE.md
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
Copyright (c) 2016 ZURB, inc.
|
||||||
|
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
122
vendor/assets/foundation-emails/README.md
vendored
Normal file
122
vendor/assets/foundation-emails/README.md
vendored
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
# [Foundation for Emails](http://foundation.zurb.com/emails)
|
||||||
|
|
||||||
|
[](https://www.npmjs.org/package/foundation-emails)
|
||||||
|
[](https://www.npmjs.org/package/foundation-emails)
|
||||||
|
[](https://badge.fury.io/rb/foundation_emails)
|
||||||
|
[](https://www.npmjs.org/package/foundation-emails)
|
||||||
|
|
||||||
|
|
||||||
|
Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook. Our HTML/CSS components have been tested across every major email client to ensure consistency. And with the [Inky](https://github.com/zurb/inky) templating language, writing HTML emails is now even easier.
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
The main way to get started is with our [email template stack](https://github.com/zurb/foundation-emails-template). To use the stack, you'll need [Node.js](https://nodejs.org/en/) installed on your machine.
|
||||||
|
|
||||||
|
To set up the emails template, run these commands:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/zurb/foundation-emails-template project
|
||||||
|
cd project
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Then run `npm start` to run the project. A new browser window will open with a BrowserSync server showing the finished files.
|
||||||
|
|
||||||
|
Run `npm run build` to do a full email inlining process.
|
||||||
|
|
||||||
|
|
||||||
|
#### Using the Ruby gem
|
||||||
|
|
||||||
|
**foundation_emails** is a gem that enables you to use Foundation for Emails assets within a Rails project. To install in your app:
|
||||||
|
|
||||||
|
1. Add the following line to your Gemfile:
|
||||||
|
|
||||||
|
```ruby
|
||||||
|
gem 'foundation_emails'
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Then execute:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bundle install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Import Foundation for Emails in your `application.scss`:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@import "foundation-emails";
|
||||||
|
```
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
**Check out our [Migration Guide](https://github.com/zurb/foundation-emails/blob/master/migration.md) for upgrading an existing template or for more in-depth code examples.**
|
||||||
|
|
||||||
|
Foundation for Emails 2.0 documentation and framework are on the `develop` branch and you can compile it on your own machine.
|
||||||
|
|
||||||
|
Run these commands to set up the documentation:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/zurb/foundation-emails.git
|
||||||
|
cd foundation-emails
|
||||||
|
```
|
||||||
|
|
||||||
|
Foundation for Emails 2.0 documentation is on the `develop` branch.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git fetch
|
||||||
|
git checkout develop
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Then run `npm start` to compile the documentation. When it finishes, a new browser window will open pointing to a BrowserSync server displaying the documentation.
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
Run `npm run test:visual` to compile the visual regression tests. All of the pages under `test/visual/pages` are compiled and inlined. From there, they can be uploaded to Litmus for testing.
|
||||||
|
|
||||||
|
## Inky
|
||||||
|
|
||||||
|
[Inky](https://github.com/zurb/inky) is our new templating language that converts simple HTML into the complex tables required for email layout.
|
||||||
|
|
||||||
|
The parser converts a set of custom HTML tags, expanding them out into full HTML syntax. Below is a list of every custom element.
|
||||||
|
|
||||||
|
### Grid
|
||||||
|
|
||||||
|
```html
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<column small="12" large="4"></column>
|
||||||
|
<column small="12" large="8"></column>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Block Grid
|
||||||
|
|
||||||
|
```html
|
||||||
|
<block-grid up="3">
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</block-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Components
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button href="http://zurb.com"></button>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<menu>
|
||||||
|
<item href="one.html">Item One</item>
|
||||||
|
<item href="one.html">Item Two</item>
|
||||||
|
<item href="one.html">Item Three</item>
|
||||||
|
</menu>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
As an open source project, we looooove our community support. Please file issues, or better yet pull requests on the [Foundation for Emails Repo](https://github.com/zurb/foundation-emails). We're stoked to hear your feedback, make improvements, and keep evolving Foundation for Emails!
|
||||||
|
|
||||||
|
Copyright (c) 2016 ZURB, inc.
|
||||||
18
vendor/assets/foundation-emails/bower.json
vendored
Normal file
18
vendor/assets/foundation-emails/bower.json
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "foundation-emails",
|
||||||
|
"version": "2.2.1",
|
||||||
|
"homepage": "http://foundation.zurb.com/emails",
|
||||||
|
"authors": [
|
||||||
|
"ZURB <foundation@zurb.com>"
|
||||||
|
],
|
||||||
|
"description": "A framework for designing responsive emails by ZURB.",
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"gem",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
]
|
||||||
|
}
|
||||||
1348
vendor/assets/foundation-emails/dist/foundation-emails.css
vendored
Normal file
1348
vendor/assets/foundation-emails/dist/foundation-emails.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
vendor/assets/foundation-emails/dist/foundation-emails.min.css
vendored
Normal file
1
vendor/assets/foundation-emails/dist/foundation-emails.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
vendor/assets/foundation-emails/docs/assets/img/campaign-monitor-css-guide.jpg
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/campaign-monitor-css-guide.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/cm-email-client-stats.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/cm-email-client-stats.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-expo-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-expo-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-expo.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-expo.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-foundation-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-foundation-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-foundation.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-foundation.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-icons-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-icons-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-icons.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-icons.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-products-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-products-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-products.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-products.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-studios-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-studios-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-studios.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-studios.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-top-icons-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-top-icons-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-top-icons.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-top-icons.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-university.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/footer-university.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/social-retina.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/social-retina.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/social.png
vendored
Normal file
BIN
vendor/assets/foundation-emails/docs/assets/img/icons/social.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
1
vendor/assets/foundation-emails/docs/assets/img/logos/sass-logo.svg
vendored
Normal file
1
vendor/assets/foundation-emails/docs/assets/img/logos/sass-logo.svg
vendored
Normal file
@ -0,0 +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>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
20
vendor/assets/foundation-emails/docs/assets/js/codeSample.js
vendored
Normal file
20
vendor/assets/foundation-emails/docs/assets/js/codeSample.js
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
!function() {
|
||||||
|
|
||||||
|
var $currentText = $('[data-docs-code-current]');
|
||||||
|
var $toggleButtons = $('[data-docs-code-toggle]');
|
||||||
|
|
||||||
|
$toggleButtons.click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('body').toggleClass('is-inky-enabled');
|
||||||
|
|
||||||
|
if ($('body').hasClass('is-inky-enabled')) {
|
||||||
|
$currentText.text('Inky');
|
||||||
|
$toggleButtons.text('Switch to HTML');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$currentText.text('HTML');
|
||||||
|
$toggleButtons.text('Switch to Inky');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}();
|
||||||
1
vendor/assets/foundation-emails/docs/assets/js/docs.js
vendored
Normal file
1
vendor/assets/foundation-emails/docs/assets/js/docs.js
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
$(document).foundation();
|
||||||
6
vendor/assets/foundation-emails/docs/assets/scss/_code.scss
vendored
Normal file
6
vendor/assets/foundation-emails/docs/assets/scss/_code.scss
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.docs-code-html,
|
||||||
|
.docs-code-inky {
|
||||||
|
code {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
157
vendor/assets/foundation-emails/docs/assets/scss/_compatibility.scss
vendored
Normal file
157
vendor/assets/foundation-emails/docs/assets/scss/_compatibility.scss
vendored
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
// Compatability Table
|
||||||
|
// -------------------
|
||||||
|
// A styled table used on the compatability page to show which browsers the framework works with.
|
||||||
|
|
||||||
|
$primary: #002b36;
|
||||||
|
$secondary: #efefef;
|
||||||
|
$alert: #cf2a0e;
|
||||||
|
$warning: #ffae00;
|
||||||
|
$success: #43AC6A;
|
||||||
|
$gutter: 40px;
|
||||||
|
$rad: 5px;
|
||||||
|
|
||||||
|
@mixin font-size($sizeValue){
|
||||||
|
font-size: $sizeValue + px;
|
||||||
|
font-size: ($sizeValue / 10) + rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin -breakpoint($point) {
|
||||||
|
@if $point == smallmobile {
|
||||||
|
@media (max-width: 200px) { @content; }
|
||||||
|
}
|
||||||
|
@if $point == mobile {
|
||||||
|
@media (max-width: 640px) { @content; }
|
||||||
|
}
|
||||||
|
@if $point == tablet {
|
||||||
|
@media (max-width: 1000px) { @content; }
|
||||||
|
}
|
||||||
|
@if $point == smallscreen {
|
||||||
|
@media (max-width: 1120px) { @content; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comparison-table {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
thead tr {
|
||||||
|
color: $primary;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
td { color: #666 !important; }
|
||||||
|
td { padding-bottom: 10px; }
|
||||||
|
td { border: none !important; }
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
width: 100%;
|
||||||
|
td {
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
td { border-top: 1px solid #ddd; }
|
||||||
|
td:first-child {
|
||||||
|
|
||||||
|
}
|
||||||
|
td:last-child {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
td { border-bottom: 1px solid #ddd; }
|
||||||
|
td:first-child {
|
||||||
|
|
||||||
|
}
|
||||||
|
td:last-child {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td:first-child {
|
||||||
|
width: 25%;
|
||||||
|
padding: 10px;
|
||||||
|
color: $primary;
|
||||||
|
font-weight: bold;
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
td.marker.yes {
|
||||||
|
width: 10%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: $success;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
td.marker.mostly {
|
||||||
|
width: 10%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: $warning;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
td.marker.no {
|
||||||
|
width: 10%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: $alert-color;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background: $secondary;
|
||||||
|
}
|
||||||
|
@include -breakpoint(smallmobile) {
|
||||||
|
td, tr td, tr td.marker, tr td:first-child, tr td:first-child + td {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
tr:first-child td:first-child {
|
||||||
|
|
||||||
|
}
|
||||||
|
tr:first-child td:last-child {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
tr:last-child td:first-child {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
tr:last-child td:last-child {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
tr td:first-child {
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
& + td {
|
||||||
|
padding: 0 10px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr td.marker {
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
&:before {
|
||||||
|
content: "Grid: ";
|
||||||
|
}
|
||||||
|
& + td.marker:before {
|
||||||
|
content: "Layout/UI: ";
|
||||||
|
}
|
||||||
|
& + td.marker + td.marker:before {
|
||||||
|
content: "JS: ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
thead tr td.marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td.divider {
|
||||||
|
background: $dark-gray;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-right: $dark-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-left: $dark-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
40
vendor/assets/foundation-emails/docs/assets/scss/_course-callout.scss
vendored
Normal file
40
vendor/assets/foundation-emails/docs/assets/scss/_course-callout.scss
vendored
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
.docs-course-callout {
|
||||||
|
display: block;
|
||||||
|
background: #A183D3;
|
||||||
|
color: $white;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background: $white;
|
||||||
|
color: #85769e;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 2px 0 #999;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: rem-calc(14);
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-course-callout-subtitle {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: rem-calc(12);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-course-callout-title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
49
vendor/assets/foundation-emails/docs/assets/scss/docs.scss
vendored
Normal file
49
vendor/assets/foundation-emails/docs/assets/scss/docs.scss
vendored
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
// The CSS for the Foundation docs is stored in an external codebase:
|
||||||
|
// https://github.com/zurb/foundation-docs
|
||||||
|
//
|
||||||
|
// You can test Sass changes locally by running these commands:
|
||||||
|
// git clone https://github.com/zurb/foundation-docs
|
||||||
|
// npm link ./foundation-docs
|
||||||
|
//
|
||||||
|
// Feel free to submit pull requests to foundation-docs like you would Foundation itself!
|
||||||
|
|
||||||
|
$foundation-palette: (
|
||||||
|
primary: #7465be,
|
||||||
|
secondary: #777,
|
||||||
|
success: #3adb76,
|
||||||
|
warning: #ffae00,
|
||||||
|
alert: #ec5840,
|
||||||
|
);
|
||||||
|
|
||||||
|
@import 'node_modules/foundation-sites/scss/foundation';
|
||||||
|
@import 'node_modules/motion-ui/src/motion-ui';
|
||||||
|
|
||||||
|
@include foundation-everything;
|
||||||
|
@include motion-ui-transitions;
|
||||||
|
|
||||||
|
@import 'node_modules/foundation-docs/scss/foundation-docs';
|
||||||
|
|
||||||
|
@import 'code';
|
||||||
|
@import 'compatibility';
|
||||||
|
@import 'course-callout';
|
||||||
|
|
||||||
|
.dropdown.menu > li.is-dropdown-submenu-parent > a {
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-newsletter {
|
||||||
|
background: #2a2f58;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zurb-footer-top {
|
||||||
|
background: #1C1F3A !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout.secondary.tip {
|
||||||
|
border: none;
|
||||||
|
border-left: 5px solid $primary-color;
|
||||||
|
}
|
||||||
314
vendor/assets/foundation-emails/docs/layouts/component.html
vendored
Normal file
314
vendor/assets/foundation-emails/docs/layouts/component.html
vendored
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
<article class="docs-component" id="docs-{{escape title}}">
|
||||||
|
|
||||||
|
<h1 class="docs-page-title">{{ title }}</h1>
|
||||||
|
|
||||||
|
<p class="lead docs-page-lead">{{ description }}</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
{{!-- Start container for docs and table of contents --}}
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
{{!-- Start container for table of contents --}}
|
||||||
|
<nav>
|
||||||
|
<div class="large-3 large-push-9 columns">
|
||||||
|
<ul class="vertical menu docs-sub-menu" data-docs-toc>
|
||||||
|
<li class="docs-menu-title">On this page:</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="vertical menu docs-sub-menu">
|
||||||
|
<li class="docs-menu-title">Contribute:</li>
|
||||||
|
<li><a href="{{ editLink fileName }}">Edit this Page</a></li>
|
||||||
|
<li><a href="{{ issueLink title }}">Report a Bug</a></li>
|
||||||
|
{{ sourceLink _adapterData }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{{!-- End container for table of contents --}}
|
||||||
|
|
||||||
|
{{!-- Start container for docs --}}
|
||||||
|
<div class="large-9 large-pull-3 columns">
|
||||||
|
|
||||||
|
{{ docs }}
|
||||||
|
|
||||||
|
{{#if sass}}
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
{{#heading 2}}Sass Reference{{/heading}}
|
||||||
|
|
||||||
|
{{#if sass.variable}}
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'sass-variables'}}Variables{{/heading}}
|
||||||
|
|
||||||
|
<p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
|
||||||
|
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each sass.variable}}
|
||||||
|
<tr>
|
||||||
|
<td class="name"><code>${{this.context.name}}</code></td>
|
||||||
|
<td>{{sassTypes this.type}}</td>
|
||||||
|
<td class="{{toLower this.type}}"><code>{{sassValue this.context.value}}</code></td>
|
||||||
|
<td>{{md this.description}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if sass.mixin}}
|
||||||
|
{{#if sass.variable}}<hr>{{/if}}
|
||||||
|
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'sass-mixins'}}Mixins{{/heading}}
|
||||||
|
|
||||||
|
<p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
|
||||||
|
|
||||||
|
{{#each sass.mixin}}
|
||||||
|
<section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
|
||||||
|
{{#heading 4}}{{this.context.name}}{{/heading}}
|
||||||
|
|
||||||
|
{{#if this.since}}
|
||||||
|
<p class="docs-notice-added">Added in {{this.since.0.version}}</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.deprecated}}
|
||||||
|
<p class="docs-notice-deprecated">Deprecated in {{this.deprecated}}</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<div class="docs-code">
|
||||||
|
<pre><code>{{writeMixin this}}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{md this.description}}
|
||||||
|
|
||||||
|
{{externalLink this.link}}
|
||||||
|
|
||||||
|
{{#if this.parameter}}
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each this.parameter}}
|
||||||
|
<tr>
|
||||||
|
<td><code>${{this.name}}</code></td>
|
||||||
|
<td>{{sassTypes this.type}}</td>
|
||||||
|
<td><code>{{sassValue this.default}}</code></td>
|
||||||
|
<td>{{md this.description}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
{{/if}}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{#unless @last}}<hr>{{/unless}}
|
||||||
|
|
||||||
|
{{#if sass.function}}
|
||||||
|
<hr>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{/each}}
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if sass.function}}
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'sass-functions'}}Functions{{/heading}}
|
||||||
|
|
||||||
|
{{#each sass.function}}
|
||||||
|
<section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
|
||||||
|
{{#heading 4}}{{this.context.name}}{{/heading}}
|
||||||
|
|
||||||
|
{{#if this.since}}
|
||||||
|
<p class="docs-notice-added">Added in {{this.since.0.version}}</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.deprecated}}
|
||||||
|
<p class="docs-notice-deprecated">Deprecated in {{this.deprecated.version}}</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<div class="docs-code">
|
||||||
|
<pre><code>{{writeFunction this}}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{md this.description}}
|
||||||
|
|
||||||
|
{{externalLink this.link}}
|
||||||
|
|
||||||
|
{{#if this.parameter}}
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each this.parameter}}
|
||||||
|
<tr>
|
||||||
|
<td><code>${{this.name}}</code></td>
|
||||||
|
<td>{{sassTypes this.type}}</td>
|
||||||
|
<td><code>{{sassValue this.default}}</code></td>
|
||||||
|
<td>{{md this.description}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
{{/if}}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{#unless @last}}<hr>{{/unless}}
|
||||||
|
{{/each}}
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if js}}
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
{{#heading 2}}JavaScript Reference{{/heading}}
|
||||||
|
|
||||||
|
{{#each js.class}}
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}}
|
||||||
|
|
||||||
|
{{md this.description}}
|
||||||
|
|
||||||
|
<div class="docs-code"><pre><code>var elem = new Foundation.{{this.name}}(element, options);</code></pre></div>
|
||||||
|
|
||||||
|
{{#if this.fires}}
|
||||||
|
<p><strong>Fires these events:</strong>
|
||||||
|
{{#each this.fires}}
|
||||||
|
{{this}}
|
||||||
|
{{/each}}
|
||||||
|
</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.params}}
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each this.params}}
|
||||||
|
<tr>
|
||||||
|
<td><code>{{this.name}}</code></td>
|
||||||
|
<td>{{this.type.names.[0]}}</td>
|
||||||
|
<td>{{this.description}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
{{/if}}
|
||||||
|
</section>
|
||||||
|
{{/each}}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
{{#if js.member}}
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'js-options'}}Plugin Options{{/heading}}
|
||||||
|
|
||||||
|
<p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="#">Learn more about how JavaScript plugins are initialized.</a></p>
|
||||||
|
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Name</th><th>Description</th><th>Example</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each js.member}}
|
||||||
|
<tr>
|
||||||
|
<td>{{this.name}}</td>
|
||||||
|
<td>{{this.description}}</td>
|
||||||
|
<td><code>Sample!</code></td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
{{#if js.event}}
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'js-events'}}Events{{/heading}}
|
||||||
|
|
||||||
|
<p>These events will fire from any element with a {{title}} plugin attached.</p>
|
||||||
|
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Name</th><th>Description</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each js.event}}
|
||||||
|
<tr>
|
||||||
|
<td>{{this.name}}.zf.{{../title}}</td>
|
||||||
|
<td>{{this.description}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
{{#if js.function}}
|
||||||
|
<section>
|
||||||
|
{{#heading 3 'js-functions'}}Functions{{/heading}}
|
||||||
|
|
||||||
|
{{#each js.function}}
|
||||||
|
<section>
|
||||||
|
{{#heading 4 'js-class'}}{{../../js.class.0.name}}.{{this.name}}{{/heading}}
|
||||||
|
|
||||||
|
{{md this.description}}
|
||||||
|
|
||||||
|
{{#if this.fires}}
|
||||||
|
<p><strong>Fires these events:</strong>
|
||||||
|
{{#each this.fires}}
|
||||||
|
{{this}}
|
||||||
|
{{/each}}
|
||||||
|
</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.params}}
|
||||||
|
<table class="docs-variable-table">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
|
||||||
|
</thead>
|
||||||
|
{{#each this.params}}
|
||||||
|
<tr>
|
||||||
|
<td><code>{{this.name}}</code></td>
|
||||||
|
<td>{{this.type.names.[0]}}</td>
|
||||||
|
<td>{{this.description}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</table>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#unless @last}}<hr>{{/unless}}
|
||||||
|
</section>
|
||||||
|
{{/each}}
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if sass}}
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<section class="docs-building-blocks">
|
||||||
|
{{#heading 2 'building-blocks'}}Building Blocks using {{title}}{{/heading}}
|
||||||
|
|
||||||
|
<p><a href="http://zurb.com/building-blocks">Building Blocks</a> is a ZURB-curated resource with useful code snippets that use Foundation components. Here are a few for this component:</p>
|
||||||
|
|
||||||
|
<div class="row up-1 medium-up-2 large-up-3" data-building-blocks>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{{!-- End container for docs --}}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{{!-- End container for docs and table of contents --}}
|
||||||
|
|
||||||
|
</article>
|
||||||
73
vendor/assets/foundation-emails/docs/layouts/default.html
vendored
Normal file
73
vendor/assets/foundation-emails/docs/layouts/default.html
vendored
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
|
||||||
|
<html class="no-js" lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="{{description}}">
|
||||||
|
<link rel="icon" href="assets/img/icons/favicon.ico" type="image/x-icon">
|
||||||
|
<title>Foundation for Emails 2 Docs{{#unlesspage 'index'}} | {{title}}{{/unlesspage}}</title>
|
||||||
|
<link href="assets/css/docs.css" rel="stylesheet" />
|
||||||
|
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
|
||||||
|
<!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
|
||||||
|
</head>
|
||||||
|
<body class="docs-emails">
|
||||||
|
|
||||||
|
<div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
|
||||||
|
|
||||||
|
{{> off-canvas}}
|
||||||
|
|
||||||
|
<div class="off-canvas-content" data-off-canvas-content>
|
||||||
|
<!-- Info Banner For Announcements or Links -->
|
||||||
|
<!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
|
||||||
|
<div class="info">
|
||||||
|
<h5>Foundation 6 is here!</h5>
|
||||||
|
</div>
|
||||||
|
</a> -->
|
||||||
|
|
||||||
|
{{> navigation}}
|
||||||
|
{{> mobile-navigation}}
|
||||||
|
|
||||||
|
<input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
|
||||||
|
|
||||||
|
<div class="expanded row">
|
||||||
|
<div class="medium-9 large-10 medium-push-3 large-push-2 columns">
|
||||||
|
<!-- body include must be left aligned for proper indentation of docs code examples -->
|
||||||
|
{{> body}}
|
||||||
|
</div>
|
||||||
|
<div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
|
||||||
|
{{> component-list}}
|
||||||
|
{{> course-callout}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{> footer}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var _gaq = _gaq || [];
|
||||||
|
_gaq.push(
|
||||||
|
['_setAccount', 'UA-2195009-2'],
|
||||||
|
['_trackPageview'],
|
||||||
|
['b._setAccount', 'UA-2195009-27'],
|
||||||
|
['c._setAccount', 'UA-2195009-47'],
|
||||||
|
['b._trackPageview']
|
||||||
|
);
|
||||||
|
(function() {
|
||||||
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||||
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||||
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/what-input/1.2.3/what-input.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.9/clipboard.min.js"></script>
|
||||||
|
<script src="assets/js/docs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
215
vendor/assets/foundation-emails/docs/pages/alignment.md
vendored
Normal file
215
vendor/assets/foundation-emails/docs/pages/alignment.md
vendored
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
---
|
||||||
|
title: Alignment
|
||||||
|
description: Centering, images, text, buttons, and menus in HTML emails made easy.
|
||||||
|
---
|
||||||
|
|
||||||
|
Foundation includes a handful of helpful alignment classes to add common positioning behaviors to elements.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Text Alignment
|
||||||
|
|
||||||
|
You can align text with the `.text-x` classes. These classes will appy to the large breakpoint as well as the small.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<style>.columns {border: 1px solid #333;}</style>
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<p class="text-left">Left (default)</p>
|
||||||
|
</columns>
|
||||||
|
<columns>
|
||||||
|
<p class="text-center">center</p>
|
||||||
|
</columns>
|
||||||
|
<columns>
|
||||||
|
<p class="text-right">right</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you need to change text alignment only on the small breakpoint, you can use the `.small-text-x` classes.
|
||||||
|
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<style>.columns {border: 1px solid #333;}</style>
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<p class="small-text-left">Left on small</p>
|
||||||
|
</columns>
|
||||||
|
<columns>
|
||||||
|
<p class="small-text-center">Center on small</p>
|
||||||
|
</columns>
|
||||||
|
<columns>
|
||||||
|
<p class="small-text-right">Right on small</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can combine these classes to override the behavior on the small breakpoint.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<style>.columns {border: 1px solid #333;}</style>
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<p class="text-center small-text-left">Center, small left</p>
|
||||||
|
</columns>
|
||||||
|
<columns>
|
||||||
|
<p class="text-right small-text-center">Right, small center</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Centering Images
|
||||||
|
|
||||||
|
Just wrap the `<center>` around an image you’ll be good to go. Inky will handle the magic behind the scenes! In the CSS version, you’ll add a `.float-center` class, `align="center"` attribute and wrap a <code><center></code> tag to make sure things are centered.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/200?text=center" alt="image of clever meme that made me chuckle">
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
So to be clear: with Inky you only need to wrap an image in `<center>` tag to reliably center it.
|
||||||
|
|
||||||
|
In the CSS version, our centering recipe includes three ingredients:
|
||||||
|
|
||||||
|
- `.float-center` class on the `<img>` element
|
||||||
|
- `align="center"` attribute on the `<img>` element
|
||||||
|
- Wrap the `<img>` with `<center>` tags (needed for Outlook 2007, 2010, and 2011)
|
||||||
|
|
||||||
|
Also, it's not really a float, but the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or auto width.
|
||||||
|
|
||||||
|
If you need to center an image only on mobile clients, you can apply the `.small-float-center` class. A good use case would be centering an image smaller than the full column width on devices like an iPhone 5, iPhone 6, and Android 4.4.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns small="12" large="3" class="large-offset-1">
|
||||||
|
<img class="small-float-center" src="http://placehold.it/200?text=small-center" alt="please don't forget me">
|
||||||
|
</columns>
|
||||||
|
<columns small="12" large="8">
|
||||||
|
<h4 class="small-text-center">What is the deal?</h4>
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Aligning Images Left and Right
|
||||||
|
|
||||||
|
You can also align images to the left or the right.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<img class="float-left" src="http://placehold.it/200?text=left" alt="">
|
||||||
|
<img class="float-center" src="http://placehold.it/200?text=center" alt="">
|
||||||
|
<img class="float-right" src="http://placehold.it/200?text=right" alt="">
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Centering a Button
|
||||||
|
|
||||||
|
Wrap the button with `<center>` tags to center it.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<center>
|
||||||
|
<button href="#">Centered Button</button>
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Centering Columns
|
||||||
|
|
||||||
|
Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<style>.columns {border: 1px solid #333;}</style>
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns></columns>
|
||||||
|
<columns>Centering a column</columns>
|
||||||
|
<columns></columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns></columns>
|
||||||
|
<columns small="3">Centering a column</columns>
|
||||||
|
<columns></columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns></columns>
|
||||||
|
<columns small="7">Centering a column</columns>
|
||||||
|
<columns></columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you don't add a size attribute like `small="x"` then the columns will be equal width.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Centering a Menu
|
||||||
|
|
||||||
|
Centering the menu is a common practice. Wrapping the menu in `<center>` tags will achieve this.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vertical Alignment
|
||||||
|
|
||||||
|
You can vertically align your content within columns by using `valign` attribute. The available values are `top`, `middle`, and `bottom`.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<row>
|
||||||
|
<columns large="3" valign="top">
|
||||||
|
<img class="float-right" src="http://placehold.it/50" alt="">
|
||||||
|
</columns>
|
||||||
|
<columns large="3" valign="bottom">
|
||||||
|
<h4>Bottom</h4>
|
||||||
|
</columns>
|
||||||
|
<columns large="3" valign="middle">
|
||||||
|
<h4 style="margin-bottom: 0;" class="text-right">HEADLINE</h4>
|
||||||
|
<p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
|
||||||
|
</columns>
|
||||||
|
<columns large="3" valign="middle">
|
||||||
|
<img class="small-float-center" src="http://placehold.it/250" alt="">
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
<br>
|
||||||
83
vendor/assets/foundation-emails/docs/pages/button.md
vendored
Normal file
83
vendor/assets/foundation-emails/docs/pages/button.md
vendored
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
title: Button
|
||||||
|
description: Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
|
||||||
|
sass: scss/components/_button.scss
|
||||||
|
---
|
||||||
|
|
||||||
|
Creating a bullet-proof button that works in all email clients requires a table nested inside of a table. Put the class `.button` on the outer `<table>`. Inside of the inner table, put an `<a>` with an `href` attribute containing your link.
|
||||||
|
|
||||||
|
In Inky HTML, the `<button>` tag creates all of this markup for you.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<button href="#">Button</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
<div class="callout primary">
|
||||||
|
- 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>
|
||||||
|
- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sizing
|
||||||
|
|
||||||
|
By default, buttons are sized by the content and padding within them. You can also size a button according to it's parent container (see Expanded section).
|
||||||
|
|
||||||
|
Buttons can be made larger or smaller by adding the class `.tiny`, `.small`, or `.large` to a button's outer `<table>`.
|
||||||
|
|
||||||
|
In Inky HTML, add the same class to the `<button>` tag.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<button href="#" class="tiny">Tiny Button</button>
|
||||||
|
<button href="#" class="small">Small Button</button>
|
||||||
|
<button href="#">Default Button</button>
|
||||||
|
<button href="#" class="large">Large Button</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
Don't forget the `href=""` ;)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Expanded
|
||||||
|
|
||||||
|
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>`.
|
||||||
|
|
||||||
|
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`.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<row>
|
||||||
|
<column>
|
||||||
|
<button href="#" class="expanded">Expanded Button</button>
|
||||||
|
<button href="#" class="small-expanded">Expand small only</button>
|
||||||
|
</column>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Coloring
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<button href="#" class="secondary">Secondary Button</button>
|
||||||
|
<button href="#" class="success">Success Button</button>
|
||||||
|
<button href="#" class="warning">Warning Button</button>
|
||||||
|
<button href="#" class="alert">Alert Button</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Radius and Round
|
||||||
|
|
||||||
|
Creating buttons with a radius or rounded edges (like a pill) can be achieved by adding the `.radius` or `.rounded` class to a button.
|
||||||
|
|
||||||
|
*Note - border-radius is not supported on Outlook 2000-2013, Yahoo! Mail, and Android 4+ (Gmail)*
|
||||||
|
|
||||||
|
*Note - In order to create `.radius` and `.rounded` buttons, the border needs to be removed.*
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<button href="#" class="radius">Radius</button>
|
||||||
|
<button href="#" class="rounded">Round</button>
|
||||||
|
|
||||||
|
```
|
||||||
62
vendor/assets/foundation-emails/docs/pages/callout.md
vendored
Normal file
62
vendor/assets/foundation-emails/docs/pages/callout.md
vendored
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
title: Callout
|
||||||
|
description: Formerly panels, callouts can be used to create sidebar panels or call out important content in an email.
|
||||||
|
sass: scss/components/_callout.scss
|
||||||
|
tags:
|
||||||
|
- panel
|
||||||
|
- alert
|
||||||
|
---
|
||||||
|
|
||||||
|
## Basics
|
||||||
|
|
||||||
|
A Callout adds a border, background, and some padding. Callouts use a full table structure, with the class `.callout` on the outer `<table>` (for bottom margin) and the `.callout-inner` applied to the innermost `<th>`.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
<p>Not in a callout :(</p>
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<callout class="secondary">
|
||||||
|
<p>I'm in a callout!</p>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<callout class="primary">
|
||||||
|
<row>
|
||||||
|
<columns small="12">
|
||||||
|
<p>This whole row is in a callout!</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</callout>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Coloring Classes
|
||||||
|
|
||||||
|
The color of a callout can be changed by adding the class `.primary`, `.success`, `.warning`, or `.alert` to the element. A callout without a color class will have a white background.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<callout>
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
<callout class="primary">
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
|
||||||
|
<callout class="success">
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
|
||||||
|
<callout class="warning">
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
|
||||||
|
<callout class="alert">
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
```
|
||||||
173
vendor/assets/foundation-emails/docs/pages/compatibility.md
vendored
Normal file
173
vendor/assets/foundation-emails/docs/pages/compatibility.md
vendored
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
---
|
||||||
|
title: Compatibility
|
||||||
|
description: Foundation for Emails is battle-tested in the trickiest email clients, like Microsoft Outlook.
|
||||||
|
---
|
||||||
|
|
||||||
|
Foundation for Emails is designed for and tested on numerous email clients and devices. Here's the rundown on what type of compatibility to expect in general. Because email clients have varying CSS support and specific quirks, each individual component will have more information on compatibility.
|
||||||
|
|
||||||
|
<table class="comparison-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td>Email Client/Device</td>
|
||||||
|
<td class="marker">Compatibility</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Apple Mail:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Apple Mail 7</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Apple Mail 8</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Outlook:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2000</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2002</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2003</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2007</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2010</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2011</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2013</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Outlook 2016</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Mobile:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Android 4.4</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Gmail app for Android</td>
|
||||||
|
<td class="marker mostly">✓ *</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>iPhone 5</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>iPhone 6</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>iPad</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>iPad Mini</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Gmail:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Internet Explorer</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Firefox</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Chrome</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Google Apps:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Internet Explorer</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Firefox</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Chrome</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Office 365:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Internet Explorer</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Firefox</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Chrome</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Outlook.com:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Internet Explorer</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Firefox</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Chrome</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="divider"><strong>Yahoo! Mail:</strong></td>
|
||||||
|
<td class="divider"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Internet Explorer</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Firefox</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>In Chrome</td>
|
||||||
|
<td class="marker yes">✓</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
** *Gmail app for Android:** Works - does not recognize media queries so it will render large breakpoint.
|
||||||
181
vendor/assets/foundation-emails/docs/pages/css-guide.md
vendored
Normal file
181
vendor/assets/foundation-emails/docs/pages/css-guide.md
vendored
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
---
|
||||||
|
title: Getting Started with CSS
|
||||||
|
description: Get started with the CSS version of Foundation for Emails.
|
||||||
|
---
|
||||||
|
|
||||||
|
Foundation for Emails takes the pain out of developing HTML emails by giving you a set of powerful, tested components out of the box. This includes a fully-responsive grid, buttons, callouts, menus, and more.
|
||||||
|
|
||||||
|
In this Getting Started guide, we'll download Foundation for Emails, construct the basic grid, and then inline our email so it's ready to test.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Installing
|
||||||
|
|
||||||
|
If you haven't yet, download the starter files for Foundation for Emails. They include the boilerplate HTML needed for an email, and all of the CSS for Foundation.
|
||||||
|
|
||||||
|
<a href="http://foundation.zurb.com/downloads/foundation-emails.zip" class="large button">Download Foundation for Emails</a>
|
||||||
|
|
||||||
|
Unzip the folder and open it in your text editor of choice.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
Here's a breakdown of the files in the folder you got:
|
||||||
|
|
||||||
|
- `css/foundation-emails.css`: the Foundation for Emails CSS.
|
||||||
|
- `index.html`: a blank boilerplate to get started.
|
||||||
|
- `templates/`: a set of pre-made templates following common email layouts.
|
||||||
|
|
||||||
|
We'll be writing a layout from scratch, so open up `index.html`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Boilerplate
|
||||||
|
|
||||||
|
Inside `index.html`, you can see the boilerplate needed to make an HTML work, with comments explaining what does what.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Emails use the XHTML Strict doctype -->
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<!-- The character set should be utf-8 -->
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width"/>
|
||||||
|
<!-- Link to the email's CSS, which will be inlined into the email -->
|
||||||
|
<link rel="stylesheet" href="assets/css/foundation-emails.css">
|
||||||
|
<style>
|
||||||
|
<!-- Your CSS to inline should be added here -->
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- Wrapper for the body of the email -->
|
||||||
|
<table class="body" data-made-with-foundation>
|
||||||
|
<tr>
|
||||||
|
<!-- The class, align, and <center> tag center the container -->
|
||||||
|
<td class="float-center" align="center" valign="top">
|
||||||
|
<center>
|
||||||
|
<!-- The content of your email goes here. -->
|
||||||
|
</center>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Grid Basics
|
||||||
|
|
||||||
|
Foundation for Emails includes many common elements needed to make HTML emails: a grid, typography styles, buttons, callouts, and more.
|
||||||
|
|
||||||
|
The markup required to create HTML emails that work in all email clients is *complicated*, and involves writing many tables. However, all of Foundation's components are thoroughly tested in every major email client, including the problematic ones like Outlook. The rigid structure ensures your designs don't look off in any email client.
|
||||||
|
|
||||||
|
Let's start by building a basic grid. To do that, we need three pieces: a container, a row, and then some columns.
|
||||||
|
|
||||||
|
### Container
|
||||||
|
|
||||||
|
Most Foundation for Emails components are full tables, including the container. Inside the `<center>` tag of `index.html`, add this table code:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
The **container** will wrap the body of your entire email. It applies a maximum width to the body of the email. Every email needs this bit of boilerplate.
|
||||||
|
|
||||||
|
### Row
|
||||||
|
|
||||||
|
Next, let's build the grid itself, starting with the row. **Rows** group columns together into a unit. Inside of your container, add this table:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Columns
|
||||||
|
|
||||||
|
Columns divide your layout into horizontal sections that sit side-by-side. On small screens, these columns stack on top of each other to save space—unless you set them up to keep their layout on small screens.
|
||||||
|
|
||||||
|
Inside of your row (the innermost `<tr>`), add one column using this code:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="small-12 large-6 first columns">
|
||||||
|
Column One
|
||||||
|
</th>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
In the above example, we used the classes `.small-12` and `.large-6` to define the size of the column on small vs. large email clients. Foundation uses a 12-column grid, so on mobile clients, the column stretches the full width of the page, and on desktop clients, the column is half the width of the row.
|
||||||
|
|
||||||
|
Since this first column is half-width, we need a second one to go with it. *After* the `<th>` for the first column, add the code for the second column:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="small-12 large-6 first columns">
|
||||||
|
Column One
|
||||||
|
</th>
|
||||||
|
<th class="small-12 large-6 last columns">
|
||||||
|
Column Two
|
||||||
|
</th>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
You may have noticed the `.first` and `.last` classes on the column. The first column in a row needs the `.first` class, and the last column in a row needs the `.last` class. This is explained more in the [First and Last Classes](grid.html#first-and-last-classes) section of the grid documentation.
|
||||||
|
|
||||||
|
That's a lot of HTML! Let's look at what it is at a high level:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Container -->
|
||||||
|
<!-- Row -->
|
||||||
|
<!-- Column One -->
|
||||||
|
<!-- Column Two -->
|
||||||
|
```
|
||||||
|
|
||||||
|
The CSS classes are always on the outermost table element, so that's an easy way to identify where a component starts. The container starts at the table with the `.container` class, the row starts at the table with the `.row` class, and so on.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inlining
|
||||||
|
|
||||||
|
Now that we have a basic email, the last thing we need to do before we can send it is *inline* it. This is the process of injecting all of the CSS for the email into the HTML, so that it works as a self-contained file.
|
||||||
|
|
||||||
|
Email clients like Gmail and Outlook strip out `<style>` tag from the `<head>` and Gmails strips it from the `<body>` of the email as well. It's best to have your CSS written inline within your markup. Hand writing all your CSS inline in a style tag would be a real pain and would take a long time.
|
||||||
|
|
||||||
|
Our [web inliner](http://foundation.zurb.com/emails/inliner-v2.html) automates this process for you. To use it, paste in the contents of `index.html` into the HTML field, paste in the contents of `css/foundation-emails.css` into the CSS field, and then press "Inline!". Once it's done, you'll see a large soup of HTML that is your inlined email.
|
||||||
|
|
||||||
|
Your email's CSS will include media queries for responsive styling which the inliner tool will move into the `<body>` so they are preserved.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
Now that you have an inlined email, you'll need to test it in real email clients to verify that it looks correct. All of Foundation's built-in components have already been tested in every major email client, so we've done a lot of the work for you. However, you'll want to test your email before you send it out to the masses.
|
||||||
|
|
||||||
|
The most popular tool for testing emails is [Litmus](https://litmus.com/). All you have to do is paste in the HTML of an email, and you get a live preview in any email client you want.
|
||||||
|
|
||||||
|
It's up to you to choose what email clients are important to test in, but you can [see our compatibility list](compatibility.html) for recommendations.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
You've successfully installed Foundation for Emails, and written, inlined, and tested your first email! To keep going with the framework, you can check out the documentation for the other framework components, including [buttons](button.html), [callouts](callout.html), [menus](menu.html).
|
||||||
|
|
||||||
|
If you're interested in going in-depth on the framework with the Foundation team, [check out our master class on Foundation for Emails](http://zurb.com/university/responsive-emails-foundation), an on-demand video series that explores every aspect of email design workflow.
|
||||||
110
vendor/assets/foundation-emails/docs/pages/global.md
vendored
Normal file
110
vendor/assets/foundation-emails/docs/pages/global.md
vendored
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
title: Global Styles
|
||||||
|
description: Our global CSS includes helpful resets to ensure consistent styling across email clients.
|
||||||
|
sass: scss/_global.scss
|
||||||
|
---
|
||||||
|
|
||||||
|
## Font Sizing
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
<div class="row small-up-1 medium-up-3 large-up-5">
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-primary" style="background-color: #2199e8"></div>
|
||||||
|
<p>Primary</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-secondary"></div>
|
||||||
|
<p>Secondary</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-success"></div>
|
||||||
|
<p>Success</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-warning"></div>
|
||||||
|
<p>Warning</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-alert"></div>
|
||||||
|
<p>Alert</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-white"></div>
|
||||||
|
<p>White</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-light-gray"></div>
|
||||||
|
<p>Light Gray</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-medium-gray"></div>
|
||||||
|
<p>Medium Gray</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-dark-gray"></div>
|
||||||
|
<p>Dark Gray</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="docs-color-block">
|
||||||
|
<div class="docs-color-block-black"></div>
|
||||||
|
<p>Black</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Color Classes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<button class="button" href="#">Primary Action</button>
|
||||||
|
<button class="secondary button" href="#">Secondary Action</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<callout class="success">
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
<callout class="alert">
|
||||||
|
<p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
|
</callout>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive Breakpoint
|
||||||
|
|
||||||
|
Unlike Foundation for Sites and Apps, 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.
|
||||||
|
|
||||||
|
**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:
|
||||||
|
|
||||||
|
- `$global-width`: width of the container. It's 580px by default.
|
||||||
|
- `$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.
|
||||||
|
- `$global-breakpoint`: The breakpoint at which the layout shifts. It's the variable that adds `$global-width` and `$global-gutter` together.
|
||||||
118
vendor/assets/foundation-emails/docs/pages/grid.md
vendored
Normal file
118
vendor/assets/foundation-emails/docs/pages/grid.md
vendored
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
title: The Grid
|
||||||
|
description: If you're familiar with the Foundation for Sites grid, you'll be right at home working with Foundation for Emails.
|
||||||
|
sass: scss/grid/_grid.scss
|
||||||
|
---
|
||||||
|
|
||||||
|
The grid has two core elements: the *row* and *column*. Rows define horizontal sections of content, and columns carve up the row into side-by-side sections.
|
||||||
|
|
||||||
|
## Container
|
||||||
|
|
||||||
|
All emails should have a container element. This gives the email a maximum width for email clients on larger screens. It also orients the email in the center.
|
||||||
|
|
||||||
|
A container is a full table, so it needs the tags `<table>`, `<tr>`, and finally `<td>`. The class `.container` goes on the `<table>`.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>All the rows go here</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rows
|
||||||
|
|
||||||
|
A row is a `<table>` with a `<tbody>` and `<tr>`. Inside of this `<tr>`, you'll place each individual column. The `<table>` also has the class `.row`.
|
||||||
|
|
||||||
|
In Inky HTML, use the `<row>` tag to create a row.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
Columns go here
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Columns
|
||||||
|
|
||||||
|
The structure of a column is a bit more involved. At the top level, a column is a `<th>` with the class `.columns`.
|
||||||
|
|
||||||
|
Inside of the `<th>` is another full table. The content of your column goes inside of a `<th>`. Right below that table header should be *another* `<th>` with a class of `.expander`. This empty element helps the column expand to be full-width on small screens.
|
||||||
|
|
||||||
|
Here's our full column syntax so far:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<th class="columns first last">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>This is a column. Columns contain your content.</th>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</th>
|
||||||
|
```
|
||||||
|
|
||||||
|
In Inky HTML, use the `<columns>` class to create a column.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<columns>This is a column. Columns contain your content.</columns>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sizing
|
||||||
|
|
||||||
|
A column has a *size* between 1 and 12—this is how many columns wide the element is. Foundation uses a 12-column grid, so 6 columns is half the width of the whole row.
|
||||||
|
|
||||||
|
Set column sizes with the classes `.large-n` and `.small-n`, where `n` is how wide the column is. The `.small-` size is applied on mobile email clients, while the `.large-` size is applied on desktop email clients.
|
||||||
|
|
||||||
|
In Inky HTML, set the attribute `small` or `large` on the `<columns>` tag with the size you want. If you don't fill in `small`, it will use 12 by default. If you fill in `small` but not `large`, `large` will use the same value as `small`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<columns small="12" large="6"></columns>
|
||||||
|
```
|
||||||
|
|
||||||
|
### First and Last Classes
|
||||||
|
|
||||||
|
The `.first` class adds the appropriate amount of padding-left to space the content away from the container’s edge. The `.last` class is added to your last set of columns in a row to add padding-right to the column. If you have columns in between `.first` and `.last`, these classes are not needed on the middle columns.
|
||||||
|
|
||||||
|
The reason these classes exist is that CSS properties like `:last-child` don’t work in most email clients so a class is needed.
|
||||||
|
|
||||||
|
In Inky HTML, these classes are added for you.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<columns large="4">One</columns>
|
||||||
|
<columns large="4">Two</columns>
|
||||||
|
<columns large="4">Three</columns>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Expander
|
||||||
|
|
||||||
|
The `.expander` prevents a rendering bug in Outlook that sometimes keeps the columns from expanding to full width. Instead of ignoring the width attribute and politely taking up only as much space as the content dictates (default `<th>` behavior), the presence of the expander `<th>` causes the content `<th>` to become “greedy” and take up as much space as is given to it, up to the value specified in the width (which is 100%). They’re set to not display, but they kick the total width up over 100%, which forces their sibling `<th>` to expand fully.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Collapsing
|
||||||
|
|
||||||
|
Collapsing a row removes the gutters from every column, which is the spacing between them. Add the class `.collapse` to a row to enable this.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<row class="collapse">
|
||||||
|
<columns large="6"><img src="http://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
|
||||||
|
<columns large="6"><img src="http://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Offsets
|
||||||
|
|
||||||
|
Offsets add spacing to the left of a column. Use this if all the columns in a row don't add up to 12, and you want to mess with the spacing between them.
|
||||||
|
|
||||||
|
Use the class `.large-offset-n` to create an offset, where `n` is the amount of columns to offset by. So, for example, `.large-offset-3` would offset the column by 25% of the width of the row. Think of it as pushing the columns over from the left.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<row>
|
||||||
|
<columns large="3" class="large-offset-3"><img src="http://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
|
||||||
|
<columns large="3"><img src="http://placehold.it/150x150/999999" alt=""></columns>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
92
vendor/assets/foundation-emails/docs/pages/index.md
vendored
Normal file
92
vendor/assets/foundation-emails/docs/pages/index.md
vendored
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
title: Foundation for Emails
|
||||||
|
description: Use Foundation for Emails to design responsive HTML emails that work in any email client.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
There are two ways to get started with Foundation for Emails: the CSS version and the Sass version.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
<a href="css-guide.html" class="large button">Get Started with CSS Version</a>
|
||||||
|
|
||||||
|
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.**
|
||||||
|
|
||||||
|
<a href="sass-guide.html" class="large button">Get Started with Sass Version</a>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's in the Box?
|
||||||
|
|
||||||
|
Get to know the pieces of Foundation.
|
||||||
|
|
||||||
|
### General
|
||||||
|
|
||||||
|
<div class="row up-1 medium-up-2 large-up-3 docs-big-index">
|
||||||
|
<div class="column"><a href="sass.html">
|
||||||
|
<strong>Using Sass</strong>
|
||||||
|
<p>Loading and customizing the Foundation for Emails Sass.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="inky.html">
|
||||||
|
<strong>Using Inky</strong>
|
||||||
|
<p>Our custom HTML tags for writing email components.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="zurb-stack.html">
|
||||||
|
<strong>ZURB Stack</strong>
|
||||||
|
<p>An all-in-one solution for email development.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="compatibility.html">
|
||||||
|
<strong>Compatibility</strong>
|
||||||
|
<p>Foundation works with every key email client—even Outlook.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="migration.html">
|
||||||
|
<strong>Migrate from Ink</strong>
|
||||||
|
<p>Upgrade your Ink emails to Foundation for Emails 2.</p>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Components
|
||||||
|
|
||||||
|
<div class="row up-1 medium-up-2 large-up-3 docs-big-index">
|
||||||
|
<div class="column"><a href="grid.html">
|
||||||
|
<strong>The Grid</strong>
|
||||||
|
<p>A fully responsive grid with support for small and large layouts.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="global.html">
|
||||||
|
<strong>Global Styles</strong>
|
||||||
|
<p>Core framework styles and Sass variables.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="alignment.html">
|
||||||
|
<strong>Alignment Classes</strong>
|
||||||
|
<p>Utility classes to align text and images.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="button.html">
|
||||||
|
<strong>Buttons</strong>
|
||||||
|
<p>Buttons with support for multiple sizes and colors.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="callout.html">
|
||||||
|
<strong>Callout</strong>
|
||||||
|
<p>Colored panels to use for sectioning or calls to action.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="menu.html">
|
||||||
|
<strong>Menu</strong>
|
||||||
|
<p>Horizontal or vertical list of links.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="spacer.html">
|
||||||
|
<strong>Spacer</strong>
|
||||||
|
<p>Create consistant vertical spacing between elements.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="wrapper.html">
|
||||||
|
<strong>Wrapper</strong>
|
||||||
|
<p>Helps create full with or fluid backgrounds.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="typography.html">
|
||||||
|
<strong>Typography</strong>
|
||||||
|
<p>Core styles for paragraphs, headings, and more.</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="column"><a href="visibility.html">
|
||||||
|
<strong>Visibility</strong>
|
||||||
|
<p>Utility classes to control how content appears at different screen sizes.</p>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
73
vendor/assets/foundation-emails/docs/pages/inky.md
vendored
Normal file
73
vendor/assets/foundation-emails/docs/pages/inky.md
vendored
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
---
|
||||||
|
title: Inky
|
||||||
|
description: Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails.
|
||||||
|
library: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns>Put content in me!</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
<div class="callout warning">
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tags
|
||||||
|
|
||||||
|
Inky currently supports these custom tags:
|
||||||
|
|
||||||
|
- **Grid:**
|
||||||
|
- `<container>`
|
||||||
|
- `<row>`
|
||||||
|
- `<columns>`
|
||||||
|
- **Button:** `<button>`
|
||||||
|
- **Callout:** `<callout>`
|
||||||
|
- **Menu:**
|
||||||
|
- `<menu>`
|
||||||
|
- `<item>`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FAQ
|
||||||
|
|
||||||
|
Here are some frequently asked questions about Inky:
|
||||||
|
|
||||||
|
**What’s a templating language?**
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**How does it work?**
|
||||||
|
|
||||||
|
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/zurb/foundation-emails/blob/v2.0/gulpfile.js#L149).
|
||||||
|
|
||||||
|
<a id="how-to-inky"></a>
|
||||||
|
**How do I start Inky?**
|
||||||
|
|
||||||
|
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)
|
||||||
|
|
||||||
|
**Do I have to have the Gulp tasks running for Inky to work?**
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Do I have to use Inky? What if I just want to code my own email in tables?**
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**What are all of Inky’s tags and components?**
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
||||||
|
**I found a bug—what should I do?**
|
||||||
|
|
||||||
|
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).
|
||||||
92
vendor/assets/foundation-emails/docs/pages/media-query.md
vendored
Normal file
92
vendor/assets/foundation-emails/docs/pages/media-query.md
vendored
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
title: Media Queries
|
||||||
|
description: Use media queries to design responsive HTML emails that work in any email client.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Default Media Query
|
||||||
|
|
||||||
|
CSS media queries allow us to adjust the display and orientation of content at different screen sizes.
|
||||||
|
|
||||||
|
Foundation for Emails has one breakpoint:
|
||||||
|
|
||||||
|
- Small: 596 pixels or smaller.
|
||||||
|
|
||||||
|
Many components can be modified at different screen sizes using special breakpoint classes. The grid is the most obvious example.
|
||||||
|
|
||||||
|
**CSS Version**
|
||||||
|
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`.
|
||||||
|
|
||||||
|
**Inky Version**
|
||||||
|
In Inky, you can define the width by using the `small="x"` and `large="x"` attributes.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<style>
|
||||||
|
.columns {border: 1px solid #333;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns small="6" large="4">4 columns, 6 columns on small</columns>
|
||||||
|
<columns small="6" large="8">8 columns, 6 columns on small</columns>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Using the Media Query
|
||||||
|
|
||||||
|
The media query will wrap the styles you wish to affect. Because there is only one breakpoint to consider and it's a max-width, your mobile styles or overrides will go in a media query. If you're using the CSS version of Foundation, use this media query to imitate the core breakpoint:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
/* Small only */
|
||||||
|
@media screen and (max-width: 596px) {}
|
||||||
|
```
|
||||||
|
|
||||||
|
The Sass version of Foundation uses a convenient variable to set the breakpoint width. Use this media query to imitate the core breakpoint:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
/* Small only */
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example usage
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.newsletter-title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 9px;
|
||||||
|
padding-left: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
p {
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changing the Breakpoint
|
||||||
|
|
||||||
|
Changing the breakpoint is easy in the Sass version. In the `_settings.scss` you can control the width of this breakpoint.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
$global-breakpoint: $global-width + $global-gutter;
|
||||||
|
```
|
||||||
|
|
||||||
|
The `$global-breakpoint` is a combined width of the `$global-width` and the `$global gutter`. You could hard-code a pixel value here instead of the variables or change the `$global-width` (recommended) as it takes account for the gutter calculation.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
$global-width: 580px;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
52
vendor/assets/foundation-emails/docs/pages/menu.md
vendored
Normal file
52
vendor/assets/foundation-emails/docs/pages/menu.md
vendored
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
title: Menu
|
||||||
|
description: Use the menu component to create a horizontal or vertical list of links.
|
||||||
|
sass: scss/components/_menu.scss
|
||||||
|
---
|
||||||
|
|
||||||
|
## Basics
|
||||||
|
|
||||||
|
A menu is a `<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.
|
||||||
|
|
||||||
|
In Inky HTML, use the tag `<menu>` to make a menu, and the tag `<item>` to make an item.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<menu>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
</menu>
|
||||||
|
```
|
||||||
|
|
||||||
|
<div class="callout primary">
|
||||||
|
- 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>
|
||||||
|
- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vertical Menu
|
||||||
|
|
||||||
|
Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<menu class="vertical">
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
</menu>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vertical Menu on the Small Breakpoint
|
||||||
|
|
||||||
|
Menus align horizontally by default. To switch to a vertical menu on the small breakpoint only, add the class `.small-vertical` to the menu. This works well because the email clients that support media queries fall into the small breakpoint like iPhones and Android 4.4.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<menu class="small-vertical">
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
<item href="http://zurb.com">Item</item>
|
||||||
|
</menu>
|
||||||
|
```
|
||||||
511
vendor/assets/foundation-emails/docs/pages/migration.md
vendored
Normal file
511
vendor/assets/foundation-emails/docs/pages/migration.md
vendored
Normal file
@ -0,0 +1,511 @@
|
|||||||
|
---
|
||||||
|
title: Foundation for Emails 2 Migration Guide
|
||||||
|
description: This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to Foundation for Emails 2.
|
||||||
|
tags:
|
||||||
|
- upgrade
|
||||||
|
---
|
||||||
|
|
||||||
|
## What’s new?
|
||||||
|
|
||||||
|
- **Streamlined and updated responsive grid:** We’ve simplified the markup in the new version so it’s faster and easier to code. The new responsive grid in Emails 2 requires fewer tags and classes. It’s also now responsive on Android Native!
|
||||||
|
- **Inky templating language:** With Inky you can write less code and get more done. The Inky language gets you out of tables and into a simpler, more web-like, HTML.
|
||||||
|
- **Built with Sass:** Now faster than ever, you can easily make sweeping visual changes to your email that reflect your brand styles - all within one settings file.
|
||||||
|
- **ZURB Stack:** All kinds of task automation - [Panini](http://foundation.zurb.com/sites/docs/panini.html), our Handlebars templates, compiling Sass, BrowserSync, image compression, and auto inlining are built in to speed up your workflow.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
First off, you'll want to choose a version to get started with.
|
||||||
|
<br>[CSS version](css-guide.html) or the [Sass version with Inky](sass-guide.html)
|
||||||
|
|
||||||
|
When migrating, the following items can be translated easily from 1 to 2:
|
||||||
|
- Boilerplate
|
||||||
|
- Visibility
|
||||||
|
- Typography
|
||||||
|
- Text helper classes
|
||||||
|
- Container
|
||||||
|
- Panel
|
||||||
|
- Media Queries
|
||||||
|
|
||||||
|
Other areas may require more changes to work correctly including:
|
||||||
|
- Grid
|
||||||
|
- Sub-grid (now part of Grid)
|
||||||
|
- Button class
|
||||||
|
|
||||||
|
What’s new that you might want to use:
|
||||||
|
- Menu - Horizontal
|
||||||
|
- Menu - Vertical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## HTML
|
||||||
|
|
||||||
|
With Foundation for Emails 2, confusing and tedious tables are a thing of the past. The new Inky markup will save you time and energy coding your emails. It looks like:
|
||||||
|
|
||||||
|
```
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<column small="12" large="4">
|
||||||
|
Content
|
||||||
|
</column>
|
||||||
|
<column small="12" large="8">
|
||||||
|
Content
|
||||||
|
</column>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can use it to create the grid structure, buttons, and other components. We’ll go into this in detail in the components section. We'll explain more in the <a href="#grid">Grid section</a>.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CSS & Sass
|
||||||
|
|
||||||
|
Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings.
|
||||||
|
|
||||||
|
These are some CSS classes that are no longer needed for proper spacing:
|
||||||
|
- `.wrapper`
|
||||||
|
- `.wrapper-last`
|
||||||
|
- `.text-pad`
|
||||||
|
- `.text-pad-left`
|
||||||
|
- `.text-pad-right`
|
||||||
|
|
||||||
|
Some helper classes have changed:
|
||||||
|
|
||||||
|
`.center` was used in version 1 to center text.
|
||||||
|
|
||||||
|
Version 2 now has more alignment classes:
|
||||||
|
- `.text-center`: centers text
|
||||||
|
- `.text-left`: aligns text to the left
|
||||||
|
- `.text-right`: aligns text to the right
|
||||||
|
- `.small-text-center`: centers text on the small breakpoint
|
||||||
|
- `.small-text-left`: left aligns text on the small breakpoint
|
||||||
|
- `.small-text-right`: right aligns text on the small breakpoint
|
||||||
|
- `float-center`: centers an image (see the [alignment docs](alignment.html) for best practices.)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ink 1.0 Components
|
||||||
|
|
||||||
|
### Grid
|
||||||
|
|
||||||
|
#### Old Markup
|
||||||
|
|
||||||
|
In the Ink 1.0, we needed extra tags to support a wrapper element. This used to control the gutter and margins of a column.
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<td class="wrapper last">
|
||||||
|
|
||||||
|
<table class="twelve columns">
|
||||||
|
<tr>
|
||||||
|
<td class="text-pad">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup
|
||||||
|
|
||||||
|
In Foundation for Emails 2, we’ve eliminated another tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a `.last` class, and now the first column element with the `.first` class. If you have columns in the middle of first and last, they don't need a `.first` or `.last` class.
|
||||||
|
|
||||||
|
Also, we stitched `<td>`'s to `<th>`'s because that allows Android 4 native to be responsive - win!
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="first last small-12 large-12 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns small="12" large="12">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Sub-grid
|
||||||
|
|
||||||
|
In an effort to unify the thinking across the Foundation family, we’ve removed the sub-columns and moved towards a fully functional small grid.
|
||||||
|
|
||||||
|
#### Old Markup
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td class="wrapper last">
|
||||||
|
|
||||||
|
<table class="twelve columns">
|
||||||
|
<tr>
|
||||||
|
<td class="six sub-columns">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="six sub-columns last">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Plain HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="first large-6 small-6 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th class="last large-6 small-6 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Block Grid
|
||||||
|
|
||||||
|
The block grid has a minor syntax change with identifying the number of elements that are displayed in the row. We’ve moved to the convention of `.up-x`, instead of `.x-up`.
|
||||||
|
|
||||||
|
#### Old Markup
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="block-grid three-up">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Thing 1
|
||||||
|
</td><td> <!-- Make sure the tags are directly next to each other -->
|
||||||
|
Thing 2
|
||||||
|
</td><td> <!-- Make sure the tags are directly next to each other -->
|
||||||
|
Thing 3
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Plain HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="block-grid up-3">
|
||||||
|
<tr>
|
||||||
|
<th class="column first">
|
||||||
|
Thing 1
|
||||||
|
</th><th class="column"> <!-- Make sure the tags are directly next to each other -->
|
||||||
|
Thing 2
|
||||||
|
</th><th class="column last"> <!-- Make sure the tags are directly next to each other -->
|
||||||
|
Thing 3
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<block-grid up="3">
|
||||||
|
<column>Thing 1</column>
|
||||||
|
<column>Thing 2</column>
|
||||||
|
<column>Thing 3</column>
|
||||||
|
</block-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Offset Columns
|
||||||
|
|
||||||
|
Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself.
|
||||||
|
|
||||||
|
#### Old Markup
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<td class="wrapper offset-by-four">
|
||||||
|
|
||||||
|
<table class="eight columns">
|
||||||
|
<tr>
|
||||||
|
<td class="panel">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Plain HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="small-4 small-offset-8 large-4 large-offset-8 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<row>
|
||||||
|
<columns small="4" large="4" class="small-offset-8 large-offset-8">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
|
||||||
|
Offsets now can be used on the small breakpoint or the large, or both. They will shift over a set of columns over from the left.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
|
||||||
|
In the previous version of F4E the text inside of the button was the only clickable element. In F4E 2, we’ve taken a hybrid approach of using padding and borders to increase the clickable area. It requires one more table but the result is a much bigger touch target which is good for usability.
|
||||||
|
|
||||||
|
#### Old Markup
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="button">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="#">Button Label</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Plain HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="button">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="https://zurb.com">I am successful</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<button href="http://zurb.com"></button>
|
||||||
|
```
|
||||||
|
|
||||||
|
Centering a button is easier now, just wrap the button with `<center>` tags.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Panels
|
||||||
|
|
||||||
|
In an effort to unify the terminology across the Foundation family `panels` are now called `callouts`.
|
||||||
|
|
||||||
|
#### Old Markup
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="twelve columns">
|
||||||
|
<tr>
|
||||||
|
<td class="panel">
|
||||||
|
Panel content
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Plain HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="callout">
|
||||||
|
<tr>
|
||||||
|
<td class="callout-inner">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
<p>One Word</p>
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<callout class="secondary">
|
||||||
|
<p>I'm in a callout!</p>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<callout class="primary">
|
||||||
|
<row>
|
||||||
|
<columns small="12">
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
<p>This whole row is in a callout!</p>
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<p>This whole row is in a callout!</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</callout>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can wrap a callout around a `<row>` or the content inside a `<column>`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## New Components
|
||||||
|
|
||||||
|
### Menu
|
||||||
|
|
||||||
|
#### Old Markup (Plain HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<table class="menu">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th class="menu-item">
|
||||||
|
<a href="http://google.com">Nav 1</a>
|
||||||
|
</th>
|
||||||
|
<th class="menu-item">
|
||||||
|
<a href="http://google.com">Nav 2</a>
|
||||||
|
</th>
|
||||||
|
<th class="menu-item">
|
||||||
|
<a href="http://google.com">Nav 3</a>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<menu>
|
||||||
|
<item href="one.html">Item One</item>
|
||||||
|
<item href="one.html">Item Two</item>
|
||||||
|
<item href="one.html">Item Three</item>
|
||||||
|
</menu>
|
||||||
|
```
|
||||||
|
|
||||||
|
The menu component can be used to create a simple set of links comonly used in headers, for social icons or in footers. Adding the `.vertical` class will change the orientation. You can even make it vertical on the small breakpoint only with `.small-vertical`.
|
||||||
|
|
||||||
|
### Spacer
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<spacer size="100"></spacer>
|
||||||
|
```
|
||||||
|
|
||||||
|
The spacer component creates consistant vertical spacing between or inside of elements. The size `size="x"` attribute allows you to set the height in pixels of vertical spacing you need.
|
||||||
|
|
||||||
|
### Wrapper
|
||||||
|
|
||||||
|
#### New Markup (Inky HTML)
|
||||||
|
|
||||||
|
```
|
||||||
|
<wrapper>
|
||||||
|
content here
|
||||||
|
</wrapper>
|
||||||
|
```
|
||||||
|
|
||||||
|
The wrapper component allows you to wrap content to target CSS within it. You can add classes to it so you can easily create a full with background.
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
The CSS version works exactly like the one we distributed with Ink 1.0. Check out our [getting started guide](css-guide.html) to learn more.
|
||||||
|
|
||||||
|
To use the Sass version with the Inky markup language you'll want to install the Foundation for Emails project template. We have another [getting started guide](sass-guide.html) just for the Sass version of Foundation.
|
||||||
240
vendor/assets/foundation-emails/docs/pages/panini.md
vendored
Normal file
240
vendor/assets/foundation-emails/docs/pages/panini.md
vendored
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
---
|
||||||
|
title: Panini
|
||||||
|
description: A flat file compiler that powers our prototyping template. Create pages with consistent layouts and reusable partials with ease.
|
||||||
|
library:
|
||||||
|
github: https://github.com/zurb/panini
|
||||||
|
docs: https://github.com/zurb/panini
|
||||||
|
---
|
||||||
|
|
||||||
|
{{{{raw}}}}
|
||||||
|
|
||||||
|
If you've ever created a static site, maybe you had five pages that all shared the same header and footer. You create your first page, and then copy and paste the common elements to the next page. But now if you need to make a change to the header, the change has to be made across multiple files. You can do this with Emails in your campaigns too!
|
||||||
|
|
||||||
|
Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the [Handlebars](http://handlebarsjs.com/) templating language—to streamline the process of creating static prototypes.
|
||||||
|
|
||||||
|
Our [prototyping template](starter-projects.html) uses Panini, along with a host of other tools for processing Sass and images, to make creating optimized templates easy. It's already been configured to utilize all of the features below, but if you want to learn the specifics of how to configure the library, head over to the [Panini GitHub page](https://github.com/zurb/panini).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Basics: Templates & Pages
|
||||||
|
|
||||||
|
A **template** is a common layout that every page in your design shares. It's possible to have multiple templates, but generally you'll only need one, and a page can only use one template. In the prototyping template, the default layout is found under `src/layouts/default.html`.
|
||||||
|
|
||||||
|
Here's what a basic template might look like:
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Definitely an Email!</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header"><!-- ... --></header>
|
||||||
|
{{> body}}
|
||||||
|
<footer class="footer"><!-- ... --></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
In the middle of the HTML is a bit of Handlebars code: `{{> body}}`. This is where the pages you write are injected when Panini runs, giving you a series of complete HTML files at the end.
|
||||||
|
|
||||||
|
The **pages** make up the guts of your layouts. These files will just have the middle section of the design, since the layout already covers the top and bottom. The prototyping template includes one blank page to get you started, under `src/pages/index.html`.
|
||||||
|
|
||||||
|
A basic page might look like this:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Page Title</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ducimus eligendi, reiciendis corporis quam facere quaerat qui, aspernatur molestiae velit, vero ea quisquam laborum corrupti repudiandae totam, at aliquam esse.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that there's no `<html>` or `<body>` tags, and no header or footer. This code will be injected into the `{{> body}}` declaration when Panini assembles your pages.
|
||||||
|
|
||||||
|
In the prototyping template, these finished files are compiled into a standalone folder called `dist` (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any ESP (Email Service Provider).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Partials
|
||||||
|
|
||||||
|
Partials are a feature of Handlebars which allow you to inject HTML anywhere in a page or layout. They're really useful when you need to repeat certain chunks of code throughout your pages, or to keep individual files from getting too cluttered with HTML.
|
||||||
|
|
||||||
|
Here's an example of a layout file that divides its key sections into partials:
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Definitely STILL an Email!</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{{> header}}
|
||||||
|
{{> body}}
|
||||||
|
{{> footer}}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
The `{{> }}` syntax tells Handlebars to look for an HTML file with that name, and inject it at that place. In this example, we have files called `header.html`, `navigation.html`, and `footer.html`. In the prototyping template, these files all exist within `src/partials`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Page Variables
|
||||||
|
|
||||||
|
Pages have a few built-in variables, which can be used within the page template itself, or within a layout or partial being used in tandem with the page.
|
||||||
|
|
||||||
|
### page
|
||||||
|
|
||||||
|
Prints the name of the current page, without its original file extension. In the below example, if the page is `index.html`, `{{page}}` will become `index`.
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<p>You are here: {{page}}</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
### root
|
||||||
|
|
||||||
|
Use `{{root}}` before a file path to make sure it works no matter what folder the current page is in.
|
||||||
|
|
||||||
|
For example, a path to an external CSS file will need to be different if the current page is at the root level of your site, or in a sub-folder.
|
||||||
|
|
||||||
|
Here's how you'd use it with a `<link>` tag:
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<link rel="stylesheet" href="{{root}}assets/css/app.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
If the page is `index.html`, the path will look like this:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="assets/css/app.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
If the page is `folder/page.html`, the path will look like this:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="../assets/css/app.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
The `../` is added only on pages in a sub-folder, so the CSS can still be properly loaded.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Helpers
|
||||||
|
|
||||||
|
Helpers are special functions that manipulate content on the page. In addition to [Handlebars's built-in helpers](http://handlebarsjs.com/builtin_helpers.html), Panini includes a few custom helpers and you can add your own.
|
||||||
|
|
||||||
|
### ifpage
|
||||||
|
|
||||||
|
Displays the HTML inside the helper only on specific pages. In the below example, the HTML inside the helper will only show up on the `index.html` page.
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
{{#ifpage 'index'}}
|
||||||
|
<p>This is definitely the Index page.</p>
|
||||||
|
{{/ifpage}}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also check for multiple pages. If *any* name in the list matches the current page, the HTML will appear.
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
{{#ifpage 'index' 'about'}}
|
||||||
|
<p>This is definitely either the Index or About page.</p>
|
||||||
|
{{/ifpage}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### unlesspage
|
||||||
|
|
||||||
|
The opposite of `#ifpage`, `#unlesspage` will only display the HTML inside of it if the current page is *not* in the parameters.
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
{{#unlesspage 'index'}}
|
||||||
|
<p>This is definitely <em>not</em> the Index page.</p>
|
||||||
|
{{/unlesspage}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### repeat
|
||||||
|
|
||||||
|
Repeats the content inside of it `n` number of times. Use this to easily print lots of duplicate HTML in a prototype.
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<ul>
|
||||||
|
{{#repeat 5}}
|
||||||
|
<li>Five hundred ninety-nine US dollars</li>
|
||||||
|
{{/repeat}}
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
### markdown
|
||||||
|
|
||||||
|
Converts Markdown into HTML.
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
{{#markdown}}
|
||||||
|
# Heading 1
|
||||||
|
Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
|
||||||
|
{{/markdown}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Helpers
|
||||||
|
|
||||||
|
If you don't see the right helper, you can write your own. Add a javascript file to 'src/helpers', restart npm, then call it in your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
// Example file src/helpers/bold.js
|
||||||
|
module.exports = function(options) {
|
||||||
|
// options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
|
||||||
|
var bolder = '<strong>' + options.fn(this) + '</strong>';
|
||||||
|
return bolder;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
Then in your projects call your custom `{{#bold}}` helper
|
||||||
|
|
||||||
|
```
|
||||||
|
{{#bold}}ideas{{/bold}}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Custom Data
|
||||||
|
|
||||||
|
Custom data can be added to your pages. This data can then be inserted into your HTML through Handlebars. There are two ways to add data to a project.
|
||||||
|
|
||||||
|
To add variables to a specific page only, add it at the top of the page's HTML as a [Front Matter](http://jekyllrb.com/docs/frontmatter/) block. Let's say the below content is inside `src/pages/index.html`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
---
|
||||||
|
title: Page Title
|
||||||
|
description: Lorem ipsum.
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- The rest of your HTML is down here. -->
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, you can insert the values of these variables into the `index.html` page, *or* the `default.html` layout. To insert a variable, wrap the name of the variable in double curly braces, like so:
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
Variables can also be added globally by creating an external JSON or YML file, and adding it to the `src/data` folder in your project. Let's create a file called `breakfast.yml`:
|
||||||
|
|
||||||
|
```
|
||||||
|
- eggs
|
||||||
|
- bacon
|
||||||
|
- toast
|
||||||
|
```
|
||||||
|
|
||||||
|
Panini will load in the contents of this YML file as a variable called `{{ breakfast }}`. Because it's an array, we can loop through it using Handlebars's `{{#each}}` helper:
|
||||||
|
|
||||||
|
```handlebars
|
||||||
|
<ul class="breakfast-items">
|
||||||
|
{{#each breakfast}}
|
||||||
|
<li>{{ this }}</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
This code will print three `<li>`s, one for each item in the file.
|
||||||
|
|
||||||
|
## Tutorials
|
||||||
|
|
||||||
|
[Staying D.R.Y. with Panini](http://zurb.com/university/lessons/staying-d-r-y-with-panini)
|
||||||
|
Panini comes with tons of Handlebars helpers built in, like a repeat helper or markdown parser, but in this lesson we’ll take a look at creating a custom month/year helper for an HTML email.
|
||||||
|
|
||||||
|
|
||||||
|
{{{{/raw}}}}
|
||||||
179
vendor/assets/foundation-emails/docs/pages/sass-guide.md
vendored
Normal file
179
vendor/assets/foundation-emails/docs/pages/sass-guide.md
vendored
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
---
|
||||||
|
title: Getting Started with Sass
|
||||||
|
description: Get started with the Sass-powered ZURB Stack for writing HTML emails.
|
||||||
|
---
|
||||||
|
|
||||||
|
Foundation for Emails takes the pain out of developing HTML emails by giving you a set of powerful, tested components out of the box. This includes a fully-responsive grid, buttons, callouts, menus, and more.
|
||||||
|
|
||||||
|
The Sass workflow for Foundation for Emails is backed by the [ZURB Email Stack](zurb-stack.html), an all-in-one build system for creating HTML emails. This workflow requires a bit more up-front setup, but the tooling makes it wicked fast to code, and keeps your code amazingly clean with our new custom HTML tags in Inky.
|
||||||
|
|
||||||
|
The ZURB Stack workflow also includes Handlebars, allowing you to write emails as templates instead of static files. Lastly, you can easily make sweeping design changes with the Sass [settings file](sass.html#the-settings-file). Here’s everything that’s packaged in this template:
|
||||||
|
|
||||||
|
- Inky HTML
|
||||||
|
- Sass
|
||||||
|
- Handlebars templates
|
||||||
|
- BrowserSync
|
||||||
|
- Image compression
|
||||||
|
- Inlining
|
||||||
|
|
||||||
|
In this Getting Started guide, we'll download Foundation for Emails, construct the basic grid, and then inline our email so it's ready to test.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
To use the Sass version of Foundation for Emails, you need Node.js installed on your computer. Node is compatible with Windows, OS X, and Linux—the [Node.js website](https://nodejs.org/) has installers for every operating system.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Installing
|
||||||
|
|
||||||
|
We'll use the Foundation CLI to set up a new project. If you already have the Foundation CLI installed from Foundation for Sites or Apps, you can skip this first command.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install --global foundation-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
If you run into any permission errors (EACCESS) on OS X or Linux, you can try prefixing the command with `sudo`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo npm install --global foundation-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
Once the CLI is installed on your machine, it’s super easy to fire up a blank Foundation for Emails project. Move into the folder you store your projects in, and then run this command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
foundation new --framework emails
|
||||||
|
```
|
||||||
|
|
||||||
|
The CLI will ask you for a project name, which is used as the name of the folder to install in. After that, the project template will be downloaded, and the various dependencies installed. The entire process takes over a minute.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Running the Server
|
||||||
|
|
||||||
|
After your project has been installed, run `cd project`, where `project` is the name of the project just created. Then run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
This will kick off the build process, which includes HTML parsing, Sass, image compression, and a server. When the initial build finishes, your browser will pop open a new tab pointing to your project. You'll be seeing a blank `index.html` file.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
You'll do all of your work in the `src` folder of your project. The various HTML files, Sass files, and images inside of `src` are compiled to a new folder called `dist/` (as in "distribution"), which contains the final HTML and CSS for your emails. These are the files you'll upload to Litmus, Campaign Monitor, etc. for testing, or load into your email campaign service.
|
||||||
|
|
||||||
|
Here's a breakdown of the files in the `src` folder:
|
||||||
|
|
||||||
|
- `assets/`: Sass and image files.
|
||||||
|
- `layouts/`: Boilerplate HTML that wraps all of your emails.
|
||||||
|
- `pages/`: HTML files for emails.
|
||||||
|
- `partials/`: Reusable chunks of HTML that can be injected into pages.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Boilerplate
|
||||||
|
|
||||||
|
Inside `src/layouts/default.html`, you can see the boilerplate needed to make an HTML work. Below we've annotated this boilerplate, explaining what does what.
|
||||||
|
|
||||||
|
{{{{raw}}}}
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Emails use the XHTML Strict doctype -->
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<!-- The character set should be utf-8 -->
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<!-- Enables media queries -->
|
||||||
|
<meta name="viewport" content="width=device-width"/>
|
||||||
|
<!-- Link to the email's CSS, which will be inlined into the email -->
|
||||||
|
<link rel="stylesheet" href="assets/css/foundation-emails.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- Injection point for the inline <style> element. Don't remove this comment! -->
|
||||||
|
<!-- <style> -->
|
||||||
|
<!-- Wrapper for the body of the email -->
|
||||||
|
<table class="body" data-made-with-foundation>
|
||||||
|
<tr>
|
||||||
|
<!-- The class, align, and <center> tag center the container -->
|
||||||
|
<td class="center" align="center" valign="top">
|
||||||
|
<center>
|
||||||
|
<!-- The body of each email you write is injected here -->
|
||||||
|
{{> body}}
|
||||||
|
</center>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
{{{{/raw}}}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Grid Basics
|
||||||
|
|
||||||
|
Foundation for Emails includes many common elements needed to make HTML emails: a grid, typography styles, buttons, callouts, and more.
|
||||||
|
|
||||||
|
The markup required to create HTML emails that work in all email clients is *complicated*, and involves writing many tables. However, the ZURB Stack includes Inky, a templating language that converts simple HTML tags to the complex HTML required for the components.
|
||||||
|
|
||||||
|
Let's build a basic grid.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns small="12" large="6">Column One</columns>
|
||||||
|
<columns small="12" large="6">Column Two</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
Here we're using all three of the key layout elements: the container, row, and column.
|
||||||
|
|
||||||
|
A **container** will wrap the body of your email. It applies a maximum width to the body of the email.
|
||||||
|
|
||||||
|
**Rows** are used to group sets of **columns** together. Columns divide your layout into horizontal sections that sit side-by-side. On small screens, these columns stack on top of each other to save space—unless you set them up to keep their layout on small screens.
|
||||||
|
|
||||||
|
In the above example, we used the attribute `large` on the `<column>` tag to define a size for that column *on large screens*. Foundation uses a 12-column grid, and since `large="6"`, that means each column will take up half the width of the row. On a small screen, each columns will be full width and the second column will stack underneath.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inlining
|
||||||
|
|
||||||
|
Now that we have a basic email, the last thing we need to do before we can send it is *inline* it. This is the process of injecting all of the CSS for the email into the HTML, so that it works as a self-contained file.
|
||||||
|
|
||||||
|
Email clients like Gmail and Outlook strip out `<style>` tag from the `<head>` and Gmails strips it from the `<body>` of the email as well. It's best to have your CSS written inline within your markup. Hand writing all your CSS inline in a style tag would be a real pain and would take a long time.
|
||||||
|
|
||||||
|
The build process doesn't inline by default. To do a full inlining process as you build, quit the process you have running in your command line, and run `npm run build` instead. This does the same build process, but adds the inlining step at the end.
|
||||||
|
|
||||||
|
Your email's CSS will include media queries for responsive styling which the inliner tool will move into the `<body>` so they are preserved.
|
||||||
|
|
||||||
|
When the email opens up in the browser, it will look the same. But try viewing the source code of the page, and you'll see a mess of code like this:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="background:#cacaca;min-height:100%"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">...
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
Now that you have an inlined email, you'll need to test it in real email clients to verify that it looks correct. All of Foundation's built-in components have already been tested in every major email client, so we've done a lot of the work for you. However, you'll want to test your email before you send it out to the masses.
|
||||||
|
|
||||||
|
The most popular tool for testing emails is [Litmus](https://litmus.com/). All you have to do is paste in the HTML of an email, and you get a live preview in any email client you want.
|
||||||
|
|
||||||
|
It's up to you to choose what email clients are important to test in, but you can [see our compatability list](compatibility.html) for recommendations.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
You've successfully installed Foundation for Emails, and written, inlined, and tested your first email! To keep going with the framework, you can check out the documentation for the other framework components, including [buttons](button.html), [callouts](callout.html), [menus](menu.html).
|
||||||
|
|
||||||
|
If you're interested in going in-depth on the framework with the Foundation team, [check out our master class on Foundation for Emails](http://zurb.com/university/responsive-emails-foundation), an on-demand video series that explores every aspect of email design workflow.
|
||||||
98
vendor/assets/foundation-emails/docs/pages/sass.md
vendored
Normal file
98
vendor/assets/foundation-emails/docs/pages/sass.md
vendored
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
---
|
||||||
|
title: Using Sass
|
||||||
|
description: Foundation for Emails is written in Sass, which allows us to make the codebase customizable and flexible.
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="primary callout">
|
||||||
|
<p>Not familiar with Sass? The [official tutorial](http://sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Compatibility
|
||||||
|
|
||||||
|
<img src="assets/img/logos/sass-logo.svg" alt="Sass logo" class="float-right" style="width: 150px; height: 150px; margin-left: 1rem;">
|
||||||
|
|
||||||
|
**Foundation for Emails can be compiled with Ruby Sass and libsass.** 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 [node-sass](https://github.com/sass/node-sass), a Node port of libsass. We recommend these versions of either compiler:
|
||||||
|
|
||||||
|
- Ruby Sass **3.4+**
|
||||||
|
- node-sass **3.4.2+** (libsass **3.3.2**)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Loading the Framework
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
To get started, first install the framework files using Bower or npm.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install foundation-emails --save
|
||||||
|
bower install foundation-emails --save
|
||||||
|
```
|
||||||
|
|
||||||
|
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`
|
||||||
|
|
||||||
|
Here's an example using grunt-contrib-sass:
|
||||||
|
|
||||||
|
```js
|
||||||
|
grunt.initConfig({
|
||||||
|
sass: {
|
||||||
|
dist: {
|
||||||
|
options: {
|
||||||
|
loadPath: ['node_modules/foundation-emails/scss']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
If you're using Compass, open your project's `config.rb` and add the import path there:
|
||||||
|
|
||||||
|
```ruby
|
||||||
|
add_import_path "node_modules/foundation-emails/scss"
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, add an `@import` statement to the top of your main Sass file.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@import 'foundation';
|
||||||
|
```
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@import 'settings';
|
||||||
|
@import 'foundation';
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Settings File
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
<div class="callout warning">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Here's an example set of settings variables. These change the default styling of [buttons](button.html):
|
||||||
|
|
||||||
|
```scss
|
||||||
|
// Text color of buttons.
|
||||||
|
$button-color: $white !default;
|
||||||
|
|
||||||
|
// Text color of buttons with a light background.
|
||||||
|
$button-color-alt: $medium-gray !default;
|
||||||
|
|
||||||
|
// Font weight of buttons.
|
||||||
|
$button-font-weight: bold !default;
|
||||||
|
|
||||||
|
// Background color of buttons.
|
||||||
|
$button-background: $primary-color !default;
|
||||||
|
|
||||||
|
// Border around buttons.
|
||||||
|
$button-border: 2px solid $button-background !default;
|
||||||
|
```
|
||||||
|
|
||||||
|
We put together some [Best Practices on Sass file structure](http://zurb.com/university/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure) that will help you keep your project clean.
|
||||||
26
vendor/assets/foundation-emails/docs/pages/spacer.md
vendored
Normal file
26
vendor/assets/foundation-emails/docs/pages/spacer.md
vendored
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
---
|
||||||
|
title: Spacer
|
||||||
|
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.
|
||||||
|
tags:
|
||||||
|
- spacing
|
||||||
|
- height
|
||||||
|
- margin
|
||||||
|
- padding
|
||||||
|
---
|
||||||
|
|
||||||
|
## Basics
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<p>Stuff on top</p>
|
||||||
|
<spacer size="100"></spacer>
|
||||||
|
<p>Stuff on bottom</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
In this example, this spacer will create 100px of vertical spacing.
|
||||||
|
|
||||||
5
vendor/assets/foundation-emails/docs/pages/styling.md
vendored
Normal file
5
vendor/assets/foundation-emails/docs/pages/styling.md
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
title: CSS with Inky
|
||||||
|
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.
|
||||||
|
---
|
||||||
|
|
||||||
19
vendor/assets/foundation-emails/docs/pages/thumbnail.md
vendored
Normal file
19
vendor/assets/foundation-emails/docs/pages/thumbnail.md
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
---
|
||||||
|
title: Thumbnail
|
||||||
|
description: Spruce up an image tag with our thumbnail style.
|
||||||
|
published: false
|
||||||
|
---
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<img src="http://placehold.it/200x200" class="thumbnail">
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- <table class="thumbnail">
|
||||||
|
<tr>
|
||||||
|
<td><img src="//placehold.it/300x300" class="thumbnail" /></td>
|
||||||
|
</tr>
|
||||||
|
</table> -->
|
||||||
337
vendor/assets/foundation-emails/docs/pages/tips-tricks.md
vendored
Normal file
337
vendor/assets/foundation-emails/docs/pages/tips-tricks.md
vendored
Normal file
@ -0,0 +1,337 @@
|
|||||||
|
---
|
||||||
|
title: Tips & Tricks
|
||||||
|
description: We've put together some Responsive Emails Tips & Tricks that will help you navigate the mine field that is coding HTML emails.
|
||||||
|
---
|
||||||
|
|
||||||
|
Coding responsive emails can be a real pain. This guide will help you through some of the the most common issues you'd face. It's a living document and will get updates periodically.
|
||||||
|
|
||||||
|
## Why Foundation for Emails
|
||||||
|
|
||||||
|
Most responsive emails are built on templates. They’re simple, easy to drop content into and are usually well-tested. Templates have a serious cost though. "Oh, so you want to do anything other than change the colors and text?" Sorry … you’re out of luck, Chuck. Templates tend to be hard to customize heavily or to extend. For that you need a framework.
|
||||||
|
|
||||||
|
A framework is a collection of reusable code and design patterns which gives users a solid, tested base upon which to build. Not a bunch of visual styles you can just bolt on as an afterthought and call it a day.
|
||||||
|
|
||||||
|
- Frameworks give you the solid base of a template, but the extensibility of custom code. You can make your template fit your content, not the other way around.
|
||||||
|
- Additionally, a framework gives you a common codebase to structure your projects around. So if new team members work on the project, they don't have to re-invent the wheel. You can spend less time coding your email and more time optimizing your campaigns.
|
||||||
|
|
||||||
|
## Need to know
|
||||||
|
|
||||||
|
The sad truth about creating or coding HTML emails is that tables are the only things that are universally supported when it comes to email design. If you came from the world of building websites, this may seem like a stepping into Doc Brown's Delorean, charging up the Flux-capitor, and going back to the 1996. Suddenly your CSS is written with inline style tags, useful CSS properties don't work and you're burried in a sea of table tags.
|
||||||
|
|
||||||
|
<div class="callout secondary tip">General rule of thumb: your email is not going to look identical in every client. And that’s OK.</div>
|
||||||
|
|
||||||
|
It's not all doom and gloom though, and we're all in this together. Foundation for Emails helps by getting you away from tables (Sass version), helping you with an organized project structure, and a well tested codebase to make this much easier. We've put together this guide and [links to resources](http://foundation.zurb.com/emails/resources.html) from our friends to help you along as well as a new [Responsive Emails master class](http://zurb.com/university/responsive-emails-foundation) to become a HTML email pro.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## HTML
|
||||||
|
|
||||||
|
#### Email Container Width
|
||||||
|
|
||||||
|
The email equivalent of the browser window is the "viewport", or the area in an email client dedicated to showing the actual email. This varies quite a bit.
|
||||||
|
|
||||||
|
Foundation for Emails' default container with around 600px wide. That's because the majority of email clients have a preview pane that is around 550-700 pixels. With the Sass version, you can easily customize this width by adjusting the `$global-width` variable.
|
||||||
|
|
||||||
|
The height of your email doesn't matter as much because people scroll. It still helps to have your most compelling content towards the top.
|
||||||
|
|
||||||
|
#### Structure and alignment:
|
||||||
|
|
||||||
|
When it comes to making emails, divs aren’t a thing. Don’t kill the messenger, but it’s true. It's not fun finding out we can't just use a `<div>` with auto left and right margins for centering, or background colors; It won't work most email clients. `<div>`'s can still be used for targeting CSS and for grouping semantically related elements, but shouldn’t be used for for structural purposes or spacing.
|
||||||
|
|
||||||
|
Instead, you can use the `<wrapper>` Inky tag to create background colors and target elements inside. [More on Wrapper →](wrapper.html)
|
||||||
|
|
||||||
|
Use tables instead. For those of you who haven’t used tables since Netscape Navigator (or ever) here’s a quick recap.
|
||||||
|
|
||||||
|
There are three main tags in a table.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
The `<table>` tag wraps the entire table. The `<tr>` tag denotes a row. The `<td>` tag is used to wrap a table cell.
|
||||||
|
|
||||||
|
Some web browsers may be forgiving, but it’s important to include all three tags. Don’t get lazy and skip the `<tr>`. Email clients can be unpredictable, so the first step to good rendering is to have valid markup.
|
||||||
|
|
||||||
|
*It makes debugging and sharing code a lot easier when you’re consistent. It lets other developers get oriented within the code and makes it easier to tell what you’re looking at, just like consistent indentation and comments.*
|
||||||
|
|
||||||
|
While semantic, the “table row” and “table data” elements aren’t that helpful for creating row and column layouts. They’re designed for spreadsheets or other *non-uniform* grids. They can’t be used structurally.
|
||||||
|
|
||||||
|
Instead, we use nested tables. Think a bunch of single-cell spreadsheets being nested.
|
||||||
|
|
||||||
|
Where we would have divs in website land…
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-12 columns">
|
||||||
|
<!-- Content -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
…we have tables in email world.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="row">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th class="small-12 columns first last">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<!-- Content -->
|
||||||
|
</th>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Table elements have their own special “display” values. Sometimes we can override them to display as block elements, but more on that later. The display value (in combination with the HTML schema specified in the DOCTYPE), specifies the rules for rendering each element.
|
||||||
|
|
||||||
|
Tables have all sorts of fancy HTML attributes…not all of which can be set in CSS. This is unfortunate because separation of concerns dictates that we should try and keep our structure in the markup (HTML) and styles in the CSS. Some inliners will take care of this for you.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table align="center" valign="top" cellspacing="0">
|
||||||
|
…
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Speaking of CSS, you should only set classes and IDs on tables or `<td>` tags, not `<tr>` tags. If you need to apply padding, only do that on a `<td>` as well. Been there, done that — we had a lot of trouble with this while building the first version of Foundation for Emails. Your milage may vary, but just trying to help you out by saving you some time.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
#### CSS Support
|
||||||
|
Support of CSS properties varies greatly between email clients. You're best off sticking with the basics and not getting too fancy.
|
||||||
|
|
||||||
|
This CSS compatibility chart will really save you some pain when writing CSS:
|
||||||
|
[CSS Support Chart](https://www.campaignmonitor.com/css/b/)
|
||||||
|
|
||||||
|
<img src="assets/img/campaign-monitor-css-guide.jpg" alt="">
|
||||||
|
|
||||||
|
For some things you can do and work-arounds, see the <a href="#progressive-enhancement">Progressive Enhancement</a> section below.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Inlining CSS
|
||||||
|
|
||||||
|
Gmail strips the `<head>` (and, consequently, `<style>`) tags from your email. Therefor your email's CSS needs to be inlined. You know, like old school CSS:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="menu" style="padding:0;text-align:center;vertical-align:top;width:auto">
|
||||||
|
```
|
||||||
|
|
||||||
|
Because media queries cannot be inlined, they need to be moved into the `<body>` of the email. Our inliner does that for you.
|
||||||
|
|
||||||
|
If you're using Sass with the ZURB stack, you enjoy the luxury of automatic inlining when running `npm run build`. Your file will be copied into the `dist ` folder where you will find it minified and inlined. You'll want to do this before you test or send your email.
|
||||||
|
|
||||||
|
If you are using the CSS version, you can use our [web inliner](http://foundation.zurb.com/emails/inliner-v2.html).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Margin and Padding:
|
||||||
|
|
||||||
|
- Outlook 2007, 2010, and 2013 does not support "padding" in `<p>`, `<div>` or `<a>` tags. Use margin instead.
|
||||||
|
- Forget about using CSS positioning like `top`, `bottom`, `relative`, `absolute`.
|
||||||
|
- Margin is universally supported BUT you may see some inconsistencies in Outlook 2007, 2010, and 2013. Padding is safer. Also, it is known that Outlook.com does not support the margin property. The odd thing is Outlook.com does support margin with a capital "M".
|
||||||
|
Use it like this:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
margin: 10px;
|
||||||
|
Margin: 10px; // fallback for Outlook.com
|
||||||
|
```
|
||||||
|
|
||||||
|
- `<br>` tags are ok, but you won't get pixel perfect results and you can quickly fill up your code with messyness.
|
||||||
|
- **Your best option** for vertical spacing is to use the `<spacer>` component in Foundation for Emails. It works consistently on all email clients and lets you set the height with the size attribute. So `<spacer size="32"></spacer>` will create 32px of vertical space.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Colors:
|
||||||
|
|
||||||
|
- It's better to use full 6 digit hex codes colors in HTML emails (#ffffff vs #fff). Although all the major email clients support short hex colors, Outlook.com (Hotmail), Lotus Notes 6.5, 7 and 8 do not.
|
||||||
|
- RGB's are supported all the major email clients but RGBA's are only supported in IOS, Apple Mail, Gmail, and Android 4 (Gmail).
|
||||||
|
- Background colors work across all email clients as well as color for fonts.
|
||||||
|
- iOS devices sometimes render dates/times and phone numbers in blue irrespective of CSS declarations. A good workaround is to include the the CSS snippet from http://removebluelinks.com/ in combination with wrapping the affected content with `<font color="XXXXXX"></font>` to ensure it gets rendered in the color required.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## JavaScript
|
||||||
|
|
||||||
|
Nope. JavaScript is not a reality in most popular emails. It will be blocked for security reasons.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Images
|
||||||
|
|
||||||
|
#### Blocked Images
|
||||||
|
|
||||||
|
Beware of blocked images. Many email clients block images by default. “Many” being pretty much everybody except Apple Mail/iOS and Gmail. When this happens, email clients offer an option to display images but you're relying on your customer to know this.
|
||||||
|
|
||||||
|
Q: What’s a designer to do?
|
||||||
|
|
||||||
|
A: Always use an ALT tag.
|
||||||
|
|
||||||
|
ALT tags are very important for accessibility. They will show when images are blocked so your customers can tell an image is supposed to be there.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img height=“390” width=“580” src=“hero.jpg” alt=“ALT tags are important for accessibility *and* overprotective mail clients” />
|
||||||
|
```
|
||||||
|
|
||||||
|
Some clients even let you style the ALT text.
|
||||||
|
|
||||||
|
To style ALT text, place your font styles inline on the image.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img height=“390” width=“580” src=“hero.jpg” alt=“Company Name” style=“font-size:45px; font-family: serif; font-weight: bold; color: #b31b1b;” />
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Retina Images
|
||||||
|
|
||||||
|
OK, so I got my readers to allow images…now what about Retina?
|
||||||
|
|
||||||
|
Fun fact: Your email client is better at resizing images than Photoshop is.
|
||||||
|
|
||||||
|
The problem is Outlook and Thunderbird like to show images in their *ahem* full glory.
|
||||||
|
|
||||||
|
The solution is inline size attributes.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img height=“390” width=“580” src=“hero.jpg” alt=“I can be your hero, baby…” />
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Image File Size
|
||||||
|
|
||||||
|
Reduce Image Size. There is no guarantee the recipient of your email will have wifi and waiting for images to load is guaranteed to annoy some of your recipients.
|
||||||
|
|
||||||
|
#### Gif's and Video in Emails
|
||||||
|
|
||||||
|
Animated GIFs have *surprisingly* good support. As usual, there are caveats. Outlook only shows the first frame of the animation. Make sure your call to action is visible in the first frame.
|
||||||
|
|
||||||
|
Video's in emails are not supported except in Apple Mail and Outlook 2011. [See how Litmus explores background video in HTML Emails](https://litmus.com/blog/how-to-code-html5-video-background-in-email)
|
||||||
|
|
||||||
|
#### Quick Tips on Images
|
||||||
|
|
||||||
|
Remember to use full paths to images, not relative paths. (e.g. http://www.yourserver.com/email/images/logo.gif).
|
||||||
|
|
||||||
|
Also, link to images from your own server, not anyone elses. If you don't control it you never know when that url will change.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Buttons
|
||||||
|
|
||||||
|
#### Images for Buttons
|
||||||
|
|
||||||
|
Images get blocked. So if you have an important CTA image that looks like a button, it will likely get missed. And that defeats the purpose of your email.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Email File Size
|
||||||
|
|
||||||
|
Sending an email with a file size between 15KB-100KB is ideal. Some email clients will send the email to spam if the file size is greater.
|
||||||
|
|
||||||
|
Emails can get cut off by the ‘This message has only partially downloaded’ in iOS Apple Mail the Gmail app for iOS. The user will be prompted to "Download entire message" or "Download remaining X KB".
|
||||||
|
|
||||||
|
Problems
|
||||||
|
|
||||||
|
- This could cause the email open to not be registered
|
||||||
|
- Your email's call to action could be missed
|
||||||
|
|
||||||
|
Causes
|
||||||
|
|
||||||
|
- Making the HTML file size less than 20kb (20540 characters) - not including images or the plain-text version. This charachter count includes things like inline styles, HTML tags, and spaces, and other HTML entities.
|
||||||
|
- Downloading the message over cellular data, not WiFi. Can't do much about this one.
|
||||||
|
|
||||||
|
Solution?
|
||||||
|
|
||||||
|
- Create emails that are short and to the point. Too many call-to-actions's, topics, or long emails don't tend to work that well anyways.
|
||||||
|
- Minify your HTML. The ZURB Stack comes with a setting to minify the HTML if you run `npm run build`. This will remove white-space which adds to the charachter count and file size. Our [web inliner](http://foundation.zurb.com/emails/inliner.html) also has an option to remove (compress) whitespace between your charachters.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Responsive Best Practices
|
||||||
|
|
||||||
|
#### Font Size
|
||||||
|
|
||||||
|
Increase Text Size. Don’t make users squint to read what you sent them. Shorten the message a bit and increase the size (including links and CTAs) to make sure they are able to see and understand everything clearly.
|
||||||
|
|
||||||
|
Text should never be smaller than 11 pixels. For comparison, the body style in Foundation uses a font size of 16 pixels at the large size, which is the default text-size setting.
|
||||||
|
|
||||||
|
Apple suggests 17px for mobile devices and Google recommends up to 21px for body copy.
|
||||||
|
|
||||||
|
#### Typography
|
||||||
|
|
||||||
|
<img src="http://group-mail.com/wp-content/uploads/Screen-shot-2011-08-12-at-2.58.47-PM.png" alt="">
|
||||||
|
|
||||||
|
Use fonts that are recognizeable to most users.
|
||||||
|
|
||||||
|
In general, use a single font throughout your email. Mixing several different fonts can make your email seem fragmented and sloppy. Instead, use one font and just a few styles and sizes.
|
||||||
|
|
||||||
|
<img src="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Art/mail_message_axlarge_2x.png" alt="">
|
||||||
|
|
||||||
|
<a id="progressive-enhancement"></a>
|
||||||
|
## Progressive Enhancement
|
||||||
|
|
||||||
|
Do progressively enhance. ZURB and Foundation for Emails builds Outlook-first. Meaning, design for the most constrained platform you support, then add features. It's a great idea to know what devices your emails are being opened on and at what rate. Email Service Providers like Campaign Monitor and Mailchimp track this for you.
|
||||||
|
|
||||||
|
<img src="assets/img/cm-email-client-stats.png" alt="image of graph">
|
||||||
|
|
||||||
|
Let's imagine the vast majority of your audience uses Apple Mail. You'd be able to get away with using CSS keyframe animation and SVG masks.
|
||||||
|
|
||||||
|
If you're not sure where to start, you can see the [Email Client Market Share](http://emailclientmarketshare.com/) by Litmus
|
||||||
|
|
||||||
|
#### Button Size and Touch Targets
|
||||||
|
|
||||||
|
Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.
|
||||||
|
|
||||||
|
Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px.
|
||||||
|
|
||||||
|
Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.
|
||||||
|
|
||||||
|
While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
Testing costs money. Not testing costs you customers.
|
||||||
|
|
||||||
|
So test, test, and test again. After you have an inlined version of your email, you should test it on as many devices and email clients as you can.
|
||||||
|
|
||||||
|
The two top testing services out there are:
|
||||||
|
[Litmus](https://litmus.com/)
|
||||||
|
[Email on Acid](https://www.emailonacid.com/)
|
||||||
|
|
||||||
|
If you're not sure where to start, you can see the [Email Client Market Share](http://emailclientmarketshare.com/) by Litmus
|
||||||
|
|
||||||
|
Foundation for Emails is tested on the most popular clients. You can also test on the clients listed in our [compatability guide](compatibility.html)
|
||||||
|
|
||||||
|
These services make testing on lots of email clients and devices much faster. Try to hit the main categories: a Windows machine, a Mac, an iPhone, an Android, a tablet. Still, nothing beats testing on a real device.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sending you Emails
|
||||||
|
|
||||||
|
ESP's are made for sending thousands and thousands of emails, they can help you get emails out without being deemed a spammer.
|
||||||
|
|
||||||
|
ESP's like Campain Monitor and Mailchimp cost money, but they can save you huge headaches and costs down the road.
|
||||||
|
|
||||||
|
Try not to look like SPAM. Pretty obvious, but just writing good code and honest copy should keep you out of the can here. Your HTML email is definitely NOT the place for a Viagra joke.
|
||||||
|
|
||||||
|
OBEY THE LAW. The CAN-SPAM act became law on Jan. 1, 2004. It says there many things you must do as a commercial email-er. Highlights are basically don't be deceptive, and that you MUST include a physical mailing address as well as a working unsubscribe link.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design Tips
|
||||||
|
|
||||||
|
Just like in web design, it doesn't hurt to think above the fold. Meaning what users will see before they have to scroll.
|
||||||
|
|
||||||
|
Use your footer like a footer. This is a great place for lots of things including phone numbers and addresses, about information, unsubscribe options, and perhaps a little reminder of what this email is and why the reader is on the list.
|
||||||
|
|
||||||
73
vendor/assets/foundation-emails/docs/pages/typography.md
vendored
Normal file
73
vendor/assets/foundation-emails/docs/pages/typography.md
vendored
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
---
|
||||||
|
title: Typography
|
||||||
|
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.
|
||||||
|
sass: scss/components/_type.scss
|
||||||
|
---
|
||||||
|
|
||||||
|
## Paragraphs
|
||||||
|
|
||||||
|
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>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>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Header
|
||||||
|
|
||||||
|
Foundation includes styles for all headings.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<h1>h1. This is a very large header.</h1>
|
||||||
|
<h2>h2. This is a large header.</h2>
|
||||||
|
<h3>h3. This is a medium header.</h3>
|
||||||
|
<h4>h4. This is a moderate header.</h4>
|
||||||
|
<h5>h5. This is a small header.</h5>
|
||||||
|
<h6>h6. This is a tiny header.</h6>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Header Sizes
|
||||||
|
|
||||||
|
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>.
|
||||||
|
|
||||||
|
Header | Default |
|
||||||
|
--------|---------|
|
||||||
|
`<h1>` | 34px |
|
||||||
|
`<h2>` | 30px |
|
||||||
|
`<h3>` | 28px |
|
||||||
|
`<h4>` | 24px |
|
||||||
|
`<h5>` | 20px |
|
||||||
|
`<h6>` | 18px |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Small Header Segments
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<h3>Foundation for Emails <small>Version 2</small></h3>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Links
|
||||||
|
|
||||||
|
Links are very standard, and the color is preset to the Foundation primary color. [Learn more about Foundation's global colors](global.html).
|
||||||
|
|
||||||
|
```
|
||||||
|
<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>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Dividers
|
||||||
|
|
||||||
|
Use dividers to define thematic breaks between paragraphs or sections of your email.
|
||||||
|
|
||||||
|
```
|
||||||
|
<hr/>
|
||||||
|
```
|
||||||
33
vendor/assets/foundation-emails/docs/pages/visibility.md
vendored
Normal file
33
vendor/assets/foundation-emails/docs/pages/visibility.md
vendored
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
title: Visibility Classes
|
||||||
|
description: Selectively show content for different screen sizes.
|
||||||
|
tags:
|
||||||
|
- show
|
||||||
|
- hide
|
||||||
|
---
|
||||||
|
|
||||||
|
Visibility classes allow you to control what content appears on what screen size.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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 and 2013.
|
||||||
|
|
||||||
|
<div class="primary callout">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
**To show content only on mobile clients,** add the class `.hide-for-large` to the element.
|
||||||
|
|
||||||
|
**To show content only on desktop clients,** add the class `.show-for-large` to the element.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<callout class="hide-for-large primary">
|
||||||
|
<p>This callout will only appear on small screens.</p>
|
||||||
|
</callout>
|
||||||
|
|
||||||
|
<callout class="show-for-large alert">
|
||||||
|
<p>This callout will only appear on large screens.</p>
|
||||||
|
</callout>
|
||||||
|
```
|
||||||
|
|
||||||
|
*note - `.hide-for-large` is not supported on Gmail and Yahoo email clients.*
|
||||||
66
vendor/assets/foundation-emails/docs/pages/wrapper.md
vendored
Normal file
66
vendor/assets/foundation-emails/docs/pages/wrapper.md
vendored
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
title: Wrapper
|
||||||
|
description: Wrapper creates the necessary structure to wrap elements so that full width backgrounds can applied.
|
||||||
|
tags:
|
||||||
|
- full width
|
||||||
|
- fliud
|
||||||
|
- header
|
||||||
|
- footer
|
||||||
|
---
|
||||||
|
|
||||||
|
## Basics
|
||||||
|
|
||||||
|
When using [Inky](inky.html) HTML, the `<wrapper>` tag will create a `<table>`, `<tr>`, `<th>` structure needed to create consistant 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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<wrapper>
|
||||||
|
content
|
||||||
|
</wrapper>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Full (fluid) width header or footer
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```inky_example
|
||||||
|
<style type="text/css">
|
||||||
|
.wrapper.header {
|
||||||
|
background: #8a8a8a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper.header .columns {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: #fff !important;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper.header .header-container {
|
||||||
|
background: #8a8a8a !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<wrapper class="header">
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
<center>
|
||||||
|
<container class="header-container">
|
||||||
|
<row class="collapse">
|
||||||
|
<columns small="6" valign="middle">
|
||||||
|
<img src="http://placehold.it/200x50/663399">
|
||||||
|
</columns>
|
||||||
|
<columns small="6" valign="middle">
|
||||||
|
<p class="text-right">BASIC</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
</center>
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
</wrapper>
|
||||||
|
```
|
||||||
|
|
||||||
|
Using this structure outside of the container will yeild a fluid width background that expands to the width of the email client's viewport.
|
||||||
|
|
||||||
|
|
||||||
16
vendor/assets/foundation-emails/docs/pages/zurb-stack.md
vendored
Normal file
16
vendor/assets/foundation-emails/docs/pages/zurb-stack.md
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
title: ZURB Stack
|
||||||
|
descripiton: The ZURB email stack is a boilerplate that gives you everything you need to develop and test HTML emails.
|
||||||
|
---
|
||||||
|
|
||||||
|
Email and web development can get complicated fast. We’ve introduced the 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:
|
||||||
|
|
||||||
|
- **Gulp.** This is our task runner of choice for Foundation. Gulp lets us queue up tasks to execute. This lets us do cool things like inlining automagically updating your browser. It’s what the Stack is built on. [Find out more about Gulp](http://gulpjs.com/).
|
||||||
|
- **Sass.** We use Libsass as our CSS preprocessor of choice. If you’re not familiar with Sass, it lets you use variables, nesting, and mixins (to name a few). [Learn more about Sass](http://sass-lang.com/).
|
||||||
|
- **Inlining.** One of the biggest headaches and time-sucks used to be inlining your HTML email. Well, no more! We’re using gulp-inline to to scan your CSS file and and automatically inject your CSS when you’re ready. Just run `npm run build` in your project when you’re ready to inline.
|
||||||
|
- **Build Options.** By default the inliner works without removing whitespaces and inlining for you, you have to change your settings in the inliner function (`function inliner(css)`) on your gulpfile.babel.js which is the root of your project. To change these settings go and update this part of the function as you wish: ``` .pipe($.htmlmin, { collapseWhitespace: true, minifyCSS: true }); ```.
|
||||||
|
- **Panini.** This is our flat file generator for Foundation. Just like it’s real-world counterpart, it takes a set of ingredients and flattens them into one delicious item. This lets you separate things like the header and footer content into partials, letting you focus on your code when you’re building. It’s built off of Handlebars, which let’s you keep things super organized with partial files and repeatable sections. Checkout our [Panini Repo](https://github.com/zurb/panini).
|
||||||
|
- **BrowserSync.** 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/).
|
||||||
|
- **Image Compression.** Finally, we’ve added gulp-imagemin which intelligently reduces the file-size of your png, jpeg, gif, and svg images. This lets your emails load at lightning speeds! [Check out the gulp-imagemin repo](https://github.com/sindresorhus/gulp-imagemin).
|
||||||
|
|
||||||
|
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.
|
||||||
40
vendor/assets/foundation-emails/docs/partials/component-list.html
vendored
Normal file
40
vendor/assets/foundation-emails/docs/partials/component-list.html
vendored
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<ul class="vertical menu docs-nav" id="docs-menu">
|
||||||
|
<p class="docs-nav-version">
|
||||||
|
<span data-docs-version>v2.2.0</span>
|
||||||
|
<a href="https://github.com/zurb/foundation-emails/releases/" target="_blank">(Changelog)</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<li class="docs-nav-title">Geting Started</li>
|
||||||
|
<li><a href="index.html">Overview</a></li>
|
||||||
|
<li><a href="css-guide.html">CSS Version</a></li>
|
||||||
|
<li><a href="sass-guide.html">Sass Version</a></li>
|
||||||
|
|
||||||
|
<li class="docs-nav-title">Guides</li>
|
||||||
|
<li><a href="sass.html">Using Sass</a></li>
|
||||||
|
<li><a href="inky.html">Using Inky</a></li>
|
||||||
|
<!-- <li><a href="styling.html">CSS with Inky</a></li> -->
|
||||||
|
<li><a href="media-query.html">Media Queries</a></li>
|
||||||
|
<li><a href="zurb-stack.html">ZURB Stack</a></li>
|
||||||
|
<li><a href="compatibility.html">Compatibility</a></li>
|
||||||
|
<!-- <li><a href="tips-tricks.html">Tips & Tricks</a></li> -->
|
||||||
|
<li><a href="migration.html">Migrate from Ink</a></li>
|
||||||
|
|
||||||
|
<li class="docs-nav-title">Components</li>
|
||||||
|
<li><a href="alignment.html">Alignment Classes</a></li>
|
||||||
|
<li><a href="button.html">Button</a></li>
|
||||||
|
<li><a href="callout.html">Callout</a></li>
|
||||||
|
<li><a href="global.html">Global Styles</a></li>
|
||||||
|
<li><a href="grid.html">Grid</a></li>
|
||||||
|
<li><a href="menu.html">Menu</a></li>
|
||||||
|
<li><a href="spacer.html">Spacer</a></li>
|
||||||
|
<li><a href="wrapper.html">Wrapper</a></li>
|
||||||
|
<!-- <li><a href="thumbnail.html">Thumbnail</a></li> -->
|
||||||
|
<li><a href="typography.html">Typography</a></li>
|
||||||
|
<li><a href="visibility.html">Visibility Classes</a></li>
|
||||||
|
|
||||||
|
<li class="docs-nav-title">Libraries</li>
|
||||||
|
<li><a href="panini.html">Panini (Handlebars)</a></li>
|
||||||
|
|
||||||
|
<li class="docs-nav-title">Older Versions</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/emails/docs/v1.0.5/index.html">v1 (Ink)</a></li>
|
||||||
|
</ul>
|
||||||
6
vendor/assets/foundation-emails/docs/partials/course-callout.html
vendored
Normal file
6
vendor/assets/foundation-emails/docs/partials/course-callout.html
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<a class="docs-course-callout" href="http://zurb.com/university/responsive-emails-foundation">
|
||||||
|
<span class="docs-course-callout-subtitle">ZURB Master Class</span>
|
||||||
|
<span class="docs-course-callout-title">Responsive Emails</span>
|
||||||
|
<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>
|
||||||
|
<span class="button">View Class</span>
|
||||||
|
</a>
|
||||||
113
vendor/assets/foundation-emails/docs/partials/footer.html
vendored
Normal file
113
vendor/assets/foundation-emails/docs/partials/footer.html
vendored
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
<div class="docs-newsletter">
|
||||||
|
<div class="row">
|
||||||
|
<div class="medium-8 columns">
|
||||||
|
<h5>Stay on top of what’s happening in <a href="http://zurb.com/responsive">responsive design</a>.</h5>
|
||||||
|
<p>Sign up to receive monthly Responsive Reading highlights. <a href="http://createsend.com/t/y-2767327772FDE37F">Read Last Month's Edition »</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="medium-4 columns">
|
||||||
|
<form action="http://zurb.createsend.com/t/y/s/vjtyhh/" method="post" id="subForm">
|
||||||
|
<div class="row collapse margintop-20px">
|
||||||
|
<div class="small-8 medium-8 columns">
|
||||||
|
<input id="fieldEmail" name="cm-vjtyhh-vjtyhh" type="email" placeholder="signup@example.com">
|
||||||
|
</div>
|
||||||
|
<div class="small-4 medium-4 columns">
|
||||||
|
<input type="submit" href="#" class="postfix button" value="Sign Up">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zurb-footer-top bg-fblue">
|
||||||
|
<div class="row property">
|
||||||
|
<div class="medium-4 columns">
|
||||||
|
<div class="property-info">
|
||||||
|
<h3>Foundation for Emails</h3>
|
||||||
|
<p>Foundation for Emails is a framework for responsive HTML emails created by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="medium-8 columns">
|
||||||
|
<div class="row collapse">
|
||||||
|
<div class="medium-4 columns">
|
||||||
|
<div class="learn-links">
|
||||||
|
<h4 class="hide-for-small">Want more?</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites">Foundation for Sites</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps">Foundation for Apps</a></li>
|
||||||
|
<li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
|
||||||
|
<li><a href="http://zurb.com/university/courses">Training</a></li>
|
||||||
|
<li><a href="http://zurb.com/library">Design Resources</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="medium-4 columns">
|
||||||
|
<div class="support-links">
|
||||||
|
<h4 class="hide-for-small">Talk to us</h4>
|
||||||
|
<p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
|
||||||
|
<p><a href="http://foundation.zurb.com/business/business-support.html">Business Support</a></p>
|
||||||
|
<p>Or check our <a href="http://foundation.zurb.com/support/support.html">support page</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="medium-4 columns">
|
||||||
|
<div class="connect-links">
|
||||||
|
<h4 class="hide-for-small">Stay Updated</h4>
|
||||||
|
<p>Keep up with the latest on Foundation. Find us on <a href="https://github.com/zurb/foundation">Github</a>.</p>
|
||||||
|
<a href="http://zurb.com/news" class="small button">Stay Connected</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row global">
|
||||||
|
<div class="medium-3 small-6 columns">
|
||||||
|
<a href="http://zurb.com/studios" class="footer-link-block services">
|
||||||
|
<span class="title">Studios</span>
|
||||||
|
<span>Helping more than 200 startups succeed since 1998.</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="medium-3 small-6 columns">
|
||||||
|
<a href="http://foundation.zurb.com/" class="footer-link-block foundation">
|
||||||
|
<span class="title">Foundation</span>
|
||||||
|
<span>The most advanced front-end framework in the world.</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="medium-3 small-6 columns">
|
||||||
|
<a href="http://zurb.com/notable" class="footer-link-block apps">
|
||||||
|
<span class="title">Notable Design Apps</span>
|
||||||
|
<span>Prototype, iterate and collect feedback on your products.</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="medium-3 small-6 columns">
|
||||||
|
<a href="http://zurb.com/university" class="footer-link-block expo">
|
||||||
|
<span class="title">University</span>
|
||||||
|
<span>Ideas, thoughts and design resources shared with you.</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zurb-footer-bottom">
|
||||||
|
<div class="row">
|
||||||
|
<div class="medium-4 medium-push-8 columns">
|
||||||
|
<ul class="home-social">
|
||||||
|
<li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
|
||||||
|
<li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
|
||||||
|
<li><a href="http://zurb.com/contact" class="mail"></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="medium-8 medium-pull-4 columns">
|
||||||
|
<a href="http://www.zurb.com" class="zurb-logo regular"></a>
|
||||||
|
<ul class="zurb-links">
|
||||||
|
<li><a href="http://zurb.com/about">About</a></li>
|
||||||
|
<li><a href="http://zurb.com/blog">Blog</a></li>
|
||||||
|
<li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
|
||||||
|
<li><a href="http://zurb.com/contact">Contact</a></li>
|
||||||
|
<li><a href="http://zurb.com/sitemap">Sitemap</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
80
vendor/assets/foundation-emails/docs/partials/mobile-navigation.html
vendored
Normal file
80
vendor/assets/foundation-emails/docs/partials/mobile-navigation.html
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<div class="title-bar hide-for-medium">
|
||||||
|
<div class="title-bar-left">
|
||||||
|
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
|
||||||
|
<span class="title-bar-title">Foundation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
|
||||||
|
<button class="close-button" aria-label="Close menu" type="button" data-close>
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<ul class="mobile-ofc vertical menu">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/learn/about.html">Learn</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/about.html">About Foundation</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/classes.html">Classes</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/case-studies.html">Case Studies</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/brands.html">Brands</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li class="title">Frameworks</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li class="title">Develop</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="http://foundation.zurb.com/upload.html">Upload</a></li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/support/support.html">Support</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/support.html">Support Channels</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/premium-support.html">Premium Support</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/faq.html">FAQs</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps/docs/#!/" target="_blank">Apps Docs</a></li>
|
||||||
|
<li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
|
||||||
|
<button class="close-button" aria-label="Close menu" type="button" data-close>
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<ul class="vertical menu">
|
||||||
|
<li><a href="#">Foundation</a></li>
|
||||||
|
<li><a href="#">Dot</a></li>
|
||||||
|
<li><a href="#">ZURB</a></li>
|
||||||
|
<li><a href="#">Com</a></li>
|
||||||
|
<li><a href="#">Slash</a></li>
|
||||||
|
<li><a href="#">Sites</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
62
vendor/assets/foundation-emails/docs/partials/navigation.html
vendored
Normal file
62
vendor/assets/foundation-emails/docs/partials/navigation.html
vendored
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<nav class="marketing-topbar show-for-medium">
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="topbar-title"><a href="http://foundation.zurb.com/index.html"><img src="http://foundation.zurb.com/assets/img/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="dropdown menu" data-dropdown-menu data-click-open="false">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/learn/about.html">Learn</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/about.html">About Foundation</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/classes.html">Classes</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/case-studies.html">Case Studies</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/brands.html">Brands</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li class="title">Frameworks</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li class="title">Develop</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="http://foundation.zurb.com/upload.html">Upload</a></li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/support/support.html">Support</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/support.html">Support Channels</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/premium-support.html">Premium Support</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/forum/">Foundation Forum</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/faq.html">FAQs</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps/docs/#!/" target="_blank">Apps Docs</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/emails/docs" target="_blank">Email Docs</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="http://foundation.zurb.com/emails/getting-started.html" class="button">Getting Started</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
72
vendor/assets/foundation-emails/docs/partials/off-canvas.html
vendored
Normal file
72
vendor/assets/foundation-emails/docs/partials/off-canvas.html
vendored
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
|
||||||
|
<button class="close-button" aria-label="Close menu" type="button" data-close>
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<ul class="mobile-ofc vertical menu">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/learn/about.html">Learn</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/about.html">About Foundation</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/classes.html">Classes</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/case-studies.html">Case Studies</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/learn/brands.html">Brands</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li class="title">Frameworks</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li class="title">Develop</li>
|
||||||
|
<li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="http://foundation.zurb.com/upload.html">Upload</a></li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/support/support.html">Support</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/support.html">Support Channels</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/premium-support.html">Premium Support</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/support/faq.html">FAQs</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="http://foundation.zurb.com/frameworks-docs.html">Docs</a>
|
||||||
|
<ul class="submenu menu vertical" data-submenu>
|
||||||
|
<li><a href="http://foundation.zurb.com/docs/" target="_blank">Sites Docs</a></li>
|
||||||
|
<li><a href="http://foundation.zurb.com/apps/docs/#!/" target="_blank">Apps Docs</a></li>
|
||||||
|
<li><a href="http://zurb.com/ink/docs.php" target="_blank">Email Docs</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="http://foundation.zurb.com/develop/getting-started.html" class="button">Getting Started</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
|
||||||
|
<button class="close-button" aria-label="Close menu" type="button" data-close>
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<ul class="vertical menu">
|
||||||
|
<li><a href="#">Foundation</a></li>
|
||||||
|
<li><a href="#">Dot</a></li>
|
||||||
|
<li><a href="#">ZURB</a></li>
|
||||||
|
<li><a href="#">Com</a></li>
|
||||||
|
<li><a href="#">Slash</a></li>
|
||||||
|
<li><a href="#">Emails</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
222
vendor/assets/foundation-emails/gulpfile.js
vendored
Normal file
222
vendor/assets/foundation-emails/gulpfile.js
vendored
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
var $ = require('gulp-load-plugins')();
|
||||||
|
var gulp = require('gulp');
|
||||||
|
var sequence = require('run-sequence');
|
||||||
|
var panini = require('panini');
|
||||||
|
var supercollider = require('supercollider');
|
||||||
|
var rimraf = require('rimraf');
|
||||||
|
var browser = require('browser-sync');
|
||||||
|
var foundationDocs = require('foundation-docs');
|
||||||
|
var octophant = require('octophant');
|
||||||
|
var inky = require('inky');
|
||||||
|
var siphon = require('siphon-media-query');
|
||||||
|
var lazypipe = require('lazypipe');
|
||||||
|
var fs = require('fs');
|
||||||
|
|
||||||
|
// Configuration for the documentation generator
|
||||||
|
supercollider
|
||||||
|
.config({
|
||||||
|
template: foundationDocs.componentTemplate,
|
||||||
|
marked: foundationDocs.marked,
|
||||||
|
handlebars: foundationDocs.handlebars,
|
||||||
|
keepFm: true,
|
||||||
|
quiet: false,
|
||||||
|
pageRoot: 'docs/pages',
|
||||||
|
data: {
|
||||||
|
repoName: 'foundation-emails',
|
||||||
|
editBranch: 'develop'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.searchConfig({
|
||||||
|
sort: ['page', 'component', 'sass variable', 'sass mixin', 'sass function', 'js class', 'js function', 'js plugin option', 'js event'],
|
||||||
|
pageTypes: {
|
||||||
|
library: function(item) {
|
||||||
|
return !!(item.library);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.adapter('sass')
|
||||||
|
.adapter('js');
|
||||||
|
|
||||||
|
// Cleans the build folder
|
||||||
|
gulp.task('clean', function(cb) {
|
||||||
|
rimraf('_build', cb);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Copies static documentation assets
|
||||||
|
gulp.task('copy', function() {
|
||||||
|
return gulp.src(['docs/assets/**/*', '!docs/assets/scss/**/*', '!docs/assets/js/**/*'])
|
||||||
|
.pipe(gulp.dest('_build/assets'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Builds documentation pages
|
||||||
|
gulp.task('html', function() {
|
||||||
|
return gulp.src('docs/pages/**/*')
|
||||||
|
.pipe($.cached('docs'))
|
||||||
|
.pipe(supercollider.init())
|
||||||
|
.pipe(panini({
|
||||||
|
root: 'docs/pages/',
|
||||||
|
layouts: 'docs/layouts/',
|
||||||
|
partials: 'docs/partials/',
|
||||||
|
helpers: foundationDocs.handlebarsHelpers
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest('_build'))
|
||||||
|
.on('finish', function() {
|
||||||
|
supercollider.buildSearch('_build/data/search.json', function() {});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('sass', ['sass:docs', 'sass:foundation']);
|
||||||
|
|
||||||
|
// Compiles documentation-specific CSS
|
||||||
|
gulp.task('sass:docs', function() {
|
||||||
|
return gulp.src('docs/assets/scss/docs.scss')
|
||||||
|
.pipe($.sass({ includePaths: [process.cwd()] }).on('error', $.sass.logError))
|
||||||
|
.pipe($.autoprefixer({
|
||||||
|
browsers: ['last 2 versions', 'ie >= 9']
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest('_build/assets/css'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Compiles Foundation-specific CSS
|
||||||
|
gulp.task('sass:foundation', function() {
|
||||||
|
return gulp.src('scss/foundation-emails.scss')
|
||||||
|
.pipe($.sass().on('error', $.sass.logError))
|
||||||
|
.pipe(gulp.dest('_build/assets/css'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Compiles documentation JavaScript
|
||||||
|
gulp.task('javascript:docs', function() {
|
||||||
|
return gulp.src(['node_modules/foundation-docs/js/*.js', 'docs/assets/js/**/*.js'])
|
||||||
|
.pipe($.concat('docs.js'))
|
||||||
|
.pipe(gulp.dest('_build/assets/js'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Generates a Sass settings file from the current codebase
|
||||||
|
gulp.task('settings', function() {
|
||||||
|
octophant('scss/**/*.scss', {
|
||||||
|
title: 'Foundation for Emails Settings',
|
||||||
|
output: 'scss/settings/_settings.scss',
|
||||||
|
sort: ['global', 'grid', 'block-grid', 'type']
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lints the Sass codebase
|
||||||
|
gulp.task('lint', function() {
|
||||||
|
return gulp.src('scss/**/*.scss')
|
||||||
|
.pipe($.sassLint())
|
||||||
|
.pipe($.sassLint.format())
|
||||||
|
.pipe($.sassLint.failOnError());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Creates a BrowserSync server
|
||||||
|
gulp.task('server', ['build'], function() {
|
||||||
|
browser.init({
|
||||||
|
server: './_build'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Uploads the documentation to the live server
|
||||||
|
gulp.task('deploy:docs', ['build'], function() {
|
||||||
|
return gulp.src('./_build/**')
|
||||||
|
.pipe($.prompt.confirm('Make sure everything looks right before you deploy.'))
|
||||||
|
.pipe($.rsync({
|
||||||
|
root: './_build',
|
||||||
|
hostname: 'deployer@72.32.134.77',
|
||||||
|
destination: '/home/deployer/sites/foundation-emails-march16'
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Runs the entire build process
|
||||||
|
gulp.task('build', function(cb) {
|
||||||
|
sequence('clean', ['copy', 'html', 'sass', 'javascript:docs'], cb);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Runs the build process, spins up a server, and watches for file changes
|
||||||
|
gulp.task('default', ['server'], function() {
|
||||||
|
gulp.watch('docs/**/*', ['html', browser.reload]);
|
||||||
|
gulp.watch(['docs/assets/scss/**/*', 'node_modules/foundation-docs/scss/**/*'], ['sass:docs', browser.reload]);
|
||||||
|
gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('test', ['sass', 'test:compile'], function() {
|
||||||
|
browser.init({ server: 'test/visual/_build', directory: true });
|
||||||
|
gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]);
|
||||||
|
gulp.watch('test/visual/pages/*.html', ['test:compile', browser.reload]);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('test:compile', function() {
|
||||||
|
gulp.src('test/visual/pages/*.html')
|
||||||
|
.pipe($.wrap({ src: 'test/visual/_template.html' }))
|
||||||
|
.pipe(inky())
|
||||||
|
.pipe(inliner('_build/assets/css/foundation-emails.css'))
|
||||||
|
.pipe(gulp.dest('test/visual/_build'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('templates', function() {
|
||||||
|
return gulp.src('templates/*.html')
|
||||||
|
.pipe($.wrap({ src: 'test/visual/_template.html' }))
|
||||||
|
.pipe(inky())
|
||||||
|
.pipe($.prettify({ indent_size: 2 }))
|
||||||
|
.pipe(gulp.dest('.templates'))
|
||||||
|
.pipe($.zip('all-templates.zip'))
|
||||||
|
.pipe(gulp.dest('.templates'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('download:build:index', function() {
|
||||||
|
return gulp.src('test/visual/_template.html', { base: 'test/visual' })
|
||||||
|
.pipe($.injectString.replace('<%= contents %>', ''))
|
||||||
|
.pipe($.injectString.replace('../assets/', ''))
|
||||||
|
.pipe($.rename('index.html'))
|
||||||
|
.pipe(gulp.dest('.download'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('download:build:templates', ['templates'], function() {
|
||||||
|
return gulp.src('.templates/*.html')
|
||||||
|
.pipe(gulp.dest('.download/templates'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('download:build:css', ['sass:foundation'], function() {
|
||||||
|
return gulp.src('_build/assets/css/foundation-emails.css')
|
||||||
|
.pipe(gulp.dest('.download/css'));
|
||||||
|
})
|
||||||
|
|
||||||
|
gulp.task('download:build', ['download:build:index', 'download:build:templates', 'download:build:css'], function() {
|
||||||
|
return gulp.src('.download/**/*')
|
||||||
|
.pipe($.zip('foundation-emails.zip'))
|
||||||
|
.pipe(gulp.dest('.'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('download', ['download:build'], function(done) {
|
||||||
|
return gulp.src('foundation-emails.zip')
|
||||||
|
.pipe($.rsync({
|
||||||
|
hostname: 'deployer@72.32.134.77',
|
||||||
|
destination: '/home/deployer/sites/foundation-sites-6-marketing/downloads/'
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('dist', ['sass:foundation'], function() {
|
||||||
|
return gulp.src('_build/assets/css/foundation-emails.css')
|
||||||
|
.pipe(gulp.dest('dist'))
|
||||||
|
.pipe($.cssnano())
|
||||||
|
.pipe($.rename('foundation-emails.min.css'))
|
||||||
|
.pipe(gulp.dest('dist'));
|
||||||
|
});
|
||||||
|
|
||||||
|
function inliner(css) {
|
||||||
|
var css = fs.readFileSync(css).toString();
|
||||||
|
var mqCss = siphon(css);
|
||||||
|
|
||||||
|
var pipe = lazypipe()
|
||||||
|
.pipe($.inlineCss, {
|
||||||
|
applyStyleTags: false,
|
||||||
|
removeStyleTags: false,
|
||||||
|
removeLinkTags: false
|
||||||
|
})
|
||||||
|
.pipe($.injectString.replace, '<!-- <style> -->', '<style>'+mqCss+'</style>')
|
||||||
|
.pipe($.htmlmin, {
|
||||||
|
collapseWhitespace: false,
|
||||||
|
minifyCSS: false
|
||||||
|
});
|
||||||
|
|
||||||
|
return pipe();
|
||||||
|
}
|
||||||
457
vendor/assets/foundation-emails/migration.md
vendored
Normal file
457
vendor/assets/foundation-emails/migration.md
vendored
Normal file
@ -0,0 +1,457 @@
|
|||||||
|
# Foundation for Emails 2 Migration Guide
|
||||||
|
|
||||||
|
- [What’s new?](https://github.com/zurb/foundation-emails/blob/master/migration.md#whats-new)
|
||||||
|
- [Overview](https://github.com/zurb/foundation-emails/blob/master/migration.md#overview)
|
||||||
|
- [HTML](https://github.com/zurb/foundation-emails/blob/master/migration.md#html)
|
||||||
|
- [CSS/Sass](https://github.com/zurb/foundation-emails/blob/master/migration.md#csssass)
|
||||||
|
- [Components](https://github.com/zurb/foundation-emails/blob/master/migration.md#components)
|
||||||
|
- [Grid](https://github.com/zurb/foundation-emails/blob/master/migration.md#grid)
|
||||||
|
- [Buttons](https://github.com/zurb/foundation-emails/blob/master/migration.md#buttons)
|
||||||
|
- [Callout](https://github.com/zurb/foundation-emails/blob/master/migration.md#panels-are-now-callouts)
|
||||||
|
- [Menu](https://github.com/zurb/foundation-emails/blob/master/migration.md#menu)
|
||||||
|
- [Dependencies](https://github.com/zurb/foundation-emails/blob/master/migration.md#dependencies)
|
||||||
|
|
||||||
|
#### This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to 2.
|
||||||
|
|
||||||
|
## What’s new?
|
||||||
|
|
||||||
|
- **Streamlined and updated responsive grid:** We’ve simplified the markup in the new version so it’s faster and easier to code. The new responsive grid in Emails 2 requires fewer tags and classes. It’s also now responsive on Android Native!
|
||||||
|
- **Inky templating language:** With Inky you can write less code and get more done. The Inky language gets you out of tables and into a simpler, more web-like, HTML.
|
||||||
|
- **Built with Sass:** Now faster than ever, you can easily make sweeping visual changes to your email that reflect your brand styles - all within one settings file.
|
||||||
|
- **ZURB Stack:** All kinds of task automation - [Panini](http://foundation.zurb.com/sites/docs/panini.html), our Handlebars templates, compiling Sass, BrowserSync, image compression, and auto inlining are built in to speed up your workflow.
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
When migrating, the following items can be translated easily from 1 to 2:
|
||||||
|
- Boilerplate
|
||||||
|
- Visibility
|
||||||
|
- Typography
|
||||||
|
- Text helper classes
|
||||||
|
- Button class
|
||||||
|
- Container
|
||||||
|
- Panel
|
||||||
|
- Media Queries
|
||||||
|
|
||||||
|
Other areas may require more changes to work correctly including:
|
||||||
|
- Grid
|
||||||
|
- Sub-grid (now part of Grid)
|
||||||
|
|
||||||
|
What’s new that you might want to use:
|
||||||
|
- Menu - Horizontal
|
||||||
|
- Menu - Vertical
|
||||||
|
|
||||||
|
## HTML
|
||||||
|
|
||||||
|
With Foundation for Emails 2, confusing and tedious tables are a thing of the past. The new Inky markup will save you time and energy coding your emails. It looks like:
|
||||||
|
|
||||||
|
```
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<column small="12" large="4"></column>
|
||||||
|
<column small="12" large="8"></column>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can use it to create the grid structure, buttons, and other components. We’ll go into this in detail in the components section. We'll explain more in the [Grid section](https://github.com/zurb/foundation-emails/blob/master/migration.md#grid).
|
||||||
|
|
||||||
|
## CSS/Sass
|
||||||
|
|
||||||
|
Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings.
|
||||||
|
|
||||||
|
These are some CSS classes that are no longer needed for proper spacing:
|
||||||
|
- .wrapper
|
||||||
|
- .wrapper-last
|
||||||
|
- .text-pad
|
||||||
|
- .text-pad-left
|
||||||
|
- .text.pad-right
|
||||||
|
|
||||||
|
***
|
||||||
|
## Components
|
||||||
|
***
|
||||||
|
|
||||||
|
### Grid
|
||||||
|
|
||||||
|
Version 1
|
||||||
|
In the previous version, we needed extra tags to support a wrapper element. This used to control the gutter and margins of a column.
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<td class="wrapper last">
|
||||||
|
|
||||||
|
<table class="twelve columns">
|
||||||
|
<tr>
|
||||||
|
<td class="text-pad">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
In F4E 2, we’ve eliminated another a tag in an effort to simplify your markup. Gutters are now directly applied to the column element itself. We still need to identify the last column with a last class, however we also need to identify the first column element with the first class.
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="first last small-12 large-12 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns small="12" large="12">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sub-grid is now a small grid
|
||||||
|
In an effort to unify the thinking across the Foundation family, we’ve removed the sub-columns and moved towards a fully functional small grid.
|
||||||
|
|
||||||
|
Version 1
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td class="wrapper last">
|
||||||
|
|
||||||
|
<table class="twelve columns">
|
||||||
|
<tr>
|
||||||
|
<td class="six sub-columns">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="six sub-columns last">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="first large-6 small-6 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th class="last large-6 small-6 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
<th class="expander"></th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Block Grid
|
||||||
|
The block grid has a minor syntax change with identifying the number of elements that are displayed in the row. We’ve moved to the convention of `.up-x`, instead of `.ex-up`.
|
||||||
|
|
||||||
|
|
||||||
|
Version 1
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="block-grid three-up">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Thing 1
|
||||||
|
</td><td> <!-- Make sure the tags are directly next to each other -->
|
||||||
|
Thing 2
|
||||||
|
</td><td> <!-- Make sure the tags are directly next to each other -->
|
||||||
|
Thing 3
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="block-grid up-3">
|
||||||
|
<tr>
|
||||||
|
<td>Thing 1</td>
|
||||||
|
<td>Thing 2</td>
|
||||||
|
<td>Thing 3</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<block-grid up="3">
|
||||||
|
<td>Thing 1</td>
|
||||||
|
<td>Thing 2</td>
|
||||||
|
<td>Thing 3</td>
|
||||||
|
</block-grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Offset Columns
|
||||||
|
Because we’ve eliminated the wrapper, offsets are now directly applied to the column itself.
|
||||||
|
|
||||||
|
Version 1
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<td class="wrapper offset-by-four">
|
||||||
|
|
||||||
|
<table class="eight columns">
|
||||||
|
<tr>
|
||||||
|
<td class="panel">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="row">
|
||||||
|
<tr>
|
||||||
|
<th class="small-4 small-offset-8 large-4 large-offset-8 columns">
|
||||||
|
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<row>
|
||||||
|
<columns small="4" large="4" class="small-offset-8 large-offset-8">
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Buttons
|
||||||
|
In the previous version of F4E the text inside of the button was the only clickable element. In F4E 2, we’ve taken the hybrid approach of using padding and borders to increase the clickable area
|
||||||
|
|
||||||
|
Version 1
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="button">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="#">Button Label</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="button">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="https://zurb.com">I am successful</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<button href="http://zurb.com"></button>
|
||||||
|
```
|
||||||
|
|
||||||
|
The button markup has changed to make the touch targets better. Now the whole button is clickable. It requires more table markup but you should use Inky anyways which is much simpler.
|
||||||
|
|
||||||
|
## Panels are now Callouts
|
||||||
|
In an effort to unify the terminology across the Foundation family panels are now called callouts.
|
||||||
|
|
||||||
|
Version 1
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="twelve columns">
|
||||||
|
<tr>
|
||||||
|
<td class="panel">
|
||||||
|
Panel content
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="small-12 columns">
|
||||||
|
<tr>
|
||||||
|
<td class="callout">
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class="expander"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
<p>One Word</p>
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<callout class="secondary">
|
||||||
|
<p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<callout class="primary">
|
||||||
|
<row>
|
||||||
|
<columns small="12">
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns small="6">
|
||||||
|
<p>One Word</p>
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</callout>
|
||||||
|
```
|
||||||
|
|
||||||
|
Callouts used to only be applicable to a `<td>`. In Foundation for Emails 2, you can wrap a callout around a `<row>` or the content inside a `<column>`.
|
||||||
|
|
||||||
|
***
|
||||||
|
## NEW
|
||||||
|
***
|
||||||
|
|
||||||
|
### Menu
|
||||||
|
|
||||||
|
Version 2 (CSS version)
|
||||||
|
|
||||||
|
```
|
||||||
|
<table class="container">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
<table class="menu">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th class="menu-item">
|
||||||
|
<a href="http://google.com">Nav 1</a>
|
||||||
|
</th>
|
||||||
|
<th class="menu-item">
|
||||||
|
<a href="http://google.com">Nav 2</a>
|
||||||
|
</th>
|
||||||
|
<th class="menu-item">
|
||||||
|
<a href="http://google.com">Nav 3</a>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
Version 2 (Inky markup)
|
||||||
|
|
||||||
|
```
|
||||||
|
<menu>
|
||||||
|
<item href="one.html">Item One</item>
|
||||||
|
<item href="one.html">Item Two</item>
|
||||||
|
<item href="one.html">Item Three</item>
|
||||||
|
</menu>
|
||||||
|
```
|
||||||
|
|
||||||
|
The menu component can be used to create a simple set of links comonly used in headers, for social icons or in footers. Adding the `.vertical` class will change the orientation.
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
**CSS:**
|
||||||
|
|
||||||
|
- Text Editor
|
||||||
|
|
||||||
|
**Sass version:**
|
||||||
|
|
||||||
|
- Text Editor
|
||||||
|
- Git
|
||||||
|
- Node
|
||||||
|
|
||||||
|
To use the Sass version with the Inky markup language you'll want to insall the Foundation for Emails project template. You'll find the [installation instructions here](https://github.com/zurb/foundation-emails/tree/v2.0#getting-started).
|
||||||
67
vendor/assets/foundation-emails/package.json
vendored
Normal file
67
vendor/assets/foundation-emails/package.json
vendored
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
{
|
||||||
|
"name": "foundation-emails",
|
||||||
|
"version": "2.2.1",
|
||||||
|
"description": "A framework for responsive emails made by ZURB",
|
||||||
|
"keywords": [
|
||||||
|
"responsive",
|
||||||
|
"emails"
|
||||||
|
],
|
||||||
|
"author": "ZURB <foundation@zurb.com> (http://foundation.zurb.com)",
|
||||||
|
"scripts": {
|
||||||
|
"start": "gulp",
|
||||||
|
"test:visual": "gulp test",
|
||||||
|
"deploy:dist": "gulp dist",
|
||||||
|
"deploy:settings": "gulp settings",
|
||||||
|
"deploy:download": "gulp download",
|
||||||
|
"deploy:templates": "gulp templates",
|
||||||
|
"deploy:docs": "gulp deploy:docs"
|
||||||
|
},
|
||||||
|
"repository": "https://github.com/zurb/foundation-emails",
|
||||||
|
"bugs": "https://github.com/zurb/foundation-emails/issues",
|
||||||
|
"devDependencies": {
|
||||||
|
"browser-sync": "^2.9.10",
|
||||||
|
"cheerio": "^0.19.0",
|
||||||
|
"clipboard-js": "^0.2.0",
|
||||||
|
"foundation-docs": "zurb/foundation-docs",
|
||||||
|
"foundation-sites": "^6.2.0",
|
||||||
|
"gulp": "^3.8.11",
|
||||||
|
"gulp-autoprefixer": "^2.3.1",
|
||||||
|
"gulp-cached": "^1.1.0",
|
||||||
|
"gulp-concat": "^2.6.0",
|
||||||
|
"gulp-cssnano": "^2.1.1",
|
||||||
|
"gulp-htmlmin": "^1.3.0",
|
||||||
|
"gulp-if": "^2.0.0",
|
||||||
|
"gulp-inject-string": "^1.1.0",
|
||||||
|
"gulp-inline-css": "^2.0.0",
|
||||||
|
"gulp-load-plugins": "^1.0.0-rc.1",
|
||||||
|
"gulp-prettify": "^0.4.0",
|
||||||
|
"gulp-prompt": "^0.1.2",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
|
"gulp-rsync": "0.0.5",
|
||||||
|
"gulp-sass": "^2.1.0",
|
||||||
|
"gulp-sass-lint": "^1.1.1",
|
||||||
|
"gulp-sourcemaps": "^1.6.0",
|
||||||
|
"gulp-wrap": "^0.11.0",
|
||||||
|
"gulp-zip": "^3.2.0",
|
||||||
|
"inky": "^1.3.6",
|
||||||
|
"lazypipe": "^1.0.1",
|
||||||
|
"motion-ui": "^1.1.1",
|
||||||
|
"multiline": "^1.0.2",
|
||||||
|
"octophant": "^1.0.0",
|
||||||
|
"panini": "^1.2.0",
|
||||||
|
"rimraf": "^2.4.2",
|
||||||
|
"run-sequence": "^1.1.2",
|
||||||
|
"siphon-media-query": "^1.0.0",
|
||||||
|
"supercollider": "^1.4.0",
|
||||||
|
"typeahead.js": "^0.11.1",
|
||||||
|
"zeroclipboard": "^2.2.0"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"eyeglass": {
|
||||||
|
"name": "foundation-emails",
|
||||||
|
"sassDir": "scss",
|
||||||
|
"needs": "^0.8.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
95
vendor/assets/foundation-emails/scss/_global.scss
vendored
Executable file
95
vendor/assets/foundation-emails/scss/_global.scss
vendored
Executable file
@ -0,0 +1,95 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// foundation.zurb.com
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group global
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Primary color for interactive components like links and buttons.
|
||||||
|
/// @type Color
|
||||||
|
$primary-color: #2199e8 !default;
|
||||||
|
|
||||||
|
/// Secondary color, used with components that support the `.secondary` class.
|
||||||
|
/// @type Color
|
||||||
|
$secondary-color: #777777 !default;
|
||||||
|
|
||||||
|
/// Color to indicate a positive status or action, used with the `.success` class.
|
||||||
|
/// @type Color
|
||||||
|
$success-color: #3adb76 !default;
|
||||||
|
|
||||||
|
/// Color to indicate a caution status or action, used with the `.warning` class.
|
||||||
|
/// @type Color
|
||||||
|
$warning-color: #ffae00 !default;
|
||||||
|
|
||||||
|
/// Color to indicate a negative status or action, used with the `.alert` class.
|
||||||
|
/// @type Color
|
||||||
|
$alert-color: #ec5840 !default;
|
||||||
|
|
||||||
|
/// Color used for light gray UI items within Foundation.
|
||||||
|
/// @type Color
|
||||||
|
$light-gray: #f3f3f3 !default;
|
||||||
|
|
||||||
|
/// Color used for medium gray UI items within Foundation.
|
||||||
|
/// @type Color
|
||||||
|
$medium-gray: #cacaca !default;
|
||||||
|
|
||||||
|
/// Color used for dark gray UI items within Foundation.
|
||||||
|
/// @type Color
|
||||||
|
$dark-gray: #8a8a8a !default;
|
||||||
|
|
||||||
|
/// Color used for black ui items within Foundation
|
||||||
|
/// @type Color
|
||||||
|
$black: #0a0a0a !default;
|
||||||
|
|
||||||
|
/// Color used for white ui items within Foundation
|
||||||
|
/// @type Color
|
||||||
|
$white: #fefefe !default;
|
||||||
|
|
||||||
|
/// Color used code.
|
||||||
|
/// @type Color
|
||||||
|
$pre-color: #ff6908 !default;
|
||||||
|
|
||||||
|
/// Width of the container.
|
||||||
|
/// @type Number
|
||||||
|
$global-width: 580px !default;
|
||||||
|
|
||||||
|
/// Width of the container on small screens.
|
||||||
|
/// @type Length
|
||||||
|
$global-width-small: 95% !default;
|
||||||
|
|
||||||
|
/// Gutter for grid elements.
|
||||||
|
/// @type length
|
||||||
|
$global-gutter: 16px !default;
|
||||||
|
|
||||||
|
/// Body background color.
|
||||||
|
/// @type Length
|
||||||
|
$body-background: $light-gray !default;
|
||||||
|
|
||||||
|
/// Color for the container background
|
||||||
|
/// @type Color
|
||||||
|
$container-background: $white !default;
|
||||||
|
|
||||||
|
/// Global padding.
|
||||||
|
/// @type Number
|
||||||
|
$global-padding: 16px !default;
|
||||||
|
|
||||||
|
/// Global margin. Margin requires a capital 'M' to workin Outlook.com
|
||||||
|
/// @type Number
|
||||||
|
$global-margin: 16px !default;
|
||||||
|
|
||||||
|
/// Global raidus of radius-corners.
|
||||||
|
/// @type Number
|
||||||
|
$global-radius: 3px !default;
|
||||||
|
|
||||||
|
/// Global rounded radius of rounded-corners.
|
||||||
|
/// @type Number
|
||||||
|
$global-rounded: 500px !default;
|
||||||
|
|
||||||
|
/// Global media query to switch from desktop to mobile styles.
|
||||||
|
/// @type String
|
||||||
|
$global-breakpoint: $global-width + $global-gutter !default;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
88
vendor/assets/foundation-emails/scss/components/_alignment.scss
vendored
Executable file
88
vendor/assets/foundation-emails/scss/components/_alignment.scss
vendored
Executable file
@ -0,0 +1,88 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group alignment
|
||||||
|
////
|
||||||
|
|
||||||
|
table,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
span {
|
||||||
|
&.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.text-center {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
.small-float-center {
|
||||||
|
margin: 0 auto !important;
|
||||||
|
float: none !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text-center {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text-left {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-text-right {
|
||||||
|
text-align: right !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img.float-left {
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.float-right {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.float-center,
|
||||||
|
img.text-center {
|
||||||
|
margin: 0 auto;
|
||||||
|
Margin: 0 auto;
|
||||||
|
float: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
table,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
&.float-center {
|
||||||
|
margin: 0 auto;
|
||||||
|
Margin: 0 auto;
|
||||||
|
float: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
311
vendor/assets/foundation-emails/scss/components/_button.scss
vendored
Executable file
311
vendor/assets/foundation-emails/scss/components/_button.scss
vendored
Executable file
@ -0,0 +1,311 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group button
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Padding inside buttons at various sizes.
|
||||||
|
/// @type Map
|
||||||
|
$button-padding: (
|
||||||
|
tiny: 4px 8px 4px 8px,
|
||||||
|
small: 5px 10px 5px 10px,
|
||||||
|
default: 8px 16px 8px 16px,
|
||||||
|
large: 10px 20px 10px 20px,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
/// Font sizes of buttons at various sizes.
|
||||||
|
/// @type Map
|
||||||
|
$button-font-size: (
|
||||||
|
tiny: 10px,
|
||||||
|
small: 12px,
|
||||||
|
default: 16px,
|
||||||
|
large: 20px,
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
/// Text color of buttons.
|
||||||
|
/// @type Color
|
||||||
|
$button-color: $white !default;
|
||||||
|
|
||||||
|
/// Text color of buttons with a light background.
|
||||||
|
/// @type Color
|
||||||
|
$button-color-alt: $medium-gray !default;
|
||||||
|
|
||||||
|
/// Font weight of buttons.
|
||||||
|
/// @type Weight
|
||||||
|
$button-font-weight: bold !default;
|
||||||
|
|
||||||
|
/// Margin around buttons.
|
||||||
|
/// @type List
|
||||||
|
$button-margin: 0 0 $global-margin 0 !default;
|
||||||
|
|
||||||
|
/// Background color of buttons.
|
||||||
|
/// @type Color
|
||||||
|
$button-background: $primary-color !default;
|
||||||
|
|
||||||
|
/// Border around buttons.
|
||||||
|
/// @type Border
|
||||||
|
$button-border: 2px solid $button-background !default;
|
||||||
|
|
||||||
|
/// Border radius of buttons. Not supported by all email clients.
|
||||||
|
/// @type Number
|
||||||
|
$button-radius: $global-radius !default;
|
||||||
|
|
||||||
|
/// Border radius of rounded buttons. Not supported by all email clients.
|
||||||
|
/// @type Number
|
||||||
|
$button-rounded: $global-rounded !default;
|
||||||
|
|
||||||
|
table.button {
|
||||||
|
width: auto;
|
||||||
|
margin: $button-margin;
|
||||||
|
Margin: $button-margin;
|
||||||
|
|
||||||
|
table {
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: left;
|
||||||
|
color: $button-color;
|
||||||
|
background: $button-background;
|
||||||
|
border: $button-border;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: $body-font-family;
|
||||||
|
font-size: map-get($button-font-size, default);
|
||||||
|
font-weight: $button-font-weight;
|
||||||
|
color: $button-color;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding: map-get($button-padding, default);
|
||||||
|
border: 0 solid $button-background;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.radius table td {
|
||||||
|
border-radius: $button-radius;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rounded table td {
|
||||||
|
border-radius: $button-rounded;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button:hover table tr td a,
|
||||||
|
table.button:active table tr td a,
|
||||||
|
table.button table tr td a:visited,
|
||||||
|
table.button.tiny:hover table tr td a,
|
||||||
|
table.button.tiny:active table tr td a,
|
||||||
|
table.button.tiny table tr td a:visited,
|
||||||
|
table.button.small:hover table tr td a,
|
||||||
|
table.button.small:active table tr td a,
|
||||||
|
table.button.small table tr td a:visited,
|
||||||
|
table.button.large:hover table tr td a,
|
||||||
|
table.button.large:active table tr td a,
|
||||||
|
table.button.large table tr td a:visited {
|
||||||
|
color: $button-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.tiny {
|
||||||
|
table {
|
||||||
|
td,
|
||||||
|
a {
|
||||||
|
padding: map-get($button-padding, tiny);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: map-get($button-font-size, tiny);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.small {
|
||||||
|
table {
|
||||||
|
td,
|
||||||
|
a {
|
||||||
|
padding: map-get($button-padding, small);
|
||||||
|
font-size: map-get($button-font-size, small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.large {
|
||||||
|
table {
|
||||||
|
a {
|
||||||
|
padding: map-get($button-padding, large);
|
||||||
|
font-size: map-get($button-font-size, large);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.expand,
|
||||||
|
table.button.expanded {
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
center {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button:hover,
|
||||||
|
table.button:visited,
|
||||||
|
table.button:active {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: darken($button-background, 10%);
|
||||||
|
color: $button-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button:hover,
|
||||||
|
table.button:visited,
|
||||||
|
table.button:active {
|
||||||
|
table {
|
||||||
|
a {
|
||||||
|
border: 0 solid darken($button-background, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.secondary {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: $secondary-color;
|
||||||
|
color: $button-color;
|
||||||
|
border: 0px solid $secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $button-color;
|
||||||
|
border: 0 solid $secondary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.secondary:hover {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: lighten($secondary-color, 10%);
|
||||||
|
color: $button-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0 solid lighten($secondary-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.secondary:hover {
|
||||||
|
table {
|
||||||
|
td a {
|
||||||
|
color: $button-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.secondary:active {
|
||||||
|
table {
|
||||||
|
td a {
|
||||||
|
color: $button-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.secondary {
|
||||||
|
table {
|
||||||
|
td a:visited {
|
||||||
|
color: $button-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.success {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: $success-color;
|
||||||
|
border: 0px solid $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0 solid $success-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.success:hover {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: darken($success-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0 solid darken($success-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.alert {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: $alert-color;
|
||||||
|
border: 0px solid $alert-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0 solid $alert-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.alert:hover {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: darken($alert-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0 solid darken($alert-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.warning {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: $warning-color;
|
||||||
|
border: 0px solid $warning-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0px solid $warning-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.warning:hover {
|
||||||
|
table {
|
||||||
|
td {
|
||||||
|
background: darken($warning-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
border: 0px solid darken($warning-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
85
vendor/assets/foundation-emails/scss/components/_callout.scss
vendored
Normal file
85
vendor/assets/foundation-emails/scss/components/_callout.scss
vendored
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group callout
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Background color of a callout.
|
||||||
|
/// @type Color
|
||||||
|
$callout-background: $white !default;
|
||||||
|
|
||||||
|
/// Fade value for callout backgrounds.
|
||||||
|
/// @type Number
|
||||||
|
$callout-background-fade: 85% !default;
|
||||||
|
|
||||||
|
/// Padding inside a callout.
|
||||||
|
/// @type Length
|
||||||
|
$callout-padding: 10px !default;
|
||||||
|
|
||||||
|
/// Bottom margin of a callout.
|
||||||
|
/// @type Length
|
||||||
|
$callout-margin-bottom: $global-margin !default;
|
||||||
|
|
||||||
|
/// Border around a callout.
|
||||||
|
/// @type Border
|
||||||
|
$callout-border: 1px solid darken($callout-background, 20%) !default;
|
||||||
|
|
||||||
|
/// Border around a callout with the `.success` class.
|
||||||
|
/// @type Border
|
||||||
|
$callout-border-secondary: 1px solid darken($secondary-color, 20%) !default;
|
||||||
|
|
||||||
|
/// Border around a callout with the `.success` class.
|
||||||
|
/// @type Border
|
||||||
|
$callout-border-success: 1px solid darken($success-color, 20%) !default;
|
||||||
|
|
||||||
|
/// Border around a callout with the `.warning` class.
|
||||||
|
/// @type Border
|
||||||
|
$callout-border-warning: 1px solid darken($warning-color, 20%) !default;
|
||||||
|
|
||||||
|
/// Border around a callout with the `.alert` class.
|
||||||
|
/// @type Border
|
||||||
|
$callout-border-alert: 1px solid darken($alert-color, 20%) !default;
|
||||||
|
|
||||||
|
table.callout {
|
||||||
|
margin-bottom: $callout-margin-bottom;
|
||||||
|
Margin-bottom: $callout-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.callout-inner {
|
||||||
|
width: 100%;
|
||||||
|
border: $callout-border;
|
||||||
|
padding: $callout-padding;
|
||||||
|
background: $callout-background;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: scale-color($primary-color, $lightness: $callout-background-fade);
|
||||||
|
border: $callout-border-secondary;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: scale-color($secondary-color, $lightness: $callout-background-fade);
|
||||||
|
border: $callout-border-secondary;
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background: scale-color($success-color, $lightness: $callout-background-fade);
|
||||||
|
border: $callout-border-success;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background: scale-color($warning-color, $lightness: $callout-background-fade);
|
||||||
|
border: $callout-border-warning;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert {
|
||||||
|
background: scale-color($alert-color, $lightness: $callout-background-fade);
|
||||||
|
border: $callout-border-alert;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
0
vendor/assets/foundation-emails/scss/components/_code.scss
vendored
Normal file
0
vendor/assets/foundation-emails/scss/components/_code.scss
vendored
Normal file
139
vendor/assets/foundation-emails/scss/components/_media-query.scss
vendored
Executable file
139
vendor/assets/foundation-emails/scss/components/_media-query.scss
vendored
Executable file
@ -0,0 +1,139 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group media-query
|
||||||
|
////
|
||||||
|
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
table.body img {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body center {
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body .container {
|
||||||
|
width: $global-width-small !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
//If it supports border-box, why not? Am I right?
|
||||||
|
//Also, by default pad that to the global-gutter variable
|
||||||
|
table.body .columns,
|
||||||
|
table.body .column {
|
||||||
|
height: auto !important;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: $global-gutter !important;
|
||||||
|
padding-right: $global-gutter !important;
|
||||||
|
|
||||||
|
// Nested columns won't double the padding
|
||||||
|
.column,
|
||||||
|
.columns {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collpased columns have no gutter.
|
||||||
|
.collapse {
|
||||||
|
table.body & .columns,
|
||||||
|
table.body & .column {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Basic grid rules
|
||||||
|
@for $i from 1 through $grid-column-count {
|
||||||
|
td.small-#{$i},
|
||||||
|
th.small-#{$i} {
|
||||||
|
display: inline-block !important;
|
||||||
|
width: -zf-grid-calc-pct($i, $grid-column-count) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//If it's the last column in column count (12 by default),
|
||||||
|
//give it block and 100% width to knock down the wimpy columns to their own row.
|
||||||
|
.columns td.small-#{$grid-column-count},
|
||||||
|
.column td.small-#{$grid-column-count},
|
||||||
|
.columns th.small-#{$grid-column-count},
|
||||||
|
.column th.small-#{$grid-column-count} {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through ($grid-column-count - 1) {
|
||||||
|
table.body td.small-offset-#{$i},
|
||||||
|
table.body th.small-offset-#{$i} {
|
||||||
|
//1.5 takes in effect a whole empty cell.
|
||||||
|
margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
|
||||||
|
Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body table.columns td.expander,
|
||||||
|
table.body table.columns th.expander {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body .right-text-pad,
|
||||||
|
table.body .text-pad-right {
|
||||||
|
padding-left: $text-padding !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body .left-text-pad,
|
||||||
|
table.body .text-pad-left {
|
||||||
|
padding-right: $text-padding !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
//menu
|
||||||
|
table.menu {
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
width: auto !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical,
|
||||||
|
&.small-vertical {
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Centers the menus!
|
||||||
|
table.menu[align="center"] {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// expands buttons for small only
|
||||||
|
table.button.small-expand,
|
||||||
|
table.button.small-expanded {
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-align: center !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
center {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
67
vendor/assets/foundation-emails/scss/components/_menu.scss
vendored
Normal file
67
vendor/assets/foundation-emails/scss/components/_menu.scss
vendored
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group menu
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Padding inside a menu item.
|
||||||
|
/// @type Length
|
||||||
|
$menu-item-padding: 10px !default;
|
||||||
|
|
||||||
|
/// Right-hand spacing of items in menus with the `.simple` class.
|
||||||
|
/// @type Length
|
||||||
|
$menu-item-gutter: 10px !default;
|
||||||
|
|
||||||
|
/// This is the color of the menu item links.
|
||||||
|
/// @type Color
|
||||||
|
$menu-item-color: $primary-color !default;
|
||||||
|
|
||||||
|
table.menu {
|
||||||
|
width: $global-width;
|
||||||
|
|
||||||
|
td.menu-item,
|
||||||
|
th.menu-item {
|
||||||
|
padding: $menu-item-padding;
|
||||||
|
padding-right: $menu-item-gutter;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $menu-item-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Doesn't work on the pesky ESPs like outlook 2000
|
||||||
|
table.menu.vertical {
|
||||||
|
td.menu-item,
|
||||||
|
th.menu-item {
|
||||||
|
padding: $menu-item-padding;
|
||||||
|
padding-right: 0;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nested lists need some more padding to the left
|
||||||
|
td.menu-item,
|
||||||
|
th.menu-item {
|
||||||
|
table.menu.vertical {
|
||||||
|
td.menu-item,
|
||||||
|
th.menu-item {
|
||||||
|
padding-left: $menu-item-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.menu.text-center a {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Centers the menus!
|
||||||
|
.menu[align="center"] {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
90
vendor/assets/foundation-emails/scss/components/_normalize.scss
vendored
Executable file
90
vendor/assets/foundation-emails/scss/components/_normalize.scss
vendored
Executable file
@ -0,0 +1,90 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group normalize
|
||||||
|
////
|
||||||
|
|
||||||
|
$paragraph-margin-bottom: 10px !default;
|
||||||
|
|
||||||
|
#outlook a {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
margin: 0;
|
||||||
|
Margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ExternalClass {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&,
|
||||||
|
p,
|
||||||
|
span,
|
||||||
|
font,
|
||||||
|
td,
|
||||||
|
div {
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#backgroundTable {
|
||||||
|
margin: 0;
|
||||||
|
Margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100% !important;
|
||||||
|
line-height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
clear: both;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
center {
|
||||||
|
width: 100%;
|
||||||
|
min-width: $global-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
a img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 0 $paragraph-margin-bottom;
|
||||||
|
Margin: 0 0 0 $paragraph-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
word-wrap: break-word;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
border-collapse: collapse !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table, tr, td {
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
11
vendor/assets/foundation-emails/scss/components/_outlook-first.scss
vendored
Executable file
11
vendor/assets/foundation-emails/scss/components/_outlook-first.scss
vendored
Executable file
@ -0,0 +1,11 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group outlook
|
||||||
|
////
|
||||||
|
|
||||||
|
body.outlook p {
|
||||||
|
display: inline !important;
|
||||||
|
}
|
||||||
49
vendor/assets/foundation-emails/scss/components/_thumbnail.scss
vendored
Normal file
49
vendor/assets/foundation-emails/scss/components/_thumbnail.scss
vendored
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group thumbnail
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Border around thumbnail images.
|
||||||
|
/// @type Border
|
||||||
|
$thumbnail-border: solid 4px $white !default;
|
||||||
|
|
||||||
|
/// Bottom margin for thumbnail images.
|
||||||
|
/// @type Length
|
||||||
|
$thumbnail-margin-bottom: $global-margin !default;
|
||||||
|
|
||||||
|
/// Box shadow under thumbnail images.
|
||||||
|
/// @type Shadow
|
||||||
|
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
|
||||||
|
|
||||||
|
/// Box shadow under thumbnail images.
|
||||||
|
/// @type Shadow
|
||||||
|
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
|
||||||
|
|
||||||
|
/// Transition proprties for thumbnail images.
|
||||||
|
/// @type Transition
|
||||||
|
$thumbnail-transition: box-shadow 200ms ease-out !default;
|
||||||
|
|
||||||
|
/// Default radius for thumbnail images.
|
||||||
|
/// @type Number
|
||||||
|
$thumbnail-radius: $global-radius !default;
|
||||||
|
|
||||||
|
/// Adds thumbnail styles to an element.
|
||||||
|
.thumbnail {
|
||||||
|
border: $thumbnail-border;
|
||||||
|
box-shadow: $thumbnail-shadow;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
transition: $thumbnail-transition;
|
||||||
|
border-radius: $thumbnail-radius;
|
||||||
|
margin-bottom: $thumbnail-margin-bottom;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: $thumbnail-shadow-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
339
vendor/assets/foundation-emails/scss/components/_typography.scss
vendored
Executable file
339
vendor/assets/foundation-emails/scss/components/_typography.scss
vendored
Executable file
@ -0,0 +1,339 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group typography
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Global font color.
|
||||||
|
/// @type Color
|
||||||
|
$global-font-color: $black !default;
|
||||||
|
|
||||||
|
/// Global font family.
|
||||||
|
/// @type Font
|
||||||
|
$body-font-family: Helvetica, Arial, sans-serif !default;
|
||||||
|
|
||||||
|
/// Global font weight.
|
||||||
|
/// @type Keyword
|
||||||
|
$global-font-weight: normal !default;
|
||||||
|
|
||||||
|
/// Global font weight.
|
||||||
|
/// @type Keyword
|
||||||
|
$header-color: inherit !default;
|
||||||
|
|
||||||
|
/// Global line height.
|
||||||
|
/// @type Number
|
||||||
|
$global-line-height: 1.3 !default;
|
||||||
|
|
||||||
|
/// Font size of body text.
|
||||||
|
/// @type Number
|
||||||
|
$global-font-size: 16px !default;
|
||||||
|
|
||||||
|
/// Line height of body text.
|
||||||
|
/// @type Number
|
||||||
|
$body-line-height: $global-line-height !default;
|
||||||
|
|
||||||
|
/// Font family of headings.
|
||||||
|
/// @type List
|
||||||
|
$header-font-family: $body-font-family !default;
|
||||||
|
|
||||||
|
/// Font family of headings.
|
||||||
|
/// @type List
|
||||||
|
$header-font-weight: $global-font-weight !default;
|
||||||
|
|
||||||
|
/// Font size of `<h1>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$h1-font-size: 34px !default;
|
||||||
|
|
||||||
|
/// Font size of `<h2>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$h2-font-size: 30px !default;
|
||||||
|
|
||||||
|
/// Font size of `<h3>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$h3-font-size: 28px !default;
|
||||||
|
|
||||||
|
/// Font size of `<h4>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$h4-font-size: 24px !default;
|
||||||
|
|
||||||
|
/// Font size of `<h5>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$h5-font-size: 20px !default;
|
||||||
|
|
||||||
|
/// Font size of `<h6>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$h6-font-size: 18px !default;
|
||||||
|
|
||||||
|
/// Margin bottom of `<h1>` through `<h6>` elements.
|
||||||
|
/// @type Number
|
||||||
|
$header-margin-bottom: 10px !default;
|
||||||
|
|
||||||
|
/// Margin bottom of paragraphs.
|
||||||
|
/// @type Number
|
||||||
|
$paragraph-margin-bottom: 10px !default;
|
||||||
|
|
||||||
|
/// Default font size for `<small>`.
|
||||||
|
/// @type Number
|
||||||
|
$small-font-size: 80% !default;
|
||||||
|
|
||||||
|
/// Color of `<small>` elements when placed inside headers.
|
||||||
|
/// @type Color
|
||||||
|
$small-font-color: $medium-gray !default;
|
||||||
|
|
||||||
|
/// Font size of lead paragraphs.
|
||||||
|
/// @type Number
|
||||||
|
$lead-font-size: $global-font-size * 1.25 !default;
|
||||||
|
|
||||||
|
/// Line height of lead paragraphs.
|
||||||
|
/// @type Number
|
||||||
|
$lead-line-height: 1.6 !default;
|
||||||
|
|
||||||
|
/// Padding inside paragraphs.
|
||||||
|
/// @type Number
|
||||||
|
$text-padding: 10px !default;
|
||||||
|
|
||||||
|
/// Default line height for subheaders.
|
||||||
|
/// @type Number
|
||||||
|
$subheader-lineheight: 1.4 !default;
|
||||||
|
|
||||||
|
/// Default font color for subheaders.
|
||||||
|
/// @type Color
|
||||||
|
$subheader-color: $dark-gray !default;
|
||||||
|
|
||||||
|
/// Default font weight for subheaders.
|
||||||
|
/// @type String
|
||||||
|
$subheader-font-weight: $global-font-weight !default;
|
||||||
|
|
||||||
|
/// Default top margin for subhheaders.
|
||||||
|
/// @type Number
|
||||||
|
$subheader-margin-top: 4px !default;
|
||||||
|
|
||||||
|
/// Default bottom margin for subheaders.
|
||||||
|
/// @type Number
|
||||||
|
$subheader-margin-bottom: 8px !default;
|
||||||
|
|
||||||
|
/// Maximum width of a divider.
|
||||||
|
/// @type Number
|
||||||
|
$hr-width: $global-width !default;
|
||||||
|
|
||||||
|
/// Default border for a divider.
|
||||||
|
/// @type List
|
||||||
|
$hr-border: 1px solid $black !default;
|
||||||
|
|
||||||
|
/// Default margin for a divider.
|
||||||
|
/// @type Number | List
|
||||||
|
$hr-margin: 20px auto !default;
|
||||||
|
|
||||||
|
/// Text decoration for anchors.
|
||||||
|
/// @type Keyword
|
||||||
|
$anchor-text-decoration: none !default;
|
||||||
|
|
||||||
|
/// Text color of anchors.
|
||||||
|
/// @type Color
|
||||||
|
$anchor-color: $primary-color !default;
|
||||||
|
|
||||||
|
/// Text color of anchors to visited links.
|
||||||
|
/// @type Color
|
||||||
|
$anchor-color-visited: $anchor-color !default;
|
||||||
|
|
||||||
|
/// Text color of anchors on hover.
|
||||||
|
/// @type Color
|
||||||
|
$anchor-color-hover: darken($primary-color, 10%) !default;
|
||||||
|
|
||||||
|
/// Text color of active anchors.
|
||||||
|
/// @type Color
|
||||||
|
$anchor-color-active: $anchor-color-hover !default;
|
||||||
|
|
||||||
|
/// Default font size for statistic numbers.
|
||||||
|
/// @type Number
|
||||||
|
$stat-font-size: 40px !default;
|
||||||
|
|
||||||
|
body,
|
||||||
|
table.body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
td,
|
||||||
|
th,
|
||||||
|
a {
|
||||||
|
color: $global-font-color;
|
||||||
|
font-family: $body-font-family;
|
||||||
|
font-weight: $global-font-weight;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
Margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
line-height: $global-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: $header-color;
|
||||||
|
word-wrap: normal;
|
||||||
|
font-family: $header-font-family;
|
||||||
|
font-weight: $header-font-weight;
|
||||||
|
margin-bottom: $header-margin-bottom;
|
||||||
|
Margin-bottom: $header-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: $h1-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: $h2-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: $h3-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: $h4-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: $h5-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: $h6-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
table.body,
|
||||||
|
p,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
font-size: $global-font-size;
|
||||||
|
line-height: $body-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
|
Margin-bottom: $paragraph-margin-bottom;
|
||||||
|
|
||||||
|
&.lead {
|
||||||
|
font-size: $lead-font-size;
|
||||||
|
line-height: $lead-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.subheader {
|
||||||
|
margin-top: $subheader-margin-top;
|
||||||
|
margin-bottom: $subheader-margin-bottom;
|
||||||
|
Margin-top: $subheader-margin-top;
|
||||||
|
Margin-bottom: $subheader-margin-bottom;
|
||||||
|
font-weight: $subheader-font-weight;
|
||||||
|
line-height: $subheader-lineheight;
|
||||||
|
color: $subheader-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: $small-font-size;
|
||||||
|
color: $small-font-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $anchor-color;
|
||||||
|
text-decoration: $anchor-text-decoration;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $anchor-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: $anchor-color-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: $anchor-color-visited;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a,
|
||||||
|
h1 a:visited,
|
||||||
|
h2 a,
|
||||||
|
h2 a:visited,
|
||||||
|
h3 a,
|
||||||
|
h3 a:visited,
|
||||||
|
h4 a,
|
||||||
|
h4 a:visited,
|
||||||
|
h5 a,
|
||||||
|
h5 a:visited,
|
||||||
|
h6 a,
|
||||||
|
h6 a:visited {
|
||||||
|
color: $anchor-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: $light-gray;
|
||||||
|
margin: 30px 0;
|
||||||
|
Margin: 30px 0;
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: $medium-gray;
|
||||||
|
|
||||||
|
span.callout {
|
||||||
|
color: $dark-gray;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.callout-strong {
|
||||||
|
color: $pre-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Horizontal rule
|
||||||
|
table.hr {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
th {
|
||||||
|
height: 0;
|
||||||
|
max-width: $hr-width;
|
||||||
|
border-top: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: $hr-border;
|
||||||
|
border-left: 0;
|
||||||
|
margin: $hr-margin;
|
||||||
|
Margin: $hr-margin;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use to style a large number to display a statistic
|
||||||
|
.stat {
|
||||||
|
font-size: $stat-font-size;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
p + & {
|
||||||
|
margin-top: -16px;
|
||||||
|
Margin-top: -16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// preheader styles
|
||||||
|
span.preheader {
|
||||||
|
display: none !important;
|
||||||
|
visibility: hidden;
|
||||||
|
mso-hide: all !important;
|
||||||
|
font-size: 1px;
|
||||||
|
color: $body-background; // needs to match background color of it's container
|
||||||
|
line-height: 1px;
|
||||||
|
max-height: 0px;
|
||||||
|
max-width: 0px;
|
||||||
|
opacity: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
66
vendor/assets/foundation-emails/scss/components/_visibility.scss
vendored
Normal file
66
vendor/assets/foundation-emails/scss/components/_visibility.scss
vendored
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group visibility
|
||||||
|
////
|
||||||
|
|
||||||
|
.hide-for-large {
|
||||||
|
display: none !important;
|
||||||
|
mso-hide: all; // hide selected elements in Outlook 2007-2013
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
font-size: 0;
|
||||||
|
width: 0;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
display: block !important;
|
||||||
|
width: auto !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
max-height: none !important;
|
||||||
|
font-size: inherit !important;
|
||||||
|
line-height: inherit !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body table.container .hide-for-large * {
|
||||||
|
mso-hide: all; // hide selected elements in Outlook 2007-2013
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body table.container .hide-for-large,
|
||||||
|
table.body table.container .row.hide-for-large {
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
display: table !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body table.container .callout-inner.hide-for-large {
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
display: table-cell !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.body table.container .show-for-large {
|
||||||
|
@media only screen and (max-width: #{$global-breakpoint}) {
|
||||||
|
display: none !important;
|
||||||
|
width: 0;
|
||||||
|
mso-hide: all; // hide selected elements in Outlook 2007-2013
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// [todo] add image resets
|
||||||
|
// img {
|
||||||
|
// max-height: 0;
|
||||||
|
// width: 0;
|
||||||
|
// }
|
||||||
|
// in media query
|
||||||
|
// img {
|
||||||
|
// max-height: none !important;
|
||||||
|
// width: auto !important;
|
||||||
|
// }
|
||||||
|
|
||||||
19
vendor/assets/foundation-emails/scss/foundation-emails.scss
vendored
Normal file
19
vendor/assets/foundation-emails/scss/foundation-emails.scss
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// foundation.zurb.com
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
@import
|
||||||
|
'util/util',
|
||||||
|
'global',
|
||||||
|
'components/normalize',
|
||||||
|
'grid/grid',
|
||||||
|
'grid/block-grid',
|
||||||
|
'components/alignment',
|
||||||
|
'components/visibility',
|
||||||
|
'components/typography',
|
||||||
|
'components/button',
|
||||||
|
'components/callout',
|
||||||
|
'components/thumbnail',
|
||||||
|
'components/menu',
|
||||||
|
'components/outlook-first',
|
||||||
|
'components/media-query';
|
||||||
32
vendor/assets/foundation-emails/scss/grid/_block-grid.scss
vendored
Executable file
32
vendor/assets/foundation-emails/scss/grid/_block-grid.scss
vendored
Executable file
@ -0,0 +1,32 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group block-grid
|
||||||
|
////
|
||||||
|
|
||||||
|
/// The highest number of `.x-up` classes available when using the block grid CSS.
|
||||||
|
/// @type Number
|
||||||
|
$block-grid-max: 8 !default;
|
||||||
|
|
||||||
|
/// Gutter between elements in a block grid.
|
||||||
|
/// @type Number
|
||||||
|
$block-grid-gutter: $global-gutter !default;
|
||||||
|
|
||||||
|
.block-grid {
|
||||||
|
width: 100%;
|
||||||
|
max-width: $global-width;
|
||||||
|
|
||||||
|
td {
|
||||||
|
display: inline-block;
|
||||||
|
padding: $block-grid-gutter / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sizing classes
|
||||||
|
@for $i from 2 through $block-grid-max {
|
||||||
|
.up-#{$i} td {
|
||||||
|
width: floor(($global-width - $i * $block-grid-gutter) / $i) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
172
vendor/assets/foundation-emails/scss/grid/_grid.scss
vendored
Executable file
172
vendor/assets/foundation-emails/scss/grid/_grid.scss
vendored
Executable file
@ -0,0 +1,172 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// zurb.com/ink/
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
////
|
||||||
|
/// @group grid
|
||||||
|
////
|
||||||
|
|
||||||
|
/// Default number of columns for an email.
|
||||||
|
/// @type Number
|
||||||
|
$grid-column-count: 12 !default;
|
||||||
|
|
||||||
|
/// Default padding for the bottom of a column.
|
||||||
|
/// @type Number
|
||||||
|
$column-padding-bottom: $global-padding !default;
|
||||||
|
|
||||||
|
/// Default border radius for the container. Use a px value
|
||||||
|
/// @type Number
|
||||||
|
$container-radius: 0 !default;
|
||||||
|
|
||||||
|
//For viewing email in browser
|
||||||
|
@media only screen {
|
||||||
|
html {
|
||||||
|
min-height: 100%;
|
||||||
|
background: $body-background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
&.body {
|
||||||
|
background: $body-background;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.container {
|
||||||
|
background: $container-background;
|
||||||
|
width: $global-width;
|
||||||
|
margin: 0 auto;
|
||||||
|
Margin: 0 auto;
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.row {
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.spacer {
|
||||||
|
width: 100%;
|
||||||
|
td {
|
||||||
|
mso-line-height-rule: exactly;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.container table.row {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.columns,
|
||||||
|
td.column,
|
||||||
|
th.columns,
|
||||||
|
th.column {
|
||||||
|
margin: 0 auto;
|
||||||
|
Margin: 0 auto;
|
||||||
|
padding-left: $global-gutter;
|
||||||
|
padding-bottom: $column-padding-bottom;
|
||||||
|
|
||||||
|
// Prevents Nested columns from double the padding
|
||||||
|
.column,
|
||||||
|
.columns {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
|
||||||
|
center {
|
||||||
|
min-width: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td.columns.last,
|
||||||
|
td.column.last,
|
||||||
|
th.columns.last,
|
||||||
|
th.column.last {
|
||||||
|
padding-right: $global-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
//makes sure nested tables are 100% width
|
||||||
|
td.columns,
|
||||||
|
td.column,
|
||||||
|
th.columns,
|
||||||
|
th.column {
|
||||||
|
table:not(.button) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $grid-column-count {
|
||||||
|
td.large-#{$i},
|
||||||
|
th.large-#{$i} {
|
||||||
|
width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
|
||||||
|
padding-left: $global-gutter / 2;
|
||||||
|
padding-right: $global-gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.large-#{$i}.first,
|
||||||
|
th.large-#{$i}.first {
|
||||||
|
padding-left: $global-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.large-#{$i}.last,
|
||||||
|
th.large-#{$i}.last {
|
||||||
|
padding-right: $global-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Collapsed logic
|
||||||
|
.collapse {
|
||||||
|
> tbody > tr > td.large-#{$i},
|
||||||
|
> tbody > tr > th.large-#{$i} {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Gotta give it that extra love for the first and last columns.
|
||||||
|
td.large-#{$i}.first,
|
||||||
|
th.large-#{$i}.first,
|
||||||
|
td.large-#{$i}.last,
|
||||||
|
th.large-#{$i}.last {
|
||||||
|
width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td.large-#{$i} center,
|
||||||
|
th.large-#{$i} center {
|
||||||
|
min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body .columns td.large-#{$i},
|
||||||
|
.body .column td.large-#{$i},
|
||||||
|
.body .columns th.large-#{$i},
|
||||||
|
.body .column th.large-#{$i} {
|
||||||
|
width: -zf-grid-calc-pct($i, $grid-column-count);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through ($grid-column-count - 1) {
|
||||||
|
td.large-offset-#{$i},
|
||||||
|
td.large-offset-#{$i}.first,
|
||||||
|
td.large-offset-#{$i}.last,
|
||||||
|
th.large-offset-#{$i},
|
||||||
|
th.large-offset-#{$i}.first,
|
||||||
|
th.large-offset-#{$i}.last {
|
||||||
|
//1.5 takes in effect a whole empty cell.
|
||||||
|
padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td.expander,
|
||||||
|
th.expander {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// adds radius to container
|
||||||
|
table.container.radius {
|
||||||
|
border-radius: $container-radius;
|
||||||
|
border-collapse: separate;
|
||||||
|
}
|
||||||
@ -1,5 +1,3 @@
|
|||||||
@import "foundation-emails";
|
|
||||||
|
|
||||||
// Foundation for Emails Settings
|
// Foundation for Emails Settings
|
||||||
// ------------------------------
|
// ------------------------------
|
||||||
//
|
//
|
||||||
@ -29,7 +27,7 @@ $dark-gray: #8a8a8a;
|
|||||||
$black: #0a0a0a;
|
$black: #0a0a0a;
|
||||||
$white: #fefefe;
|
$white: #fefefe;
|
||||||
$pre-color: #ff6908;
|
$pre-color: #ff6908;
|
||||||
$global-width: 600px !default;
|
$global-width: 580px;
|
||||||
$global-width-small: 95%;
|
$global-width-small: 95%;
|
||||||
$global-gutter: 16px;
|
$global-gutter: 16px;
|
||||||
$body-background: $light-gray;
|
$body-background: $light-gray;
|
||||||
@ -147,22 +145,3 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
|||||||
$thumbnail-transition: box-shadow 200ms ease-out;
|
$thumbnail-transition: box-shadow 200ms ease-out;
|
||||||
$thumbnail-radius: $global-radius;
|
$thumbnail-radius: $global-radius;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.pd-logo {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-container {
|
|
||||||
max-width:600px;
|
|
||||||
background-color:green;
|
|
||||||
.email-title {
|
|
||||||
font-family: 'HalisR', Helvetica Neue, Helvetica, Ariel, sans-serif !important;
|
|
||||||
.prft-slash {
|
|
||||||
font-size: 100px;
|
|
||||||
font-weight: 100;
|
|
||||||
color: #EF0734;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
22
vendor/assets/foundation-emails/scss/util/_util.scss
vendored
Executable file
22
vendor/assets/foundation-emails/scss/util/_util.scss
vendored
Executable file
@ -0,0 +1,22 @@
|
|||||||
|
// Foundation for Emails by ZURB
|
||||||
|
// foundation.zurb.com
|
||||||
|
// Licensed under MIT Open Source
|
||||||
|
|
||||||
|
/// Calculates a percentage value for a grid column width.
|
||||||
|
/// @access private
|
||||||
|
/// @param {number} $colNumber - Column count of the column.
|
||||||
|
/// @param {number} $totalColumns - Column count of the entire row.
|
||||||
|
/// @returns {number} A percentage width value.
|
||||||
|
@function -zf-grid-calc-pct($colNumber, $totalColumns) {
|
||||||
|
@return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Calculates a pixel value for a grid column width.
|
||||||
|
/// @access private
|
||||||
|
/// @param {number} $columnNumber - Column count of the column.
|
||||||
|
/// @param {number} $totalColumns - Column count of the entire row.
|
||||||
|
/// @param {number} $containerWidth - Width of the surrounding container, in pixels.
|
||||||
|
/// @returns {number} A pixel width value.
|
||||||
|
@function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
|
||||||
|
@return ($containerWidth / $totalColumns * $columnNumber - $global-gutter);
|
||||||
|
}
|
||||||
91
vendor/assets/foundation-emails/templates/basic.html
vendored
Normal file
91
vendor/assets/foundation-emails/templates/basic.html
vendored
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
.header {
|
||||||
|
background: #8a8a8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .columns {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .wrapper-inner {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .container {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.facebook table td {
|
||||||
|
background: #3B5998 !important;
|
||||||
|
border-color: #3B5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.twitter table td {
|
||||||
|
background: #1daced !important;
|
||||||
|
border-color: #1daced;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.google table td {
|
||||||
|
background: #DB4A39 !important;
|
||||||
|
border-color: #DB4A39;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper.secondary {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<wrapper class="header">
|
||||||
|
<container>
|
||||||
|
<row class="collapse">
|
||||||
|
<columns small="6">
|
||||||
|
<img src="http://placehold.it/200x50/663399">
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<p class="text-right">BASIC</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
</wrapper>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns small="12">
|
||||||
|
|
||||||
|
<h1>Hi, Susan Calvin</h1>
|
||||||
|
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
|
||||||
|
<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>
|
||||||
|
<callout class="primary">
|
||||||
|
<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>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<wrapper class="secondary">
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns large="6">
|
||||||
|
<h5>Connect With Us:</h5>
|
||||||
|
<button class="facebook expand" href="http://zurb.com">Facebook</button>
|
||||||
|
<button class="twitter expand" href="http://zurb.com">Twitter</button>
|
||||||
|
<button class="google expand" href="http://zurb.com">Google+</button>
|
||||||
|
</columns>
|
||||||
|
<columns large="6">
|
||||||
|
<h5>Contact Info:</h5>
|
||||||
|
<p>Phone: 408-341-0600</p>
|
||||||
|
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</wrapper>
|
||||||
|
</container>
|
||||||
71
vendor/assets/foundation-emails/templates/drip.html
vendored
Normal file
71
vendor/assets/foundation-emails/templates/drip.html
vendored
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.header {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-drip {
|
||||||
|
border-top: 8px solid #663399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<container class="header">
|
||||||
|
<row class="collapse">
|
||||||
|
<columns>
|
||||||
|
<img src="http://placehold.it/150x30/663399" alt="">
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
|
||||||
|
<container class="body-drip">
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/120/663399" alt="">
|
||||||
|
</center>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h4 class="text-center">Responsive Emails</h4>
|
||||||
|
<p class="text-center">15 sections | 567 Min</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<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>
|
||||||
|
<center>
|
||||||
|
<button href="#" class="success">Get smarter now ↣</button>
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row class="collapsed footer">
|
||||||
|
<columns>
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
<p class="text-center">@copywrite nobody<br/>
|
||||||
|
<a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
</container>
|
||||||
103
vendor/assets/foundation-emails/templates/hero.html
vendored
Normal file
103
vendor/assets/foundation-emails/templates/hero.html
vendored
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
.header {
|
||||||
|
background: #8a8a8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .columns {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .wrapper-inner {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .container {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.facebook table td {
|
||||||
|
background: #3B5998 !important;
|
||||||
|
border-color: #3B5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.twitter table td {
|
||||||
|
background: #1daced !important;
|
||||||
|
border-color: #1daced;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.google table td {
|
||||||
|
background: #DB4A39 !important;
|
||||||
|
border-color: #DB4A39;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper.secondary {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<wrapper class="header">
|
||||||
|
<container>
|
||||||
|
<row class="collapse">
|
||||||
|
<columns small="6">
|
||||||
|
<img src="http://placehold.it/200x50/663399">
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<p class="text-right">HERO</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
</wrapper>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns small="12">
|
||||||
|
<h1>Hi, Elijah Baily</h1>
|
||||||
|
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
|
||||||
|
<img src="http://placehold.it/580x300" alt="">
|
||||||
|
<callout class="primary">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
|
||||||
|
</callout>
|
||||||
|
<h2>Title Ipsum <small>This is a note.</small></h2>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<button class="large secondary" href="#">Click Me!</button>
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<wrapper class="secondary">
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns large="6">
|
||||||
|
<h5>Connect With Us:</h5>
|
||||||
|
<button class="facebook expand" href="#">Facebook</button>
|
||||||
|
<button class="twitter expand" href="#">Twitter</button>
|
||||||
|
<button class="google expand" href="#">Google+</button>
|
||||||
|
</columns>
|
||||||
|
<columns large="6">
|
||||||
|
<h5>Contact Info:</h5>
|
||||||
|
<p>Phone: 408-341-0600</p>
|
||||||
|
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</wrapper>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item href="#">Terms</item>
|
||||||
|
<item href="#">Privacy</item>
|
||||||
|
<item href="#">Unsubscribe</item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
</container>
|
||||||
86
vendor/assets/foundation-emails/templates/marketing.html
vendored
Normal file
86
vendor/assets/foundation-emails/templates/marketing.html
vendored
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<container>
|
||||||
|
<row>
|
||||||
|
<columns large="4">
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/125x200">
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
<columns large="8">
|
||||||
|
<h1>Do Something Radical With This App.</h1>
|
||||||
|
<button class="large" href="#">Sign Up</button>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h3 class="text-center">It's Never Been Easier to Do Things.</h3>
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns large="4">
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/50x50">
|
||||||
|
</center>
|
||||||
|
<h5 class="text-center">Feature One</h5>
|
||||||
|
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
|
||||||
|
</columns>
|
||||||
|
<columns large="4">
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/50x50">
|
||||||
|
</center>
|
||||||
|
<h5 class="text-center">Feature Two</h5>
|
||||||
|
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
|
||||||
|
</columns>
|
||||||
|
<columns large="4">
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/50x50">
|
||||||
|
</center>
|
||||||
|
<h5 class="text-center">Feature Three</h5>
|
||||||
|
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<button class="large expand" href="#">Sign Up</button>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<row class="collapsed footer">
|
||||||
|
<columns>
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
<p class="text-center">@copywrite nobody<br/>
|
||||||
|
<a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item><img src="http://placehold.it/25" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25" alt=""></item>
|
||||||
|
<item><img src="http://placehold.it/25" alt=""></item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
</container>
|
||||||
49
vendor/assets/foundation-emails/templates/newsletter-2.html
vendored
Normal file
49
vendor/assets/foundation-emails/templates/newsletter-2.html
vendored
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/548x200">
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns large="8">
|
||||||
|
<h2>This is a title</h2>
|
||||||
|
<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>
|
||||||
|
<p><a href="#">Learn more</a></p>
|
||||||
|
</columns>
|
||||||
|
<columns large="4">
|
||||||
|
<img class="small-float-center" src="http://placehold.it/170x129" alt="">
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns large="6">
|
||||||
|
<h4>Sub Section Title</h4>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
<columns large="6">
|
||||||
|
<h4>Sub Section Title</h4>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<p>You received this email because you're signed up to receive updates from us. <a href="#">Click here to unsubscribe.</a></p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
48
vendor/assets/foundation-emails/templates/newsletter.html
vendored
Normal file
48
vendor/assets/foundation-emails/templates/newsletter.html
vendored
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h1 class="text-center">The Insider</h1>
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/500x200">
|
||||||
|
</center>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa itaque illo doloribus soluta expedita dolores commodi fuga odit.</p>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns large="6">
|
||||||
|
<h4>More Reading:</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
|
||||||
|
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
|
||||||
|
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
|
||||||
|
</ul>
|
||||||
|
</columns>
|
||||||
|
<columns>
|
||||||
|
<h4>Get Involved:</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Facebook</a></li>
|
||||||
|
<li><a href="#">Twitter</a></li>
|
||||||
|
<li><a href="#">Instagram</a></li>
|
||||||
|
</ul>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
86
vendor/assets/foundation-emails/templates/order.html
vendored
Normal file
86
vendor/assets/foundation-emails/templates/order.html
vendored
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h1>Thanks for your order.</h1>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<callout class="secondary">
|
||||||
|
<row>
|
||||||
|
<columns large="6">
|
||||||
|
<p>
|
||||||
|
<strong>Payment Method</strong><br/>
|
||||||
|
Dubloons
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Email Address</strong><br/>
|
||||||
|
thecapn@pirates.org
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Order ID</strong><br/>
|
||||||
|
239235983749636
|
||||||
|
</p>
|
||||||
|
</columns>
|
||||||
|
<columns large="6">
|
||||||
|
<p>
|
||||||
|
<strong>Shipping Method</strong><br/>
|
||||||
|
Boat (1–2 weeks)<br/>
|
||||||
|
<strong>Shipping Address</strong><br/>
|
||||||
|
Captain Price<br/>
|
||||||
|
123 Maple Rd<br/>
|
||||||
|
Campbell, CA 95112
|
||||||
|
</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</callout>
|
||||||
|
|
||||||
|
<h4>Order Details</h4>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr><th>Item</th><th>#</th><th>Price</th></tr>
|
||||||
|
<tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
|
||||||
|
<tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
|
||||||
|
<tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2"><b>Subtotal:</b></td>
|
||||||
|
<td>$600</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<h4>What's Next?</h4>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row class="footer text-center">
|
||||||
|
<columns large="3">
|
||||||
|
<img src="http://placehold.it/170x30" alt="">
|
||||||
|
</columns>
|
||||||
|
<columns large="3">
|
||||||
|
<p>
|
||||||
|
Call us at 800.555.1923<br/>
|
||||||
|
Email us at support@discount.boat
|
||||||
|
</p>
|
||||||
|
</columns>
|
||||||
|
<columns large="3">
|
||||||
|
<p>
|
||||||
|
123 Maple Rd<br/>
|
||||||
|
Campbell, CA 95112
|
||||||
|
</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
48
vendor/assets/foundation-emails/templates/password.html
vendored
Normal file
48
vendor/assets/foundation-emails/templates/password.html
vendored
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<row class="header">
|
||||||
|
<columns>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<h4 class="text-center">Pirate Retirement Services</h4>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
|
||||||
|
<spacer size="32"></spacer>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/250x250">
|
||||||
|
</center>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<h1 class="text-center">Forgot Your Password?</h1>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<p class="text-center">It happens. Click the link below to reset your password.</p>
|
||||||
|
<button class="large expand" href="#">Reset Password</button>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
</container>
|
||||||
124
vendor/assets/foundation-emails/templates/sidebar-hero.html
vendored
Normal file
124
vendor/assets/foundation-emails/templates/sidebar-hero.html
vendored
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
.header {
|
||||||
|
background: #8a8a8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .columns {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .wrapper-inner {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .container {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.facebook table td {
|
||||||
|
background: #3B5998 !important;
|
||||||
|
border-color: #3B5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.twitter table td {
|
||||||
|
background: #1daced !important;
|
||||||
|
border-color: #1daced;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.google table td {
|
||||||
|
background: #DB4A39 !important;
|
||||||
|
border-color: #DB4A39;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper.secondary {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .menu .menu-item {
|
||||||
|
border-top: 1px solid #777777;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<wrapper class="header">
|
||||||
|
<container>
|
||||||
|
<row class="collapse">
|
||||||
|
<columns small="6">
|
||||||
|
<img src="http://placehold.it/200x50/663399">
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<p class="text-right">SIDEBAR HERO</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
</wrapper>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h1>Hi, Elijah Baily</h1>
|
||||||
|
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/570x300" alt="">
|
||||||
|
</center>
|
||||||
|
<callout class="primary">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns large="7">
|
||||||
|
<h3>Hello, Han Fastolfe</h3>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<callout class="secondary">
|
||||||
|
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>
|
||||||
|
</callout>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<button class="expand" href="#">Click Me!</button>
|
||||||
|
</columns>
|
||||||
|
<columns large="5" class="sidebar">
|
||||||
|
<callout class="secondary">
|
||||||
|
<h5>Header</h5>
|
||||||
|
<p class="lead">Sub-header</p>
|
||||||
|
<menu class="vertical">
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
</menu>
|
||||||
|
</callout>
|
||||||
|
<callout class="secondary">
|
||||||
|
<h6>CONNECT WITH US:</h6>
|
||||||
|
<button class="facebook expand" href="#">Facebook</button>
|
||||||
|
<button class="twitter expand" href="#">Twitter</button>
|
||||||
|
<button class="google expand" href="#">Google+</button>
|
||||||
|
<p>CONTACT INFO:</p>
|
||||||
|
<p>Phone: 408-341-0600</p>
|
||||||
|
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item href="#">Terms</item>
|
||||||
|
<item href="#">Privacy</item>
|
||||||
|
<item href="#">Unsubscribe</item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
</container>
|
||||||
114
vendor/assets/foundation-emails/templates/sidebar.html
vendored
Normal file
114
vendor/assets/foundation-emails/templates/sidebar.html
vendored
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
.header {
|
||||||
|
background: #8a8a8a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .columns {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .wrapper-inner {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .container {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.facebook table td {
|
||||||
|
background: #3B5998 !important;
|
||||||
|
border-color: #3B5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.twitter table td {
|
||||||
|
background: #1daced !important;
|
||||||
|
border-color: #1daced;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.button.google table td {
|
||||||
|
background: #DB4A39 !important;
|
||||||
|
border-color: #DB4A39;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper.secondary {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .menu .menu-item {
|
||||||
|
border-top: 1px solid #777777;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<wrapper class="header">
|
||||||
|
<container>
|
||||||
|
<row class="collapse">
|
||||||
|
<columns small="6">
|
||||||
|
<img src="http://placehold.it/200x50/663399">
|
||||||
|
</columns>
|
||||||
|
<columns small="6">
|
||||||
|
<p class="text-right">SIDEBAR</p>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
</wrapper>
|
||||||
|
|
||||||
|
<container>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<row>
|
||||||
|
<columns large="7">
|
||||||
|
<h2>Hello, Han Fastolfe</h2>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<callout class="secondary">
|
||||||
|
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>
|
||||||
|
</callout>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<button class="expand" href="#">Click Me!</button>
|
||||||
|
</columns>
|
||||||
|
<columns large="5" class="sidebar">
|
||||||
|
<callout class="secondary">
|
||||||
|
<h5>Header</h5>
|
||||||
|
<p class="lead">Sub-header</p>
|
||||||
|
<menu class="vertical">
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
<item href="#">Just a Plain Link »</item>
|
||||||
|
</menu>
|
||||||
|
</callout>
|
||||||
|
<callout class="secondary">
|
||||||
|
<h6>CONNECT WITH US:</h6>
|
||||||
|
<button class="facebook expand" href="#">Facebook</button>
|
||||||
|
<button class="twitter expand" href="#">Twitter</button>
|
||||||
|
<button class="google expand" href="#">Google+</button>
|
||||||
|
<p>CONTACT INFO:</p>
|
||||||
|
<p>Phone: 408-341-0600</p>
|
||||||
|
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||||
|
</callout>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item href="#">Terms</item>
|
||||||
|
<item href="#">Privacy</item>
|
||||||
|
<item href="#">Unsubscribe</item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
63
vendor/assets/foundation-emails/templates/welcome.html
vendored
Normal file
63
vendor/assets/foundation-emails/templates/welcome.html
vendored
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<style type="text/css">
|
||||||
|
body,
|
||||||
|
html,
|
||||||
|
.body {
|
||||||
|
background: #f3f3f3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.header {
|
||||||
|
background: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-border {
|
||||||
|
border-top: 8px solid #663399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<container class="header">
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
<h1 class="text-center">Welcome to Kraken Academy</h1>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<menu class="text-center">
|
||||||
|
<item href="#">About</item>
|
||||||
|
<item href="#">Course List</item>
|
||||||
|
<item href="#">Campus Map</item>
|
||||||
|
<item href="#">Contact</item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
</container>
|
||||||
|
|
||||||
|
<container class="body-border">
|
||||||
|
<row>
|
||||||
|
<columns>
|
||||||
|
|
||||||
|
<spacer size="32"></spacer>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<img src="http://placehold.it/200x200">
|
||||||
|
</center>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
|
||||||
|
<h4>An exciting future of terrorizing sailors awaits you at Kraken Academy.</h4>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<menu>
|
||||||
|
<item href="#">krakenacademy.com</item>
|
||||||
|
<item href="#">Facebook</item>
|
||||||
|
<item href="#">Twitter</item>
|
||||||
|
<item href="#">(408)-555-0123</item>
|
||||||
|
</menu>
|
||||||
|
</center>
|
||||||
|
|
||||||
|
</columns>
|
||||||
|
</row>
|
||||||
|
|
||||||
|
<spacer size="16"></spacer>
|
||||||
|
</container>
|
||||||
Loading…
Reference in New Issue
Block a user