},
zipTemplates: {
command: [
- 'cd build/downloads/templates',
+ 'cd build/downloads/templates/base',
+ 'cp * ../',
+ 'cd ../',
+ 'rm -rf base',
'zip all-templates.zip *.html',
'for i in *.html; do zip "${i%}.zip" "$i"; done',
'cd ../../../'
<h1 id="start" data-magellan-destination="start" class="light">Getting Started</h1>
-
<p class="lead">Dive into creating your responsive email.</p>
- <hr>
- <h2 class="light">The Boilerplate</h2>
-
Starting a new Ink project is fairly straightforward. If you aren't using one of our <a href="templates.php">templates</a>, grab the boilerplate code from below to use as a starting point. While you can reference <code>ink.css</code> using a link tag for testing purposes, be sure to remove the <kbd><link rel="stylesheet" href="ink.css" /></kbd> statement and paste your CSS into the style tag in the head before running your email through an inliner.
- </p>
- <h6>Boilerplate.html</h6>
- <?php code_example(
+<p class="lead">Dive into creating your responsive email.</p>
+<hr>
+<h2 class="light">The Boilerplate</h2>
+<p>
+ Starting a new Ink project is fairly straightforward. If you aren't using one of our <a href="templates.php">templates</a>, grab the boilerplate code from below to use as a starting point. While you can reference <code>ink.css</code> using a link tag for testing purposes, be sure to remove the <kbd><link rel="stylesheet" href="ink.css" /></kbd> statement and paste your CSS into the style tag in the head before running your email through an inliner.
+</p>
+<h6>Boilerplate.html</h6>
+<?php code_example(
'<!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>
</table>
</body>
</html>'
- , 'html'); ?>
- <br>
- If you're applying a background color to your entire email, be sure to attach it to the table with a class of <code>body</code> as well as to the actual <kbd><body></kbd> tag, since some clients remove this by default.
- </p>
- <h6>Inline Styles</h6>
- <?php code_example(
+, 'html'); ?>
+<br>
+<p>
+ If you're applying a background color to your entire email, be sure to attach it to the table with a class of <code>body</code> as well as to the actual <kbd><body></kbd> tag, since some clients remove this by default.
+</p>
+<h6>Inline Styles</h6>
+<?php code_example(
'<html>
...
</table>
</body>'
- , 'html'); ?>
- <br>
- <h6>CSS</h6>
- <?php code_example(
+, 'html'); ?>
+<br>
+<h6>CSS</h6>
+<?php code_example(
'body, .body {
background: #ddd;
}'
- , 'css'); ?>
- <br>
\ No newline at end of file
+, 'css'); ?>
+<br>
\ No newline at end of file
<h1 id="grid" data-magellan-destination="grid" class="light">Grid</h1>
<p class="lead">Create powerful multi-device layouts quickly and easily.</p>
-
<hr>
<h2 class="light">Structure</h2>
<p>Ink uses a 12-column grid with a 580px wrapper. On mobile devices (under 580px wide), columns become full width and stack vertically.</p>
<table class="eight columns">
<tr>
- <td class="eight sub-columns" style="background:green;">
+ <td class="eight sub-columns">
.eight.sub-columns
</td>
- <td class="four sub-columns last" style="background:purple;">
+ <td class="four sub-columns last">
.four.sub-columns
<table class="four columns">
<tr>
- <td style="background:pink;">
+ <td>
.four columns
#if-basicGrid {height: 200px;}
#if-evenColumns {height: 260px;}
#if-subGrid {height: 140px;}
+ #if-blockGrid {height: 540px;}
#if-centerClass {height: 220px;}
#if-visibilityClasses {height: 110px;}
#if-panels {height: 420px;}
#if-basicGrid {height: 225px;}
#if-evenColumns {height: 570px;}
#if-subGrid {height: 210px;}
+ #if-blockGrid {height: 1000px;}
#if-centerClass {height: 270px;}
#if-visibilityClasses {height: 110px;}
#if-panels {height: 400px;}
<li><a href="#start">Getting Started</a></li>
<li><a href="#grid">Grid</a></li>
<li><a href="#sub-grid">Sub-Grid</a></li>
+ <li><a href="#block-grid">Block-Grid</a></li>
<li><a href="#visibility-classes">Visibility Classes</a></li>
<li><a href="#panels">Panels</a></li>
<li><a href="#buttons">Buttons</a></li>
<hr class="section">
<?php require 'components/sub-grid.php' ?>
+
+ <hr class="section">
+
+ <?php require 'components/block-grid.php' ?>
<hr class="section">
<tr>
<td>
-
<a class="tiny-button" href="#">
- <tr>
- <td>
- .tiny-button
- </td>
- </tr>
- </table>
- </a>
+ <a class="tiny-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .tiny-button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
- <a class="primary button" href="#">
- <tr>
- <td>
- .primary.button
- </td>
- </tr>
- </table>
- </a>
+ <a class="radius button" href="#">
+ <table>
+ <tr>
+ <td>
+ .radius.button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
- <a class="radius button" href="#">
- <tr>
- <td>
- .radius.button
- </td>
- </tr>
- </table>
- </a>
+ <a class="primary button" href="#">
+ <table>
+ <tr>
+ <td>
+ .primary.button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
-
<a class="small-button" href="#">
- <tr>
- <td>
- .small-button
- </td>
- </tr>
- </table>
- </a>
+ <a class="small-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .small-button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
- <a class="secondary button" href="#">
- <tr>
- <td>
- .secondary.button
- </td>
- </tr>
- </table>
- </a>
+ <a class="round button" href="#">
+ <table>
+ <tr>
+ <td>
+ .round.button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
- <a class="round button" href="#">
- <tr>
- <td>
- .round.button
- </td>
- </tr>
- </table>
- </a>
+ <a class="secondary button" href="#">
+ <table>
+ <tr>
+ <td>
+ .secondary.button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
-
<a class="medium-button" href="#">
- <tr>
- <td>
- .medium-button
- </td>
- </tr>
- </table>
- </a>
+ <a class="medium-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .medium-button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
-
<a class="alert button" href="#">
- <tr>
- <td>
- .alert.button
- </td>
- </tr>
- </table>
- </a>
+ <a class="alert button" href="#">
+ <table>
+ <tr>
+ <td>
+ .alert.button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
-
<a class="large-button" href="#">
- <tr>
- <td>
- .large-button
- </td>
- </tr>
- </table>
- </a>
+ <a class="large-button" href="#">
+ <table>
+ <tr>
+ <td>
+ .large-button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
<tr>
<td>
-
<a class="success button" href="#">
- <tr>
- <td>
- .success.button
- </td>
- </tr>
- </table>
- </a>
+ <a class="success button" href="#">
+ <table>
+ <tr>
+ <td>
+ .success.button
+ </td>
+ </tr>
+ </table>
+ </a>
</td>
<td class="expander"></td>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
