Using Foundation

This topic explains how to use the Foundation Grid and other Foundation components in a Web Form or COTG Form.

Foundation

With the exception of the most basic one, all Web Template Wizards in the Designer make use of the Foundation front-end framework. A front-end framework is a collection of HTML, CSS, and JavaScript files to build upon. Foundation is a responsive framework: it uses CSS media queries and a mobile-first approach, so that websites built upon Foundation look good and function well on multiple devices including desktop and laptop computers, tablets, and mobile phones. Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2. See https://get.foundation.

Capture OnTheGo and Jumbotron template wizards automatically add the Foundation files v. 5.5.1 to the resources of the template. In a future version of OL Connect, Foundation 6 will be included. If you'd rather start using the newest Foundation files right away, you have two options:

Download the Foundation files (from https://get.foundation) and add them to the template manually.
Use remote Foundation files from a CDN, such as https://cdnjs.com/ (search for Foundation).

See Using JavaScript and Adding CSS files for further instructions.

Once the Foundation files have been added to a template, you can use the Grid, as well as many other Foundation components, in your template.

Tip: Take a look in the Snippets folder on the Resources pane. After creating a template with a Capture OnTheGo or Jumbotron template wizard, this folder contains a number of ready-made elements that make use of Foundation.

The Grid

Use the Grid to ensure the responsiveness of a form. Using the Grid essentially means building a form or web page with Div elements (a Div is a container element, see Div) that have the following classes:

row: This class identifies a Div as a horizontal block (a row) that can contain up to 12 columns.
columns: This class should be used for a Div inside a Div with the class row. It identifies a Div as part of a row Div.
small-n, medium-n, large-n: These classes indicate the number of columns that this Div occupies within in the row, on a small, medium or large screen, respectively. Replace n with a number, for example: small-2, large-4. If the numbers declared in one 'row' for one screen size, added together, exceed the maximum of 12, they don't fit in one row on that screen size. In that case the Div elements will appear below each other instead of next to each other.
These classes can be combined, so that depending on the screen size, a Div can take more or less space in a row. Separate the class names with a space.

Tip: Start with the class for small screens. For example: <div class="small-3 large-6" columns>. Larger devices will inherit those styles (thanks to the mobile-first approach of Foundation's style sheet). Customize for larger screens as necessary.

This very simple layout has only one row:

Copy

<div class="row">
        <div class="small-2 large-4 columns">Content goes here</div>
        <div class="small-4 large-4 columns">Content goes here</div>
        <div class="small-6 large-4 columns">Content goes here</div>
</div>

The Div elements inside the row take up 2, 4 and 6 parts of the total amount of screen size (divided in 12 parts) on a small screen. On a large screen they each take one third of the available space. If the class large-4 would have been left out, the Divs would take up 2, 4 and 6 parts of the available space, regardless of the screen size.

There's more that you can do with the Grid. For example, you could center columns, or switch columns depending on the screen size they are viewed on. For information about all these possibilities, see https://get.foundation/sites.html.

Adding Divs and classes to a Connect Form template

To insert a Div, select Insert > Structural Elements > Div on the menu. To add a class to the Div, select the Div (see Selecting an element) and type the class in the Class field on the Attributes pane.

To add Grid rows and columns quickly, you could also use the Grid snippets or Row snippets, found in the Snippets folder on the Resources pane after using a wizard to create a Foundation web page or a Capture OnTheGo template. For more information about Snippets, see Snippets. For more information about template wizards, see Creating a Web template with a Wizard and Capture OnTheGo template wizards.

Alternatively, If you are familiar with HTML, you can open the Source tab of the Workspace and simply type the HTML to add the Div elements and classes.

Tip: Use Emmet to create a Grid layout on the source tab really fast. See Designing an Email templateWith the Designer you can design Email templates. It is strongly recommended to start creating an Email template with an Email Template Wizard, because it is challenging to design HTML email that looks good on all email clients, devices and screen sizes that customers use when they are reading their email.This topic explains why designing HTML email design is as challenging as it is, which solutions are used in the Email Template Wizards and it lists good practices, for example regarding the use of images in HTML email. It will help you to create the best possible Email templates in the Designer.HTML email challengesCreating HTML email isn't like designing for the Web. That's because email clients aren't like web browsers. Email clients pass HTML email through a preprocessor to remove anything that could be dangerous, introduce privacy concerns or cause the email client to behave unexpectedly. This includes removing javascript, object and embed tags, and unrecognized tags. Most preprocessors are overly restrictive and remove anything with the slightest potential to affect the layout of their email client. Next, the HTML has to be rendered so that it is safe to show within the email client. Unfortunately, desktop, webmail, and mobile clients all use different rendering engines, which support different subsets of HTML and CSS. More often than not, the result of these operations is that they completely break the HTML email's layout.Designing HTML email in OL Connect DesignerThe problem of HTML email is that preprocessing and rendering engines break the HTML email's layout. HTML tables, however, are mostly left untroubled. As they are supported by every major email client, they are pretty much the only way to design HTML emails that are universally supported. That's why Tables are heavily used to position text and images in HTML email.Nesting tables (putting tables in table cells) and applying CSS styles to each table cell to make the email look good on all screen sizes is a precision work that can be a tedious and demanding. Connect's Designer offers the following tools to make designing HTML email easier.Email templates: Slate and othersThe most obvious solution offered in the Designer is to use one of the templates provided with the Designer; see Creating an Email template with a Wizard. The layout of these templates has been tested and proven to look good in any email client, on any device and screen size. The Tables in these templates are nested (put inside another table) and they have no visible borders, so readers won't notice them.Tip: Click the Edges button on the toolbar to make borders of elements visible on the Design tab. The borders will not be visible on the Preview tab or in the output.LitmusThere are several tools to preview how email will be rendered on a variety of clients. We recommend using Litmus. Support for Litmus is integrated into the Designer; the Send Test Email dialog has an option to "Send to Litmus".EmmetEmmet is a plugin that enables the lightning-fast creation of HTML code though the use of a simple and effective shortcut language. The Emmet functionality is available in the HTML and CSS source editors of Connect Designer. Emmet transforms abbreviations for HTML elements and CSS properties to the respective source code. The expansion of abbreviations is invoked with the Tab key.In the Source tab of the Workspace, you could for example type div.row. This is the abbreviation for a <div> element with the class row. On pressing the Tab key, this abbreviation is transformed to: <div class="row"></div>To quickly enter a table with the ID 'green', one row, and two cells in that row, type:table#green>tr>td*2On pressing the Tab key, this is transformed to:<table id="green"> <tr> <td></td> <td></td> </tr> </table>Tip: For more examples, see this how-to: Streamline coding with emmet and custom abbreviations.All standard abbreviations can be found in Emmet's documentation: Abbreviations.To learn more about Emmet, please see their website: Emmet.io and the Emmet.io documentation: http://docs.emmet.io/.PreferencesTo change the way Emmet works in the Designer, select Window > Preferences, and in the Preferences dialog, select Emmet; see Emmet preferences.Using CSS files with HTML emailEmail clients do not read CSS files and some even remove a <style> tag when it is present in the email's header. Nevertheless, CSS files can be used with the Email context in the Designer. When generating output from the Email context, all CSS rules that apply to the content of the email can be processed and added either to the header of the email or to inline style properties as if local formatting was applied, depending on the Email section properties. See Email section properties.Using images in email campaigns: tipsHost images on a public serverIn the Designer you can add images as resource to the template document. When used in email messages these images are automatically embedded on sending the email. These embedded images appear instantly when viewing the message in your email client.There is, however, a downside to this method: embedded images can't be used to track email open rates. Email services like mandrillapp.com embed a tiny tracer image at the bottom of your message. Each time a recipient opens the email the tracer image (aka beacon image) is downloaded and yet another 'open' is registered. On mobile devices this happens when the user clicks the Display Images button. So, when tracking open rates in your email campaigns, store your images on a publicly-accessible server (preferably your own server- you could set up a process in Workflow to serve images and track open rates) or a reputable image hosting service, like photobucket.com. Don't forget to set the Alternate Text for your images on the Attributes pane.Do not capture your email in one big imageMost e-mail clients do not automatically download images, so do not capture your email in one big image. The recipient initially sees a blank message and probably deletes it right away.Do not resize images in your emailMany mail clients do not support image resizing and will show the image in its original dimensions. Resize the images before you link to or embed them.Use background images wiselyMost mail clients do not support background images: a very good reason to stay away from them in your mainstream email campaign. There is one situation in which they do come in handy. Both iPhone and Android default mail have solid CSS support and cover most of the mobile marketspace. You could use background images to substitute images when viewed on these devices. This is done by hiding the actual image and showing a mobile-friendly image as background image instead. This is a technique used in Responsive Email Design..

Other Foundation components

Foundation comes with many other components to improve and embellish Web forms and pages . A few examples:

An Accordion can be used to expand and collapse content that is broken into logical sections, much like tabs. It can be very useful on long forms.
An Off-Canvas menu lets the user navigate between level 4 headings (<h4>) in a Web page or form. Capture OnTheGo Template wizards offer the option to add this menu automatically.
Switches are toggle elements that switch between an Off and On state on tap or click. They make use of checkbox inputs (or radio buttons) and require no javascript. Their size can be adapted, to make them easy to use on a touch screen.

For a full overview and explanation of all Foundation components, see https://get.foundation/sites.html.