Templates for using Foundation 4 with Yii and optional Giix templates if you're a Giix fan.

Being a fan of Yii, Giix and Foundation, I decided to combine them all for my latest project and share the result.

No extensions, components, or modules. Just a set of templates and some css and js from Zurb.


Foundation from Zurb is a responsive (same site scales from mobile to widescreen) front-end framework using html5 css and javascript (jQuery or Zepto). Read up on the latest UI goodies that come with it on their website. Good for quick prototyping and then as a responsive base to build from.

WARNING version 4 of Foundation does not support IE8 or lower. F3 does support IE8 but not IE7 - checkout the foundation3 Yii extension. And Foundation 2 supports IE7 - se the foundation Yii extension.


Yii 1.1 - untested on earlier versions, may work.

Foundation 4 from Zurb. Built and tested with version 4.2.1, I recommend grabbing the latest version for the latest bug fixes and UI enhancements.

Optionally: Giix. Templates for use with Giix are included but you don't have to use them if you don't use Giix.


The contents of the css and js folders from the Foundation download go into the css and js folders of your application root folder.
./css/foundation.min.css, foundation.css, normalize.css
./js/foundation.min.js, foundation/, vendor/

Extract this extension to your application root.

Then set the theme to foundation4


When generating your crud code with Giix, ensure you change the code template to foundation4.

NB To enable some of the Foundation UI features you'll need to uncomment the relevant js libraries in ./themes/foundation4/views/layouts/main.php



Or modules for the older versions of foundation for IE8/7 Support:
* *

Total 5 comments

#16657 report it
Rodrigo Coelho at 2014/03/16 03:52pm

The giix code on GitHub is not the release version. Please download it from its extension page:

#16656 report it
LarryTX at 2014/03/16 03:32pm
Conflicts with giix 1.10

giix v. 1.10 GithHub introduces a totally new directory structure for giix. When used with this extension, it generates an error message: GiixCrudGenerator cannot find the requested view "ext.giix-core.giixCrud.templates.default.auth.auth_none". That's largely because there's no giix-core directory any more. I'm afraid the extension either needs to be updated or needs to post a warning that it won't work with giix 1.10.

#16029 report it
TAQTICA at 2014/01/12 10:42am
JQuery conflict with several Foundation features

Hi, I did a similar integration than the described in this article. But I found trouble using some Foundation features (for example Accordion). These features require Jquery.

To include Jquery in the theme avoiding conflict with some Yii widgets, the solution is to include the following code in the theme main template:

<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
#14731 report it
LarryTX at 2013/09/06 08:56am

Foundation brings a great deal of beauty and user-friendliness to Yii, and this extension makes it even easier. A critical part of the Web interface in most modern applications is a WYSIWYG editor, and for that, CKEditor is best in my opinion. Unfortunately, when I combine Foundation4Giix and every one of the many Yii extensions for CKEditor, all I get is a large, blank area where the CKEditor should be. Firebug doesn't show any JavaScript errors in the console, and I don't get any error messages on screen. Obviously, something is going on because there is this big blank area on the page -- with nothing displaying in it.

Has anyone been able to get CKEditor working with Foundation4Giix? Or any other WYSIWYG editor? I notice that KindEditor may be another option, but I'm somewhat leery of it because all the documentation is not available in English and because my of the tooltips are not in English even though I downloaded the English version.

#13552 report it
Rodrigo Coelho at 2013/06/05 01:57pm
Nice work!

That's a good idea, StephenM. I added a link to your extension on giix's page.

Leave a comment

Please to leave your comment.

Create extension