<iframe id="if-textPad" src="docs/examples/text-pad.html"></iframe>
<br>
<br>
+<h4 class="normal">Full-Width Rows</h4>
+<p>When working with designs that call for a container that's colored to stand out from the background (like the example above), it can often be helpful to have full-width rows that can be styled separately, especially for elements like headers or ad breaks. Since the rows of the Ink grid are usually restrained to the width of the container, this design pattern requires a slightly different syntax than normal.</p>
+<p>To create a full-width row, just follow this process:</p>
+<ol>
+ <li>Create a standard “container > row > column” block.</li>
+ <li>Swap the <code>.row</code> and <code>.container</code> classes, keeping the tables in the same place.</li>
+ <li>Add center code to the outside (<code>.row</code>) table.</li>
+</ol>
+<p>The row should now extend to the edge of the viewport, while the content is still restricted to the width of the container, so both can be styled accordingly.</p>
+<h6>Reverse Row Syntax</h6>
+<?php code_example(
+'<table class="row"> <!-- Styles go on the row -->
+ <tr>
+ <td class="center" align="center"> <!-- Center the container -->
+ <center>
+
+ <table class="container"> <!-- Container restricts the content width -->
+ <tr>
+ <td class="wrapper last"> <!-- Wrapper stays on the inner table -->
+
+ <table class="twelve columns">
+ <tr>
+ <td>
+
+ Content
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </center>
+ </td>
+ </tr>
+</table>'
+, 'html'); ?>
+<br>
+<h6>Full Width Row</h6>
+<p>In the example below, the rows have a white background, while the body is light blue.</p>
+<iframe id="if-fullWidth" src="docs/examples/full-width.html"></iframe>
+<br>
+<br>
<h4 class="normal">Expanders</h4>
<p>When the Ink grid is shown on a small screen, the <code>.columns</code> tables expand to the full width of the container and stack vertically. On some clients, however, the columns don't expand properly if the content isn't as wide as the screen. While this might not seem so bad, it can cause your layout to appear broken if you are using a background color on the <code>.columns</code> table or are centering the content.</p>
<p>To get around this, an empty <kbd><td></kbd> with a class of <code>expander</code> is used after the <kbd><td></kbd> containing the actual content in the <code>.columns</code> table. This extra <kbd><td></kbd> isn't displayed, but it forces the content <kbd><td></kbd> to expand to full width.</p>
#if-centerClass {height: 220px;}
#if-offsetColumns {height: 165px;}
#if-textPad {height: 440px;}
+ #if-fullWidth {height: 280px;}
#if-subGrid {height: 140px;}
#if-blockGrid {height: 540px;}
#if-visibilityClasses {height: 110px;}
#if-centerClass {height: 270px;}
#if-offsetColumns {height: 165px;}
#if-textPad {height: 480px;}
+ #if-fullWidth {height: 320px;}
#if-subGrid {height: 210px;}
#if-blockGrid {height: 1000px;}
#if-visibilityClasses {height: 110px;}
--- /dev/null
+<!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>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width"/>
+ <style>
+
+ {{> ink }}
+
+ body {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ background: #82CCE5;
+ }
+
+ .row {
+ background: #ffffff;
+ }
+
+ /* Firefox display hack */
+ @media only screen and (max-width: 600px) {
+ table[class="body"] .row tr,
+ table[class="body"] .row tbody {
+ display: block;
+ }
+ }
+
+ </style>
+</head>
+<body>
+ <table class="body">
+ <tr>
+ <td class="center" align="center" valign="top">
+ <center>
+
+ <!-- EXAMPLE CODE -->
+
+ <table class="container">
+ <tr>
+ <td>
+
+ <table class="row">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td>
+ <h6>Normal Row</h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam nihil expedita voluptas odio hic odit!</p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <table class="row">
+ <tr>
+ <td class="center" align="center">
+ <center>
+
+ <table class="container">
+ <tr>
+ <td class="wrapper last">
+
+ <table class="twelve columns">
+ <tr>
+ <td>
+ <h6>Full Width Row</h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eius repellendus voluptates nisi vitae nulla similique provident expedita. Fuga, magni, iusto vel a aperiam nihil expedita voluptas odio hic odit!</p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </center>
+ </td>
+ </tr>
+ </table>
+
+ <!-- END EXAMPLE CODE -->
+
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
\ No newline at end of file
projects / thirdparty / foundation / foundation-emails.git / commitdiff
