--- /dev/null
+// Compatability Table
+// -------------------
+// A styled table used on the compatability page to show which browsers the framework works with.
+
+$primary: #002b36;
+$secondary: #efefef;
+$alert: #cf2a0e;
+$warning: #ffae00;
+$success: #43AC6A;
+$gutter: 40px;
+$rad: 5px;
+
+@mixin font-size($sizeValue){
+ font-size: $sizeValue + px;
+ font-size: ($sizeValue / 10) + rem;
+}
+
+@mixin -breakpoint($point) {
+ @if $point == smallmobile {
+ @media (max-width: 200px) { @content; }
+ }
+ @if $point == mobile {
+ @media (max-width: 640px) { @content; }
+ }
+ @if $point == tablet {
+ @media (max-width: 1000px) { @content; }
+ }
+ @if $point == smallscreen {
+ @media (max-width: 1120px) { @content; }
+ }
+}
+
+.comparison-table {
+ display: block;
+ width: 100%;
+ border-collapse: separate;
+ thead tr {
+ color: $primary;
+ font-weight: bold;
+ text-transform: uppercase;
+ td { color: #666 !important; }
+ td { padding-bottom: 10px; }
+ td { border: none !important; }
+ }
+ tr {
+ width: 100%;
+ td {
+ border-right: 1px solid #ddd;
+ }
+ &:first-child {
+ td { border-top: 1px solid #ddd; }
+ td:first-child {
+
+ }
+ td:last-child {
+
+ }
+ }
+ &:last-child {
+ td { border-bottom: 1px solid #ddd; }
+ td:first-child {
+
+ }
+ td:last-child {
+
+ }
+ }
+ td:first-child {
+ width: 25%;
+ padding: 10px;
+ color: $primary;
+ font-weight: bold;
+ border-left: 1px solid #ddd;
+ }
+ td.marker.yes {
+ width: 10%;
+ text-align: center;
+ vertical-align: middle;
+ color: $success;
+ font-weight: bold;
+ }
+ td.marker.mostly {
+ width: 10%;
+ text-align: center;
+ vertical-align: middle;
+ color: $warning;
+ font-weight: bold;
+ }
+ td.marker.no {
+ width: 10%;
+ text-align: center;
+ vertical-align: middle;
+ color: $alert-color;
+ font-size: 1.3rem;
+ font-weight: bold;
+ }
+ }
+ tr:nth-child(even) {
+ background: $secondary;
+ }
+ @include -breakpoint(smallmobile) {
+ td, tr td, tr td.marker, tr td:first-child, tr td:first-child + td {
+ position: relative;
+ display: block;
+ width: 100%;
+ border-top: none;
+ border-bottom: none;
+ border-left: 1px solid #ddd;
+ }
+ tr:first-child td:first-child {
+
+ }
+ tr:first-child td:last-child {
+ border-top-right-radius: 0;
+ }
+ tr:last-child td:first-child {
+ border-bottom-left-radius: 0;
+ }
+ tr:last-child td:last-child {
+ border-bottom: 1px solid #ddd;
+ }
+ tr td:first-child {
+ border-top: 1px solid #ddd;
+ & + td {
+ padding: 0 10px 10px;
+ }
+ }
+ tr td.marker {
+ padding: 10px;
+ font-weight: bold;
+ &:before {
+ content: "Grid: ";
+ }
+ & + td.marker:before {
+ content: "Layout/UI: ";
+ }
+ & + td.marker + td.marker:before {
+ content: "JS: ";
+ }
+ }
+ thead tr td.marker {
+ display: none;
+ }
+ }
+}
+
+td.divider {
+ background: $dark-gray;
+
+ &:first-child {
+ border-right: $dark-gray;
+ }
+
+ &:last-child {
+ border-left: $dark-gray;
+ }
+}
\ No newline at end of file
## 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 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.
-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.
+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.
```inky_example
<row>
---
title: Foundation for Emails 2 Migration Guide
-description: This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to 2.
+description: This guide describes the changes required to migrate a Foundation for Emails template from version 1 (formerly Ink) to Foundation for Emails 2.
tags:
- upgrade
---
## Overview
+First off, you'll want to choose a version to get started with.
+<br>[CSS version](css-guide.html) or the [Sass version with Inky](sass-guide.html)
+
When migrating, the following items can be translated easily from 1 to 2:
- Boilerplate
- Visibility
Foundation for Emails 2 is available in a Sass version which let’s you quickly change common CSS values with some simple variables within the settings.
These are some CSS classes that are no longer needed for proper spacing:
-- .wrapper
-- .wrapper-last
-- .text-pad
-- .text-pad-left
-- .text-pad-right
+- `.wrapper`
+- `.wrapper-last`
+- `.text-pad`
+- `.text-pad-left`
+- `.text-pad-right`
+
+Some helper classes have changed:
+
+`.center` was used in version 1 to center text.
+
+Version 2 now has more alignment classes:
+- `.text-center`: centers text
+- `.text-left`: aligns text to the left
+- `.text-right`: aligns text to the right
+- `.small-text-center`: centers text on the small breakpoint
+- `.small-text-left`: left aligns text on the small breakpoint
+- `.small-text-right`: right aligns text on the small breakpoint
+- `float-center`: centers an image (see the [alignment docs](alignment.html) for best practices.)
***
## Components
```
### Block Grid
-The block grid is no longer needed in Foundation for Emails 2.0 because the framework is reponsive in Android native (not Gmail app) and the small
+The block grid has a minor syntax change with identifying the number of elements that are displayed in the row. We’ve moved to the convention of `.up-x`, instead of `.x-up`.
Version 1
<tr>
<th class="column first">
Thing 1
- </th>
- <th class="column">
+ </th><th class="column"> <!-- Make sure the tags are directly next to each other -->
Thing 2
- </th>
- <th class="column last">
+ </th><th class="column last"> <!-- Make sure the tags are directly next to each other -->
Thing 3
</th>
</tr>
</columns>
<columns small="6">
<callout class="secondary">
- <p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
+ <p>I'm in a callout!</p>
</callout>
</columns>
</row>
<callout class="primary">
<row>
<columns small="12">
-
<row>
<columns small="6">
- <p>One Word</p>
+ <p>This whole row is in a callout!</p>
</columns>
<columns small="6">
- <p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
+ <p>This whole row is in a callout!</p>
</columns>
</row>
-
</columns>
</row>
</callout>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
