From: Geoff Kimball Date: Thu, 17 Mar 2016 16:24:45 +0000 (-0700) Subject: Update code examples in docs to use inky_example instead of inky X-Git-Tag: v2.0.0-rc.4~36 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=84036ca5a8793cfbbbdea853a74aed26638f74cc;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Update code examples in docs to use inky_example instead of inky --- diff --git a/docs/pages/block-grid.md b/docs/pages/block-grid.md index bd4f832b..97944e99 100644 --- a/docs/pages/block-grid.md +++ b/docs/pages/block-grid.md @@ -12,7 +12,7 @@ The wrapper of a block grid is a `` with the class `.block-grid`, and a ` In Inky HTML, use the `` tag with the attribute `up="n"`, where `n` is the number of items per row. -```inky +```inky_example diff --git a/docs/pages/button.md b/docs/pages/button.md index 672199f1..8d0e9619 100644 --- a/docs/pages/button.md +++ b/docs/pages/button.md @@ -8,7 +8,7 @@ Creating a bullet-proof button that works in all email clients requires a table In Inky HTML, the ` ``` @@ -20,7 +20,7 @@ Buttons can be made larger or smaller by adding the class `.tiny`, `.small`, or In Inky HTML, add the same class to the ` @@ -34,7 +34,7 @@ To create an expanded button, add the class `.expanded` to the outer `
Item 1 Item 2
` o In Inky HTML, add the `.expanded` class to the ` ``` @@ -44,7 +44,7 @@ In Inky HTML, add the `.expanded` class to the `
` (or the ` diff --git a/docs/pages/callout.md b/docs/pages/callout.md index 90ca748e..a2aeadab 100644 --- a/docs/pages/callout.md +++ b/docs/pages/callout.md @@ -13,7 +13,7 @@ Callouts use a full table structure, with the class `.callout` applied to the in When using [Inky](inky.html) HTML, the `` tag will create this structure for you. -```inky +```inky_example

Beware of the Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

 @@ -25,7 +25,7 @@ When using [Inky](inky.html) HTML, the `` tag will create this structur The color of a callout can be changed by adding the class `.success`, `.warning`, or `.alert` to the element. -```inky +```inky_example

Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

 diff --git a/docs/pages/grid.md b/docs/pages/grid.md index c3bd7d5d..a9075b16 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -12,7 +12,7 @@ All emails should have a container element. This gives the email a maximum width A container is a full table, so it needs the tags `
` ``, ``, and finally `
`. The class `.container` goes on the ``. -```inky +```inky_example ``` @@ -24,7 +24,7 @@ A row is a `
` with a `` and ``. Inside of this ``, you'll In Inky HTML, use the `` tag to create a row. -```inky +```inky_example ``` @@ -51,7 +51,7 @@ Here's our full column syntax so far: In Inky HTML, use the `` class to create a column. -```inky +```inky_example This is a column. ``` @@ -63,7 +63,7 @@ Set column sizes with the classes `.large-n` and `.small-n`, where `n` is how wi In Inky HTML, set the attribute `small` or `large` on the `` tag with the size you want. If you don't fill in `small`, it will use 12 by default. If you fill in `small` but not `large`, `large` will use the same value as `small`. -```inky +```inky_example ``` @@ -73,7 +73,7 @@ The first column in a row must have the class `.first`, and the last column must In Inky HTML, these classes are added for you. -```inky +```inky_example One Two Three @@ -85,7 +85,7 @@ In Inky HTML, these classes are added for you. Collapsing a row removes the gutters from every column, which is the spacing between them. Add the class `.collapse` to a row to enable this. -```inky +```inky_example These columns touch. These columns touch. @@ -100,7 +100,7 @@ Offsets add spacing to the left of a column. Use this if all the columns in a ro Use the class `.large-offset-n` to create an offset, where `n` is the amount of columns to offset by. So, for example, `.large-offset-3` would offset the column by 25% of the width of the row. -```inky +```inky_example One Two diff --git a/docs/pages/inky.md b/docs/pages/inky.md index b9369e41..9cd04373 100644 --- a/docs/pages/inky.md +++ b/docs/pages/inky.md @@ -10,7 +10,7 @@ HTML emails require tables upon tables *upon tables* to work properly. Although Inky keeps you out of a sea of tables and focused on your email. Check out this example—click "Switch to Inky" to see the difference. -```inky +```inky_example diff --git a/docs/pages/menu.md b/docs/pages/menu.md index 73f63482..546e7bf3 100644 --- a/docs/pages/menu.md +++ b/docs/pages/menu.md @@ -10,7 +10,7 @@ A menu is a `
` with a class of `.menu` and a `` inside of it. Each li In Inky HTML, use the tag `` to make a menu, and the tag `` to make an item. -```inky +```inky_example Item Item @@ -24,7 +24,7 @@ In Inky HTML, use the tag `` to make a menu, and the tag `` to make Menu items have padding around them, which in some situations will misalign your link text with another element of your design. To strip the padding from menu items, add the class `.simple` to the menu. There will still be some horizontal space between them, to space them out. -```inky +```inky_example Item Item @@ -38,7 +38,7 @@ Menu items have padding around them, which in some situations will misalign your Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu. -```inky +```inky_example Item Item diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md index 48362741..27aa58d7 100644 --- a/docs/pages/thumbnail.md +++ b/docs/pages/thumbnail.md @@ -5,7 +5,7 @@ description: Spruce up an image tag with our thumbnail style. The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element. -```inky +```inky_example
diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md index af779e26..665f7bb2 100644 --- a/docs/pages/visibility.md +++ b/docs/pages/visibility.md @@ -9,7 +9,7 @@ You can use a visibility class to selectively show or hide content on mobile vs. **To show content only on mobile clients,** add the class `.hide-for-large` to the element. -```inky +```inky_example

This callout will only appear on small screens.

 @@ -17,7 +17,7 @@ You can use a visibility class to selectively show or hide content on mobile vs. **To show content only on desktop clients,** add the class `.show-for-large` to the element. -```inky +```inky_example

This callout will only appear on large screens.