<center>
<container>
<row>
- <column class="green" large='2'>
- <p class="red">I'm even</p>
+ <column class="teal" large='2'>
+ <p class="grey">I'm a p tag in a col</p>
+ <button>I"M A BUTTON</button>
+ <panel>panel</panel>
+ </column>
+ <column class="blue" large='10'>
+ <p>I'm even</p>
+ <button>ANOTHER BOTON</button>
+ <panel class="grey">
+ <a href='#'>asdlfkjadsf</a></panel>
+ </column>
+ </row>
+ <row>
+ <column class="teal" large='6'>
+ <p class="grey">I'm even</p>
<button>Lsdlkfjsdf</button>
<panel>asdlfkjadsf</panel>
</column>
- <column class="blue" large='10'>
+ <column class="blue" large='6'>
<p>I'm even</p>
<button>Lsdlkfjsdf</button>
<panel>asdlfkjadsf</panel>
</column>
</row>
+ <row>
+ <column class="teal" large='12'>
+ <h1>I'm a header!</h1>
+ </column>
+ </row>
</container>
</center>
</td>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="css/ink.css">
+ <script type="text/javascript" src="js/jquery.js"></script>
+ <script type="text/javascript" src="js/inky-prime.js"></script>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width"/>
+</head>
+
+<body>
+ <table class="body">
+ <tr>
+ <td class="center" align="center" valign="top">
+ <center>
+ <container>
+ <row class="header">
+
+ <column large='12'>
+ <img src="http://placehold.it/800x50">
+ <h1>SIDEBAR</h1>
+ <img src="http://placehold.it/800x50">
+ </column>
+
+ </row>
+ </container>
+ <container>
+ <row>
+ <column large='8' small='12'>
+ <h2>Hello,<br> Han Fastolfe</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
+ <panel>
+ <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! ยป</a></p>
+ </panel>
+ </column>
+ <column large='4' small='12'>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
+ <button>
+ <a href='#'>Click Me!</a>
+ </button>
+ </column>
+ </row>
+ <row>
+ <column large='6'>
+ <panel>
+ <h6>Header Thing</h6>
+ <p>Subhead</p>
+ <a href='#'>Link</a><br />
+ <a href='#'>Link</a><br />
+ <a href='#'>Link</a><br />
+ <a href='#'>Link</a><br />
+ <a href='#'>Link</a><br />
+ </panel>
+ </column>
+ <column large='6' small='12'>
+ <panel>
+ <h6>Connect With Us</h6>
+ <table class="tiny-button facebook">
+ <tr>
+ <td>
+ <a href="#">Facebook</a>
+ </td>
+ </tr>
+ </table>
+
+ <hr>
+
+ <table class="tiny-button twitter">
+ <tr>
+ <td>
+ <a href="#">Twitter</a>
+ </td>
+ </tr>
+ </table>
+
+ <hr>
+
+ <table class="tiny-button google-plus">
+ <tr>
+ <td>
+ <a href="#">Google +</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <h6 style="margin-bottom:5px;">Contact Info:</h6>
+ <p>Phone: <b>408.341.0600</b></p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </panel>
+ </column>
+ </row>
+ </container>
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
\ No newline at end of file
var colHTML = '';
$.each(elements, function(i, el) {
- // get included tags
- var contents = $(el)[0].outerHTML;
+ // get included tags of each element in the column
+ var element = $(el)[0].outerHTML;
var colClass = 'columns ';
+ var content = '';
// transclude any class that might have been added onto element
if ($(el).attr('class')) {
colClass += $(el).attr('class');
};
-
+ content = insertComponents(element);
+ console.log(content);
// construct column class for each element
colHTML += '<table class="' + colClass + ' ' + colSize+'">'
- +'<tr><td>'
- + contents +'</td><td class="expander"></td></tr></table>';
+ +'<tr>'
+ + content +'<td class="expander"></td></tr></table>';
});
return colHTML;
--- /dev/null
+var insertComponents = function(content) {
+ var output = '';
+ var component = $.parseHTML(content);
+ var tag = $(component).prop('tagName');
+ var componentClass = '';
+
+ if ($(component).attr('class')) {
+ componentClass = $(component).attr('class');
+ };
+
+ if (tag === "PANEL") {
+ output += '<td class="panel ' + componentClass +'">' + component[0].innerHTML + '</td>';
+ }
+ else if (tag === "BUTTON") {
+ output += '<td><table class="button ' + componentClass +'"><tr><td>' + component[0].innerHTML + '</td></tr></table></td>'
+ }
+ else {
+ output += '<td>' + content + '</td>';
+ }
+
+ return output;
+};
\ No newline at end of file
"ink/components/outlook-first",
"ink/components/media-query";
+ .container {
+ background-color: white;
+
+ }
+
body{
background: #00558B;
font-family: Helvetica;
}
- .green {
- background-color: green;
+ .teal {
+ background-color: #29ABA4;
}
- .red {
- background-color: red;
+ .grey {
+ background-color: lightslategrey;
}
.blue {
- background-color: aqua;
+ background-color: #0071BC;
}
projects / thirdparty / foundation / foundation-emails.git / commitdiff
