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:
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.
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.
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.
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.
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.
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.