FP Foundation Assistant

FP Foundation Assistant combines the powers of the responsive front-end framework Foundation and WordPress.

Plugin Features

  • Supports – Foundation 6 (including Flex Grid and RTL), 5, 4 and 3;
  • Includes – 19 Shortcodes (including OwlCarousel shortcode as an alternative to the built-in Orbit) and Foundation Icon Fonts 3; both have TinyMCE editor buttons;
  • Provides an option to specify a time period to have Foundation loaded on specific posts or pages.
  • Provides an option to load custom css file from the active theme folder.

Plugin Shortcodes

The shortcodes for the different versions have the same tags but different features. This means that the main shortcodes tags are compatible but different features will be available depending on the version. Find more information by following the link:

FP Foundation Assistant – Shortcodes Documentation


:: Grid
:: Visibility Classes
:: Float Classes
:: Tabs
:: Accordion
:: Orbit Carousel
:: OwlCarousel
:: Menu
:: Nested Menu
:: Buttons
:: Callout
:: Dropdown
:: Flex Video
:: Interchange
:: Label
:: Progress
:: Reveal
:: Tooltip
:: WP Query

Foundation Features

General

  • Mobile-first – larger devices will inherit the code for small screens and can be customized as needed;
  • Float Grid – responsive 12-column grid with options for offsetting, centering, source ordering and more;
  • Layout options – visibility and float classes;
  • Containers – accordion, tabs, callout/alert, dropdown, reveal;
  • Navigation – menu, pagination, breadcrumbs;
  • Media – flex video, labels, carousel, progress bar;

 

Foundation 6

  • Float Grid – block grid has been merged into the main grid;
  • Flexbox-powered grid, as an alternative to the float grid – including extra features as automatic sizing and vertical/horizontal alignment;
  • JavaScript – Abide, Accordion Menu, Accordion, Drilldown Menu, Dropdown Menu, Dropdown, Equalizer, Interchange, Magellan, Off-Canvas, Orbit, Reveal, Slider, Sticky, Tabs, Toggler, Tooltip;
  • Right-to-Left Support
Foundation 6 – Official Documentation

 

Foundation 5

  • JavaScript – Abide, Accordion, Alerts, Clearing Lightbox, Dropdown, Dropdown Buttons, Equalizer, Interchange, Joyride, Magellan, Off-Canvas, Orbit, Range Sliders, Reveal, Split Buttons, Tabs, Tooltip;
Foundation 5 – Official Documentation

 

Foundation 4

  • JavaScript – Abide, Accordion, Alerts, Clearing Lightbox, Dropdown, Interchange, Joyride, Magellan, Orbit, Reveal, Tabs, Tooltip;
Foundation 4 – Official Documentation

 

Foundation 3

  • JavaScript – Accordion, Alerts, Clearing Lightbox, Joyride, Magellan, Orbit, Reveal, Tabs, Tooltip;
Foundation 3 – Official Documentation

Installation

Installation


Installing “FP Foundation Assistant” can be done either by searching for “FP Foundation Assistant” via the “Plugins > Add New” screen in your WordPress dashboard, or by using the following steps:

1. Download the plugin via WordPress.org
2. Upload the ZIP file through the ‘Plugins > Add New > Upload’ screen in your WordPress dashboard
3. Activate the plugin through the ‘Plugins’ menu in WordPress

 

Configuration


1. Go to “Settings > FP Foundation Assistant” and choose whether you want to load foundation. In case, you are already using a Foundation-based theme, you can disable it and use only the shortcodes. A button for the shortcodes will appear in the Visual section of the Editor once you activate the plugin.

2. Choose the Foundation version you want to use or are currently using regardless of whether you choose to load Foundation or not. The shortcodes for the different versions have the same tags but different features.
This means that the main shortcodes tags are compatible but different features will be available depending on the version. For more information, please, read the documentation.

Shortcodes Documentation
Features List

3. Choose whether you want to load the Foundation Icon Fonts 3 and OwlCarousel. The icon font will have a button appear in the Visual section of the Editor. OwlCarousel provides a more flexible option to the built-in Foundation carousel, letting the user choose to have a number of columns. Both features can be disabled.

4. To have Foundation loaded on specific posts or pages, you can specify a period. All posts and pages during that period will have Foundation loaded. This is helpful if, you are migrating to a different theme but still want to use the Foundation functionality on previous posts or pages.


Custom CSS

If you want to use custom CSS, you can create a file in your active theme: ‘yourtheme/fp-foundation-assistant/fp-assistant-custom.css’ The plugin will load it automatically.