From 510f260d4f1b19164703889a6fb923d678727e21 Mon Sep 17 00:00:00 2001 From: Jacob Gube Date: Fri, 8 Nov 2013 12:53:32 +0800 Subject: [PATCH] Fix typos/spelling, grammar errors and (a few) consistency issues --- docs/components/block-grid.php | 4 ++-- docs/components/getting-started.php | 2 +- docs/components/grid.php | 12 ++++++------ docs/components/images.php | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/components/block-grid.php b/docs/components/block-grid.php index 00b9b6b4..c78dd421 100644 --- a/docs/components/block-grid.php +++ b/docs/components/block-grid.php @@ -5,7 +5,7 @@

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.

Markup

-

Block-grids consist of a table with class block-grid applied to it, along with a class in the pattern 'number-up' (ex. .two-up, .three-up, 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 <td> of a block-grid element and the opening <td> of the precceding element, since some clients will render the whitespace as a gap between the elements.

+

Block-grids consist of a table with class block-grid applied to it, along with a class in the pattern 'number-up' (ex. .two-up, .three-up, 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 <td> of a block-grid element and the opening <td> of the preceding element, since some clients will render the whitespace as a gap between the elements.

Basic Block-Grid Markup
@@ -37,7 +37,7 @@

Examples

Multi-column Layouts in Gmail

-

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 .two-up 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.

+

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 .two-up 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.

Gmail Two Column Layout
diff --git a/docs/components/getting-started.php b/docs/components/getting-started.php index a17cfde2..b9b75ff0 100644 --- a/docs/components/getting-started.php +++ b/docs/components/getting-started.php @@ -3,7 +3,7 @@

The Boilerplate

- Starting a new Ink project is fairly straightforward. If you aren't using one of our templates, grab the boilerplate code from below to use as a starting point. While you can reference ink.css using a link tag for testing purposes, be sure to remove the <link rel="stylesheet" href="ink.css" /> statement and paste your CSS into the style tag in the head before running your email through an inliner. + Starting a new Ink project is fairly straightforward. If you aren't using one of our templates, grab the boilerplate code from below to use as a starting point. While you can reference ink.css using a <link> tag for testing purposes, be sure to remove the <link rel="stylesheet" href="ink.css" /> statement and paste your CSS into the <style> tag in the head before running your email through an inliner.

Boilerplate.html
Containers

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.

Rows

-

Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <td> tags of .row tables use the wrapper class to maintain a gutter between columns. Note: the last .wrapper td in a row MUST have a class of .last 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).

+

Rows are used to separate blocks of content vertically. In addition to the vertical separation, the <td> tags of .row tables use the wrapper class to maintain a gutter between columns. Note: the last .wrapper <td> in a row MUST have a class of .last 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).

Columns

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.

The Three Grid Components
@@ -55,8 +55,8 @@ ' , 'html'); ?>
-
Visual Explantion of Grid
-

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.

+
Visual Explanation of Grid
+

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.


@@ -110,7 +110,7 @@

Examples

Even Columns

-

Ink's tweve column grid makes creating even column layouts a snap. Just use one .twelve.columns, two .six.columns, three .four.columns or four .three.columns 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.

+

Ink's 12-column grid makes creating even column layouts a snap. Just use one .twelve.columns, two .six.columns, three .four.columns or four .three.columns 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.

Code for Even Columns
@@ -184,7 +184,7 @@

Unlike the Foundation grid, Ink's grid cannot be nested. A layout simulating rows within columns is possible, however, by placing multiple .columns tables (with the same number of columns) within the same .wrapper td.

-->

Centered Content

-

To center the content of a column, apply a class of center to the <td> that contains the content. If you want to center an image, you should also apply a class of center to the image itself. For maximum client support, we also reccommend using the HTML <center> tag around the content you wish to center.

+

To center the content of a column, apply a class of center to the <td> that contains the content. If you want to center an image, you should also apply a class of center to the image itself. For maximum client support, we also recommend using the HTML <center> tag around the content you wish to center.

The Center Class
@@ -235,7 +235,7 @@

To get around this, an empty <td> with a class of expander is used after the <td> containing the actual content in the .columns table. This extra <td> isn't displayed, but it forces the content <td> to expand to full width.

Expander TDs
+'
diff --git a/docs/components/images.php b/docs/components/images.php index 5dba3207..5382ee3c 100644 --- a/docs/components/images.php +++ b/docs/components/images.php @@ -19,7 +19,7 @@

Column Sizes

-

Below is a chart of the sizes images should be to fully fit vatious sizes of grid columns on a desktop (larger than 600px) view. Height should be determined with respect to width and should also be explicitly declared on the <img> tag.

+

Below is a chart of the sizes images should be to fully fit various sizes of grid columns on a desktop (larger than 600px) view. Height should be determined with respect to width and should also be explicitly declared on the <img> tag.

-- 2.47.2
Number of Columns