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 Zurb 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 http://foundation.zurb.com/learn/about.html.

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 PReS Connect, Foundation 6 will be included. If you'd rather start using the newest Foundation files right away, you have two options:

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 this website: http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.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 Emmet.

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 (v. 5), see this web page: http://foundation.zurb.com/sites/docs/v/5.5.3/.