+<!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"/>
+ <meta name="viewport" content="width=device-width"/>
</head>
<body>
- <div class="container">
- <h1>Hello there!</h1>
- <p>This is an email.</p>
- </div>
<table class="body">
<tr>
- <container>
- <row>
- <column class="green">
- I'm evenly
- </column>
- <column class="blue">distributed</column>
- <column class="red">into 3 columns</column>
- </row>
- </container>
-
- <container>
- <row>
- <column class="green" small='8'>
- .large-4 .small-8
- </column>
- <column class="blue" small='2'>.large-4 .small-2</column>
- <column class="red" small='2'>.large-4 .small-2</column>
- </row>
- </container>
+ <td class="center" align="center" valign="top">
+ <center>
+ <container>
+ <row>
+ <column class="green" small='12'>
+ <p class="red">I'm even</p>
+ <button>Lsdlkfjsdf</button>
+ <panel>asdlfkjadsf</panel>
+ </column>
+ <column class="blue" small='12'>
+ <p>I'm even</p>
+ <button>Lsdlkfjsdf</button>
+ <panel>asdlfkjadsf</panel>
+ </column>
+ </row>
+ </container>
+ </center>
+ </td>
</tr>
</table>
</body>
var createCol = function(obj) {
- var output = '';
- var mQ = {small: 0, large: 0};
- var colEven = '';
-
- $.each(obj, function() {
- var col = $(this);
-
- // do the maths first
- $.each( mQ, function(i, val) {
- if (!col.attr(i)) {
- // count the number of columns that do not have a specified width
- mQ[i]++;
-
- // at the final iteration
- if (mQ[i] === obj.length) {
- // divide the default grid number by the number of colums with no width
- var evenSplit = Math.floor( 12 / (mQ[i]) );
-
- // append the missing class to the column class
- colEven += i + '-' + evenSplit + ' ';
- }
- };
- });
- });
+ var output = '';
- $.each(obj, function(v,k) {
- var temp = ''
- var contents = $(this).html();
- var colClass = 'columns ' + $(this).attr('class');
- var colNum = '';
- var col = $(this);
+ // create tables with column class for each nested element
+ var colElements = function(elements, colSize) {
+ var colHTML = '';
- $.each( mQ, function(i, val) {
- if (col.attr(i)) {
- colNum += i + '-' + col.attr(i) + ' ';
+ $.each(elements, function(i, el) {
+ // get included tags
+ var contents = $(el)[0].outerHTML;
+ var colClass = 'columns ';
+
+ // transclude any class that might have been added onto element
+ if ($(el).attr('class')) {
+ colClass += $(el).attr('class');
};
- });
- // check if this is the last element in the row
- // add previously calculated even class
- if (v !== obj.length - 1) {
- temp = '<td class="wrapper">'
- +'<table class="' + colClass + ' ' + colNum + colEven +'">'
+ // construct column class for each element
+ colHTML += '<table class="' + colClass + ' ' + colSize+'">'
+'<tr><td>'
- + contents +'</td><td class="expander"></td></tr></table></td>';
+ + contents +'</td><td class="expander"></td></tr></table>';
+ });
+
+ return colHTML;
+ };
+
+ // create tables with wrapper class for each column
+ $.each(obj, function(k,v) {
+ var wrapperHTML = '';
+ var colSize = '';
+ var col = $(this);
+ var elements = $(this).children();
+
+ // if wrapper is last or the only one, put last class
+ if (k === obj.length - 1) {
+ wrapperHTML += '<td class="wrapper last">';
} else {
- temp = '<td class="wrapper last">'
- +'<table class="' + colClass + ' ' + colNum + colEven +'">'
- +'<tr><td>'
- + contents +'</td><td class="expander"></td></tr></table></td>';
- }
+ wrapperHTML += '<td class="wrapper">';
+ }
+
+ // check for sizes
+ if (col.attr('small')) {
+ colSize += 'small' + '-' + col.attr('small') + ' ';
+ }
+ if (col.attr('large')) {
+ colSize += 'large' + '-' + col.attr('large') + ' ';
+ }
+
+ wrapperHTML += colElements(elements, colSize);
+ wrapperHTML += '</td>';
- output += temp;
+ output += wrapperHTML;
});
return output;
background: #00558B;
font-family: Helvetica;
}
-
- .container{
- background:#fff;
- border:1px solid #eee;
- width:500px;
- padding:20px;
- margin:20px auto;
- }
- h1{
- font-size:32px;
- text-align:center;
- font-weight:400;
- }
-
- .inky {
- background: url(http://zurb.com/ink/images/inky-all-devices.svg) no-repeat center center;
- background-size: cover;
- height: 680px;
- width: 634px;
- position: absolute;
- right: 0px;
- top: 10px !important;
- }
-
- .inky.loaded {
- animation-name: inky-float;
- -webkit-animation-name: inky-float;
- animation-duration: 5s;
- -webkit-animation-duration: 5s;
- animation-iteration-count: infinite;
- -webkit-animation-iteration-count: infinite;
- }
-
- @keyframes inky-float {
- 0% {
- transform: translateY(0%);
- }
-
- 50% {
- transform: translateY(2%);
- }
-
- 100% {
- transform: translateY(0%);
- }
- }
-
- @-webkit-keyframes inky-float {
- 0% {
- -webkit-transform: translateY(0%);
- }
-
- 50% {
- -webkit-transform: translateY(2%);
- }
-
- 100% {
- -webkit-transform: translateY(0%);
- }
- }
-
- .blue {
- background-color: blue;
- }
-
- .red {
- background-color: red;
- }
-
- .green {
- background-color: green;
- }
projects / thirdparty / foundation / foundation-emails.git / commitdiff
