From: Eric Morris Date: Tue, 10 Dec 2013 17:57:14 +0000 (-0800) Subject: Replace all double spaces between sentences in docs with single space for consistency X-Git-Tag: v1.0.5~25 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=6beffc355242e5f13eeed346bfb3193f2cfdaea9;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Replace all double spaces between sentences in docs with single space for consistency --- diff --git a/docs/components/block-grid.php b/docs/components/block-grid.php index 41b57d40..104562d0 100644 --- a/docs/components/block-grid.php +++ b/docs/components/block-grid.php @@ -2,10 +2,10 @@

An even-width element grid that doesn't use media queries.

Description

-

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.

+

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 preceding 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 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.

+

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/buttons.php b/docs/components/buttons.php index 1d1038ce..4e3b763a 100644 --- a/docs/components/buttons.php +++ b/docs/components/buttons.php @@ -2,7 +2,7 @@

Dynamic and effective calls to action.

Structure

-

To create buttons that look great in most clients, make a table of class button to wrap your <a> tag. Buttons expand to the full width of their container by default, so if you don't want them to expand all the way, consider placing them in a sub-grid or block-grid element.

+

To create buttons that look great in most clients, make a table of class button to wrap your <a> tag. Buttons expand to the full width of their container by default, so if you don't want them to expand all the way, consider placing them in a sub-grid or block-grid element.

A Basic Button
@@ -18,7 +18,7 @@

Style Classes

Several built in styling classes can be applied to the same element as the button class is applied to in order to adjust the button's appearance.

Size

-

Size classes affect the button's vertical padding. The available size classes are:

+

Size classes affect the button's vertical padding. The available size classes are:

@@ -37,7 +37,7 @@
.button (same as .small-button)

Color

-

Color classes denote the purpose of the button, and are used to change its background color. The available color classes are:

+

Color classes denote the purpose of the button, and are used to change its background color. The available color classes are:

@@ -56,7 +56,7 @@
none (same as .primary)

Border Radius

-

Radius classes cause the corners of the buttons to be rounded in clients that support the border-radius property. The available radius classes are:

+

Radius classes cause the corners of the buttons to be rounded in clients that support the border-radius property. The available radius classes are:

@@ -72,7 +72,7 @@

Examples

Buttons expand to the width of their parent container by default, so it's recommended that you contain them within a sub-grid or a relatively small number of columns on the main grid.

Button Demo
-

All the button modifiers demonstrated. The rows of buttons are contained to .four.columns or .six.columns sections of the grid for clarity.

+

All the button modifiers demonstrated. The rows of buttons are contained to .four.columns or .six.columns sections of the grid for clarity.


diff --git a/docs/components/getting-started.php b/docs/components/getting-started.php index b9b75ff0..bf9b0a4d 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
Create powerful multi-device layouts quickly and easily.

Structure

-

Ink uses a 12-column grid with a 580px wrapper. On mobile devices (under 580px wide), columns become full width and stack vertically.

+

Ink uses a 12-column grid with a 580px wrapper. On mobile devices (under 580px wide), columns become full width and stack vertically.

Ink's grid can be thought of in terms of three components:

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.

+

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.

+

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

Basic example of the three main grid components.


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.

+

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.


@@ -88,12 +88,12 @@ - + - + @@ -103,14 +103,14 @@ - +
none (no border-radius)
td lastClass applied to the last .wrapper td in each row in order for the gutter to work properly. If you only have one (presumably full-width) .columns table (and therefore one .wrapper td) in a row, the .wrapper td still needs to have the last class applied to it.Class applied to the last .wrapper td in each row in order for the gutter to work properly. If you only have one (presumably full-width) .columns table (and therefore one .wrapper td) in a row, the .wrapper td still needs to have the last class applied to it.
table {number}Can be any number between one and twelve (spelled out). Used to determine how wide your .columns tables are. The number of columns in each row should add up to 12, including offset columns.Can be any number between one and twelve (spelled out). Used to determine how wide your .columns tables are. The number of columns in each row should add up to 12, including offset columns.
table
td expanderAn empty (and invisible) element added after the content element in a .columns table. It forces the content td to expand to the full width of the screen on small devices, instead of just the width of the content within the td.An empty (and invisible) element added after the content element in a .columns table. It forces the content td to expand to the full width of the screen on small devices, instead of just the width of the content within the td.

Examples

Even Columns

-

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.

+

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
@@ -181,10 +181,11 @@

+

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 recommend using the HTML <center> tag around the content you wish to center.

+
+

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 recommend using the HTML <center> tag around the content you wish to center.

The Center Class
@@ -231,9 +232,9 @@

Text Padding

-

A fairly common use case for the container is to give your text a white background to separate it from a colored email body. To assist with this design pattern, we've included three helper classes with Ink: .text-pad, .left-text-pad and .right-text-pad.

-

The .text-pad class provides 10px of padding on either side of the content (while it's named text-pad, it works just as well on buttons or images), making sure it doesn't butt right up against the edge of your container. The .text-pad class should be applied to the <td> of a .columns <table>.

-

The .left-text-pad and .right-text-pad do the same thing as the .text-pad class, but are meant to be applied to content that doesn't extend across the entire row (in other words, content that isn't twelve columns wide). The directional text-padding classes only apply the padding to the side of the content near the edge of the container on large screens, but apply it to both sides on small screens, when the columns expand to fill the full width of the row.

