From 0181960da36ec3f83509b95766e28c0debdf3679 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Sun, 20 Mar 2016 22:20:42 -0700 Subject: [PATCH] adds docs for alignment --- docs/pages/alignment.md | 130 +++++++++++++++++++++++++++++++- docs/pages/grid.md | 2 +- scss/components/_alignment.scss | 20 +++++ test/visual/_template.html | 5 -- 4 files changed, 149 insertions(+), 8 deletions(-) diff --git a/docs/pages/alignment.md b/docs/pages/alignment.md index 9f2d727e..722b6021 100644 --- a/docs/pages/alignment.md +++ b/docs/pages/alignment.md @@ -1,6 +1,132 @@ --- title: Alignment -description: Centering made easy. +description: Centering, images, text and buttons in HTML emails made easy. --- -Just add the class center any element and you’ll be good to go. Inky will handle the magic behind the scenes! In the regular old CSS version, you’d have to fiddle with adding a “.text-center” class and a <center> tag to make sure things are centered. Now you just just need to add the class and move on ahead! +Foundation includes a handful of helpful alignment classes to add common positioning behaviors to elements. + +## Text alignment + +You can align text with the `.text-x` classes. These classes will appy to the large breakpoint as well as the small. + +```inky_example + + + + +

Left (default)

+ + +

center

+ + +

right

+ + + +``` + +If you need to change text alignment only on the small breakpoint, you can use the `.small-text-x` classes. + + +```inky_example + + + + +

Left on small

+ + +

Center on small

+ + +

Right on small

+ + + +``` + +You can combine these classes to override the behavior on the small breakpoint. + +```inky_example + + + + +

Center, small left

+ + +

Right, small center

+ + + +``` + +## Centering images + +Just wrap the `
` around an image you’ll be good to go. Inky will handle the magic behind the scenes! In the CSS version, you’ll add a `.float-center` class, `align="center"` attribute and wrap a <center> tag to make sure things are centered. + +```inky_example + + + +
+ image of clever meme that made me chuckle +
+ + + +``` + +So to be clear: +With Inky you only need to wrap an image in `
` tag to reliably center it. +In the CSS version, our centering recipe includes three ingredients: +- `.float-center` class on the img tag +- `align="center"` attribute on the img tag +- wrap the img with `
` tags (needed for Outlook 2007, 2010, 2011) + +Also, it's not really a float, but the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or auto width. + +If you need to center an image only on mobile clients, you can apply the `.small-float-center` class. A good use case would be centering an image smaller than the full column width on devices like an iPhone 5, iPhone 6, and Android 4.4. + + +```inky_example + + + + please don't forget me + + +

What is the deal?

+

Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.

+ + + +``` + +## Centering columns + +Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered. + +```inky_example + + + + + Centering a column + + + + + Centering a column + + + + + Centering a column + + + +``` + +If you don't add a size attribute like `small="x"` then the columns will be equal width. \ No newline at end of file diff --git a/docs/pages/grid.md b/docs/pages/grid.md index 64b24039..f4915c83 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -98,7 +98,7 @@ Collapsing a row removes the gutters from every column, which is the spacing bet ## Offsets -Offsets add spacing to the left of a column. Use this if all the columns in a row don't add up to 12, and you want to mess with the spacing between them. Offsets are intended to be used with one set of columns in a row. +Offsets add spacing to the left of a column. Use this if all the columns in a row don't add up to 12, and you want to mess with the spacing between them. 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. Think of it as pushing the columns over from the left. diff --git a/scss/components/_alignment.scss b/scss/components/_alignment.scss index 12a8d79f..b7f2dd59 100755 --- a/scss/components/_alignment.scss +++ b/scss/components/_alignment.scss @@ -47,6 +47,26 @@ span.text-center { text-align: center; } +@media only screen and (max-width: #{$global-breakpoint}) { + .small-float-center { + margin: 0 auto !important; + float: none !important; + text-align: center !important; + } + + .small-text-center { + text-align: center !important; + } + + .small-text-left { + text-align: left !important; + } + + .small-text-right { + text-align: right !important; + } +} + img.float-left { float: left; text-align: left; diff --git a/test/visual/_template.html b/test/visual/_template.html index fc4f2c3b..54f4ca73 100644 --- a/test/visual/_template.html +++ b/test/visual/_template.html @@ -4,11 +4,6 @@ - -- 2.47.2