<p>For cases where neither the Ink grid nor the Ink sub-grid is appropriate, the block-grid can often be quite useful. Block-grid elements automatically align to the left and are pushed down to the next row individually as the viewport gets smaller...all without using media queries.</p>
<hr />
<h2 class="light">Markup</h2>
-<p>Block-grids consist of a table with class <code>block-grid</code> applied to it, along with a class in the pattern 'number-up' (ex. <code>.two-up</code>, <code>.three-up</code>, etc.) to describe how many even-sized elements should be placed per row. Extra care should be taken to ensure that there aren't any whitespace characters or newlines between the closing <code><td></code> of a block-grid element and the opening <code><td></code> of the precceding element, since some clients will render the whitespace as a gap between the elements.</p>
+<p>Block-grids consist of a table with class <code>block-grid</code> applied to it, along with a class in the pattern 'number-up' (ex. <code>.two-up</code>, <code>.three-up</code>, etc.) to describe how many even-sized elements should be placed per row. Extra care should be taken to ensure that there aren't any whitespace characters or newlines between the closing <code><td></code> of a block-grid element and the opening <code><td></code> of the preceding element, since some clients will render the whitespace as a gap between the elements.</p>
<h6>Basic Block-Grid Markup</h6>
<?php code_example(
'<table class="container">
<hr />
<h2 class="light">Examples</h2>
<h4 class="normal">Multi-column Layouts in Gmail</h4>
-<p>A major use case for block-grids, since they don't rely on media queries, is to create multi-column layouts for Gmail. The simplest way to accomplish this is to create a <code>.two-up</code> block-grid and use the blick-grid elements as your column structures. As a progressive enhancement, adding a media query that expands the columns to 100% width under 600px would cause the columns to take up the whole screen on mobile clients that support media queries, while not breaking the reflow pattern for those that don't.</p>
+<p>A major use case for block-grids, since they don't rely on media queries, is to create multi-column layouts for Gmail. The simplest way to accomplish this is to create a <code>.two-up</code> block-grid and use the block-grid elements as your column structures. As a progressive enhancement, adding a media query that expands the columns to 100% width under 600px would cause the columns to take up the whole screen on mobile clients that support media queries, while not breaking the reflow pattern for those that don't.</p>
<h6>Gmail Two Column Layout</h6>
<?php code_example(
'<table class="container">
<h4 class="normal">Containers</h4>
<p>Ink containers wrap the content and maintain a fixed, 580px layout on large displays. Below 580px, containers take up 95% of the screen's width, ensuring that your content doesn't run right up against the edges of the user's screen.</p>
<h4 class="normal">Rows</h4>
-<p>Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <kbd><td></kbd> tags of <code>.row</code> tables use the wrapper class to maintain a gutter between columns. Note: the last <code>.wrapper</code> td in a row MUST have a class of <code>.last</code> applied to it, even if it's the only wrapper in the row (ex. for a row with a single, twelve column wide content area).</p>
+<p>Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <kbd><td></kbd> tags of <code>.row</code> tables use the wrapper class to maintain a gutter between columns. Note: the last <code>.wrapper</code> <kbd><td></kbd> in a row MUST have a class of <code>.last</code> applied to it, even if it's the only wrapper in the row (ex. for a row with a single, twelve-column wide content area).</p>
<h4 class="normal">Columns</h4>
<p>Columns denote the width of the content, as based on a 12-column system. The content inside them will expand to cover n-columns, assuming that the number of columns in one row adds up to 12.</p>
<h6>The Three Grid Components</h6>
</table>'
, 'html'); ?>
<br>
-<h6>Visual Explantion of Grid</h6>
-<p>Diagram of how the basic grid is laid out. While Ink was used to greate the example (and therefore it responds to the correct media queries), extra coloring and spacing was added for clarity.</p>
+<h6>Visual Explanation of Grid</h6>
+<p>Diagram of how the basic grid is laid out. While Ink was used to create the example (and therefore it responds to the correct media queries), extra coloring and spacing was added for clarity.</p>
<iframe id="if-basicGrid" src="docs/examples/basic-grid.html"></iframe>
<br>
<hr>
<h2 class="light">Examples</h2>
<h4 class="normal">Even Columns</h4>
-<p>Ink's tweve column grid makes creating even column layouts a snap. Just use one <code>.twelve.columns</code>, two <code>.six.columns</code>, three <code>.four.columns</code> or four <code>.three.columns</code> classes to create your layout. Appearing as multiple, even columns on large screens, the layout will fold into a single column on small (mobile) screens.</p>
+<p>Ink's 12-column grid makes creating even column layouts a snap. Just use one <code>.twelve.columns</code>, two <code>.six.columns</code>, three <code>.four.columns</code> or four <code>.three.columns</code> classes to create your layout. Appearing as multiple, even columns on large screens, the layout will fold into a single column on small (mobile) screens.</p>
<h6>Code for Even Columns</h6>
<?php code_example(
'<table class="container">
<p>Unlike the <a href="http://foundation.zurb.com/docs/components/grid.html">Foundation grid</a>, Ink's grid cannot be nested. A layout simulating rows within columns is possible, however, by placing multiple <code>.columns</code> tables (with the same number of columns) within the same <code>.wrapper</code> td.</p> -->
<!-- <script type="text/javascript" src="https://snipt.net/embed/01eb0d482e77ef8e25e40e6d1dae49d1/"></script> -->
<br><h4 class="normal">Centered Content</h4>
-<p>To center the content of a column, apply a class of <code>center</code> to the <kbd><td></kbd> that contains the content. If you want to center an image, you should also apply a class of <code>center</code> to the image itself. For maximum client support, we also reccommend using the HTML <kbd><center></kbd> tag around the content you wish to center.</p>
+<p>To center the content of a column, apply a class of <code>center</code> to the <kbd><td></kbd> that contains the content. If you want to center an image, you should also apply a class of <code>center</code> to the image itself. For maximum client support, we also recommend using the HTML <kbd><center></kbd> tag around the content you wish to center.</p>
<h6>The Center Class</h6>
<?php code_example(
'<table class="row">
<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>
<h6>Expander TDs</h6>
<?php code_example(
-'<table class="twelve columns">
+'<table class="columns">
<tr>
<td>
<!-- Content not large enough to "prop" the container open all the way -->
projects / thirdparty / foundation / foundation-emails.git / commitdiff