+

A fairly common use case for the container is to give your text a white background to separate it from a colored email body. To assist with this design pattern, we've included three helper classes with Ink: .text-pad, .left-text-pad and .right-text-pad.

+

The .text-pad class provides 10px of padding on either side of the content (while it's named text-pad, it works just as well on buttons or images), making sure it doesn't butt right up against the edge of your container. The .text-pad class should be applied to the <td> of a .columns <table>.

+

The .left-text-pad and .right-text-pad do the same thing as the .text-pad class, but are meant to be applied to content that doesn't extend across the entire row (in other words, content that isn't twelve columns wide). The directional text-padding classes only apply the padding to the side of the content near the edge of the container on large screens, but apply it to both sides on small screens, when the columns expand to fill the full width of the row.

The Text-Pad Class
@@ -290,8 +291,8 @@

Expanders

-

When the Ink grid is shown on a small screen, the .columns 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 .columns table or are centering the content.

-

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.

+

When the Ink grid is shown on a small screen, the .columns 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 .columns table or are centering the content.

+

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
@@ -372,7 +373,7 @@ Gmail (Mobile, iOS, Android) ✘ - Since Gmail doesn't support media queries, users will be presented with the desktop view. If mobile Gmail is a large part of your audience, we'd suggest using a layout based on the block-grid. + Since Gmail doesn't support media queries, users will be presented with the desktop view. If mobile Gmail is a large part of your audience, we'd suggest using a layout based on the block-grid. Outlook 2011 for Mac diff --git a/docs/components/images.php b/docs/components/images.php index 644899e6..0f9aabb6 100644 --- a/docs/components/images.php +++ b/docs/components/images.php @@ -2,7 +2,7 @@

Accent your emails with rich, high resolution images.

Markup

-

The days of having to choose between supporting Outlook or retina devices are over. To use high resolution images, put height and width HTML attributes on the <img> tag, corresponding to the scaled size of the image in a desktop view (the width of its .columns container). On small screen devices, Ink will cause the image to expand to its full width (or the width or its parent element, whichever is smaller).

+

The days of having to choose between supporting Outlook or retina devices are over. To use high resolution images, put height and width HTML attributes on the <img> tag, corresponding to the scaled size of the image in a desktop view (the width of its .columns container). On small screen devices, Ink will cause the image to expand to its full width (or the width or its parent element, whichever is smaller).

Image Markup
@@ -19,7 +19,7 @@

Column Sizes

-

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.

+

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.

@@ -77,7 +77,7 @@

Examples

Newsletter Images

-

A common pattern in email newsletters is to have an image on the left with description text next to it. We use this layout quite frequently on ZURB emails and thought that it looked awkward when the small image begins to float in the center of the screen on mobile devices. To compensate for this, we use a full-width image that's scaled down on the desktop view.

+

A common pattern in email newsletters is to have an image on the left with description text next to it. We use this layout quite frequently on ZURB emails and thought that it looked awkward when the small image begins to float in the center of the screen on mobile devices. To compensate for this, we use a full-width image that's scaled down on the desktop view.

Newsletter 3-9 Image
diff --git a/docs/components/panels.php b/docs/components/panels.php index 78c914ca..660d7a7a 100644 --- a/docs/components/panels.php +++ b/docs/components/panels.php @@ -2,7 +2,7 @@

Quickly highlight important content.

-

Add a class of panel to a <td> in a .columns table in order to give it a default border and background color. Great for offsetting important content or for quickly prototyping a layout.

+

Add a class of panel to a <td> in a .columns table in order to give it a default border and background color. Great for offsetting important content or for quickly prototyping a layout.

Example Panel Markup
diff --git a/docs/components/sub-grid.php b/docs/components/sub-grid.php index c8383d13..8a243a16 100644 --- a/docs/components/sub-grid.php +++ b/docs/components/sub-grid.php @@ -3,7 +3,7 @@

Grids Within Grids

-

While the Ink grid can't be nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a <td> tag underneath a .columns table, you can sub-divide the .columns table into sub-columns.

+

While the Ink grid can't be nested like its Foundation counterpart, Ink does provide a nestable sub-grid for when one grid just isn't enough. By applying a .sub-columns class (as well as a numbered class, same as the primary grid) to a <td> tag underneath a .columns table, you can sub-divide the .columns table into sub-columns.

The last .sub-columns <td> in the .columns <table> should be given a class of last in order for the gutter padding to be properly maintained.

Basic Sub-Grid Example
Selectively show content for different screen sizes.

-

By adding a visibility class to an element, you can show or hide it based on screen size. Visibility classes can be used on any element.

+

By adding a visibility class to an element, you can show or hide it based on screen size. Visibility classes can be used on any element.

Note: If you're using a visibility class on an image, be sure to apply it to the parent element, not to the image itself.

Using Visibility Classes
- + - +
Number of Columns Gmail (Desktop) ✘Not yet implemented. Support will be added soon.Not yet implemented. Support will be added soon.
Gmail (Mobile, iOS, Android) ✘Not yet implemented. Support will be added soon.Not yet implemented. Support will be added soon.
Outlook 2011 for Mac