<hr />
<p>Add a class of <code>panel</code> to a <kbd><td></kbd> in a <code>.columns</code> table in order to give it a default border and background color. Great for offsetting important content or for quickly prototyping a layout.</p>
-<h6>Example Panel Markup</h6>
+<h6>Panel Markup</h6>
+<?php code_example(
+'<table class="twelve columns">
+ <tr>
+ <td class="panel">
+
+ Panel content
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+</table>',
+'html') ?>
+<br>
+<h6>Panel Example</h6>
+<iframe id="if-panels" src="docs/examples/panels.html"></iframe>
+<br>
+<hr>
+<h2 class="light">Examples</h2>
+<h4 class="normal">Sidebar Panel</h4>
+<p>A common patten is to have a panel section serve as a sidebar to offset it from the primary content.</p>
+<h6>Sidebar Panel Markup</h6>
<?php code_example(
'<table class="row">
<tr>
'html') ?>
<br>
<h6>Sidebar Panel</h6>
-<iframe id="if-panels" src="docs/examples/panels.html"></iframe>
+<iframe id="if-panelSidebar" src="docs/examples/panel-sidebar.html"></iframe>
+<br>
+<br>
+<h4 class="normal">Panels With Sub-grids</h4>
+<p>Nesting a sub-grid under a panel is non-intuitive, since the sub-grid columns would normally be applied to the <kbd><td></kbd> elements directly under the <code>.columns</code> table. To get around this, give the <kbd><td></kbd> a class of <code>.panel</code> and a class of <code>.sub-grid</code>. You can then put a <kbd><table></kbd> inside the <kbd><td></kbd> and create the sub-columns using the <kbd><td></kbd> elements of the inner table, as shown below.</p>
+<h6>Panel Sub-grid Markup</h6>
+<?php code_example(
+'<table class="twelve columns">
+ <tr>
+ <td class="panel sub-grid">
+
+ <table>
+ <tr>
+ <td class="six sub-columns">
+
+ Left Sub-Column
+
+ </td>
+ <td class="six sub-columns">
+
+ Right Sub-Column
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+</table>',
+'html') ?>
+<br>
+<h6>Sidebar Panel</h6>
+<iframe id="if-panelSubGrid" src="docs/examples/panel-sub-grid.html"></iframe>
<br>
<hr />
<h2 class="light">Compatibility</h2>
#if-subGrid {height: 140px;}
#if-blockGrid {height: 540px;}
#if-visibilityClasses {height: 110px;}
- #if-panels {height: 420px;}
+ #if-panels {height: 110px;}
+ #if-panelSubGrid {height: 110px;}
+ #if-panelSidebar {height: 420px;}
#if-buttons{height: 325px;}
#if-images{height: 250px;}
#if-subGrid {height: 210px;}
#if-blockGrid {height: 1000px;}
#if-visibilityClasses {height: 110px;}
- #if-panels {height: 400px;}
+ #if-panels {height: 110px;}
+ #if-panelSubGrid {height: 110px;}
+ #if-panelSidebar {height: 400px;}
#if-buttons{height: 650px;}
#if-images{height: 800px;}
}
--- /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>
+
+ /* Include ink.css */
+
+ /* Custom styles go here */
+
+ body {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ }
+ </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">
+
+ <table class="eight columns">
+ <tr>
+ <td>
+ <h6>Main content</h6>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
+ </p>
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="wrapper last">
+
+ <table class="four columns">
+ <tr>
+ <td class="panel">
+ <h6>Panel content</h6>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo.
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <!-- END EXAMPLE CODE -->
+
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
\ No newline at end of file
--- /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>
+
+ /* Include ink.css */
+
+ /* Custom styles go here */
+
+ body {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ }
+ </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 class="panel sub-grid">
+
+ <table>
+ <tr>
+ <td class="six sub-columns">
+
+ Left Sub-Column
+
+ </td>
+ <td class="six sub-columns">
+
+ Right Sub-Column
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ <td class="expander"></td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ </tr>
+ </table>
+
+ <!-- END EXAMPLE CODE -->
+
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
\ No newline at end of file
<table class="row">
<tr>
- <td class="wrapper">
-
- <table class="eight columns">
- <tr>
- <td>
- <h6>Main content</h6>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo. Explicabo, accusantium, eius. Nihil quia dignissimos minus nisi similique sapiente culpa totam molestiae.
- </p>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
-
- </td>
<td class="wrapper last">
- <table class="four columns">
+ <table class="twelve columns">
<tr>
<td class="panel">
- <h6>Panel content</h6>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, recusandae natus temporibus quas at ea doloremque illo.
+ td.panel
</td>
<td class="expander"></td>
</tr>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
