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 ¶
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.
Requirements ¶
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.
Usage ¶
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.
./themes/foundation4/...
./protected/extensions/giix-core/giixCrud/templates/foundation4/...
Then set the theme to foundation4
./protected/config/main.php
'theme'=>'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
Resources ¶
Or modules for the older versions of foundation for IE8/7 Support:
Nice work!
That's a good idea, StephenM. I added a link to your extension on giix's page.
CKEditor
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.
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'); ?>
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.@LarryTX
The giix code on GitHub is not the release version. Please download it from its extension page:
http://www.yiiframework.com/extension/giix
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.