Get Started

Get Started

How to configure YiiFoundation for your project!

Get Started

How to configure YiiFoundation for your project!

← Back to Home


Download the package and unzip its contents in your extensions folder. We highly recommend the use of Composer to manage your dependencies. For those having problems, we are planning to do exactly the same thing we did for YiiWheels at Yiinitializr site.

Download Latest Version

Fastest way to get started: get the extension and unzip its contents in your extensions folder and configure it.



You can also clone the git repository by heading to the GitHub project page and following the instructions there.

YiiFoundation on GitHub


Within the download you'll find the following file structure and contents, logically grouping assets, helpers and widgets in respective directories.

Unzip the contents of the package under protected/extensions/yiifoundation. The folder structure should now be the following (if you are using Composer that would be within the vendor folder:

      └── extensions
          └── yiifoundation
              ├── assets
              │   ├── css
              │   ├── images
              │   └── js
              ├── enum
              ├── fonts
              ├── helpers
              ├── tests
              └── widgets

Now that we have placed the extension, please open your application configuration file in protected/config/main.php and modify it according to the following example:

// main configuration
return array(
    // path aliases
    'aliases' => array(
        // yiifoundation configuration
        'foundation' => 'application.extensions.yiifoundation',

And that's it! Yeah, there are no components on this library. It is helper based. If you use one of the widgets, it will automatically register the required scripts by calling the Foundation::register method of the Foundation helper.

heads up! If you are using just helpers, you will have to register the files your self!. Check Foundation helper docs for more information.

What's included

YiiFoundation will also have its own version of YiiWheels. At least thats the plan. Nevertheless, we've covered all the great functionality of ZURB Foundation Framework


Alert Alert renders a Foundation alert
ArrayHelper ArrayHelper has array utility methods
Button Button helper renders different foundation buttons
Foundation Foundation helper contains functions to work with the core assets.
Html Html holds those modified methods from CHtml required for Foundation helpers and/or widgets.
Icon Icon helper contains methods to work with Foundation icons -ie assets registrations (fonts), icon rendering.
Nav Nav Helper renders different type of navigation markups.
Panel Panel renders foundation panels
Pricing Pricing renders foundation pricing tables
Progress Progress helpers deals with the different progress bars of Foundation.
Typo Typo facilitates the rendering of HTML components as specified on Typography section at Foundation's site. Most common are not included as we believe they can be easily done with [[\CHtml]] yii helper class.


Enum Enum holds most of the Foundation classes


InvalidConfigException InvalidConfigException represents an exception caused by incorrect object configuration.

Base Classes

Input Input is the base class for widgets that collect user inputs.
Widget Class Widget


Alert Alert renders a Foundation style alert from messages stored on user session variables -named Flash messages.
Breadcrumbs Breadcrumbs renders a Foundation breadcrumb
Clearing Clearing creates responsive lightboxes with any size image
Dropdown Dropdown renders a foundation dropdown. It differs from MenuDropdown helper.
FlexVideo FlexVideo embeds a video from YouTube, Vimeo or another site that uses iframe, embed or object elements, creating an intrinsic ration that will properly scale the video to any device.
Interchange InterChange utilizes the data-interchange attribute for specifying your media queries and their respective images.
JoyRide JoyRide renders a foundation tour plugin.
Magellan Magellan renders the Magellan Foundation 4 plugin. Magellan is a style agnostic plugin that lets you style a sticky navigation that denotes where you are on the page.
Orbit Orbit generates a foundation orbits.
Pager Pager renders a Foundation pagination component.
Reveal Reveal renders the markup for the modal dialog plugin of Foundation
Section Section renders Foundation sections, which are similar to tabs as a way to selectively show a single panel of content at a time. Sections replace Accordion, Tabs, Vertical Nav & Horizontal Nav.
SwitchButton SwitchButton renders a foundation switch.
Tooltip Tooltip renders Foundation tooltips
TopBar TopBar widget renders a nav HTML component.

What's next?

Head the docs for examples or take a look at the API.

Proudly Developed and Hosted by