DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Users manual

Using Foundation Framework

Once installed and configured, Foundation gives you a lot of CSS classes and JavaScript functions you can integrate to your website. In fact, you can use anything that is in the official documentation.

You simply need to integrate the needed markups and CSS classes to your HTML or Fluid templates. Here are some Examples.

However, to simplify the process, we already provide you some plugins you can directly integrate to the content of your website. Those plugins are listed when you insert a new content element, under the Foundation tab:

Insert content element

Visibility classes

Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.

Backend interface for visibility classes

Backend interface for visibility classes

Under the Access tab of any content element, you have checkboxes to show or hide the content element, as a function of screen size, orientation, or touch capability.

The first checkboxes are to hide elements based on the screen size. Then you can hide content element based on orientation detection. On desktop, the orientation is almost always reported as landscape. You should not check both orientations, otherwise it will always be hidden. Finally, you can hide or show on touch enabled screens (as determined by Modernizr).

The second set of checkboxes is for accessibility. Like the first row, it allows to hide content based on screen size. However, the element will still be visible on screen readers. For more informations, see visibility documentation.

Using Foundation in the RTE

cb_foundation provides some custom configurations for the RTE.

Configuration

To load RTE configuration, you must ensure that the useRTE option is checked in extension configuration. See Extension Configuration for more details.

If you want to use inline elements, such as kbd (keystrokes) or cite (citations), you need to check the Enable additional inline elements option in the rtehtmlarea extension configuration.

Types

text-left, text-right, text-center, and text-justify block styles are available, and used for text alignment.

subheading style is available for heading elements (h1 to h6).

circle, square, disc, and no-bullet styles re available for unordered lists (ul).

Long citations (blockquote) are styled using Foundation styles. However, to have access to the cite button (for citing the author of the quotation), you need to be sure Enable additional inline elements option is activated in rtehtmlarea configuration.

Tables

Tables styles are used. Nothing special to configure there.

Keystrokes

Keystrokes are styled. Button is available if Enable additional inline elements option is activated in rtehtmlarea configuration.

Buttons

Button style can be applied to any link. You can also configure button styles (tiny, small, large, expand, round, radius, secondary, success, alert, disabled). Finally, you can float it to left of right.

Labels

Label style can be applied to any text. You can also configure button styles (round, radius, secondary, success, warning, alert).

Panels

Panel style can be applied to containers (div). You can also apply callout to it. Finally, you can use radius on it.

Orbit Slider

Orbit is an easy, powerful, responsive image slider that allows users to swipe on touch-enabled devices.

Orbit responsive image slider screenshot

Orbit responsive image slider (screenshot)

This screenshot, borrowed from official Foundation website, shows an example orbit slider, with navigation arrows, bullets, slide number, caption, and progress bar.

Plugin settings are very similar to images content element. In fact, you can switch between orbit slider and images content elements without changing anything in the configuration. Optional captions can be added in the description field of each image. You can also set a optional link on any image.

You will find more information about the Orbit slider on the official Foundation documentation. To configure different options for the Orbit slider, see Orbit Slider configuration in the Administrator Manual.

Clearing Lightbox

Clearing makes it easy to create responsive lightboxes with any size image. It can be a good alternative to Orbit, when you need to handle variable-height content.

Clearing lightbox screenshot

Clearing lightbox (screenshot)

This screenshot, borrowed from official Foundation website, shows an example clearing lightbox.

Plugin settings are identical to those of orbit slider, and very similar to images content element. Again, you can change between Clearing Lightbox, Orbit Slider, and Images content elements without changing any other settings.

You will find more information about the Clearing Lightbox on the official Foundation documentation. To configure different options for the Clearing lightbox, see Clearing Lightbox configuration in the Administrator Manual.

Flexible Video

Flex Video lets browsers automatically scale video objects in your webpages. If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video using this plugin to create an intrinsic ratio that will properly scale your video on any device.

The plugin configuration is very similar to raw HTML content element. In the source field, you simply paste the embedding code you grab from YouTube, Vimeo, or any other source.

Flexible video plugin configuration

On the Appearance tab, there are two checkboxes. If widescreen is checked, the aspect ratio of the video is set to 16:9, otherwise is it 4:3. If vimeo is checked, the space reserved for play controls is removed, since the controls are inside the video frame on Vimeo.

You will find more information about Flex Video on the official Foundation documentation.

Magellan sticky navigation

Magellan is a style-agnostic plugin that lets you give your site sticky navigation. This fixed-position navigation helps users keep track of where they are on a page without scrolling.

You can insert the Magellan plugin on a page. By default, you get internal navigation (section index) for every content elements of all columns having Show in Section Menus option enabled (on Access tab).

Alternatively, you can directly insert the TypoScript object lib.cb_foundation.magellan in your TypoScript template. If you are using Fluid template, you can include the breadcrumbs in your template like this:

<f:cObject typoscriptObjectPath="lib.cb_foundation.magellan" />

Panels

A panel is a simple, helpful Foundation component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section.

We simply added panels as frame style for content elements. It means you can easily add the panel around any kind of content element. Four panel styles are available: panel, panel with radius, callout, and callout with radius.

Panels in Indentation and Frames settings