A responsive Yii theme utilising all the goodness of H5BP and Twitter Bootstrap.
After trying various Yii Bootstrap extensions, I decided to create a simple theme that uses Yii's standard components and widgets.
The theme takes advantage of the fantastic HTML5 Boilerplate (H5BP) with a modified .htaccess to enable pretty urls in Yii.
H5BP's best practices and .htaccess can dramatically increase the performance of your website. Try it in YSlow!
Update ¶
So you want to use it with CGridView?
Download the pager extension here:
http://www.yiiframework.com/extension/bootstraplinkpager/
See the comments below for example.
Requirements ¶
Tested on Yii 1.1.10
Usage ¶
Create a new webapp in Yii.
Copy all files from archive, overwriting config/main.php
Open .htaccess in your root folder and set 'RewriteBase /base/' to your application's root folder or '/' if the app is in your webroot (typical in production).
Resources ¶
Notes ¶
By default I make the assumption that you are using Apache and the .htaccess enables URL Rewriting. The theme can be used without pretty urls by deleting/renaming the .htaccess file and modifying the urlManager properties in the main config file.
Currently there is no Gii generator for the view files. I may look into adding this when I have more time, or you're welcome to get involved yourself. Instead, you should create the views as usual and copy them over to the theme folder for modification. This has the benefit of having a fallback to Yii's standard theme.
You will see how I have modified the standard contact and login pages which should help you on your way. Compare them side by side and see how I have added the necessary css classes to the standard widgets. I have also removed the divs that wrap the input fields since they're not needed and the css class 'row' conflicts with Bootstrap's own.
EDIT: This generator may work: http://www.yiiframework.com/extension/giiplus/ but I haven't tried it. A brief look at the source from the demo shows some remnants of the old Blueprint classes.
Tips ¶
Don't modify the Bootstrap files. Use the included styles.css and script.js so that you can easily update Bootstrap when necessary. However, I have combined bootstrap.min.css and bootstrap-responsive.css as bootstrap-and-responsive.min.css. Why make 2 trips to the server? You will need to be aware of this if you update the Bootstrap files.
License ¶
Free to use under the terms of any respective Yii, H5BP or Twitter Bootstrap Licenses.
The logo license details can be found here: http://www.yiiframework.com/logo/
Very nice theme.
Thank you very much for doing the theme. I've been searching for something like this.
Re: Very nice theme.
Hi imre,
Thanks for your comments. I hope the theme gives you a solid 'base' from which to start your Yii projects.
I chose to instruct users to create a new webapp when using the theme, in which case there is no reason not to overwrite the config file.
I really don't want to support issues where the user can't get it to work with their existing setup.
Making a theme is somewhat trivial. Getting it to work with other modules or third party views can be tiresome.
Reading the API documentation will tell you how to override the default CSS and indeed, prevent Yii from autoloading CSS that is no longer required.
CGridView itself is quite easy, example below...
The problem is CLinkPager (pagination) doesn't play nicely because the CSS classes that it outputs are set as constants.
I have created a new extension to CLinkPager.
Get it here: http://www.yiiframework.com/extension/bootstraplinkpager/
The CGridView Example
Just drop this in a view to test.
<?php $testArray = array( array( 'id'=>'1', 'name'=>'Alpha', ), array( 'id'=>'2', 'name'=>'Bravo', ), array( 'id'=>'3', 'name'=>'Charlie', ), array( 'id'=>'4', 'name'=>'Delta', ), array( 'id'=>'5', 'name'=>'Echo', ), array( 'id'=>'6', 'name'=>'Foxtrot', ), array( 'id'=>'7', 'name'=>'Golf', ), array( 'id'=>'8', 'name'=>'Hotel', ), ); $dataProvider = new CArrayDataProvider( $testArray, array( 'sort'=>array( 'attributes'=>array('id', 'name'), 'defaultOrder'=>array('id' => false), ), 'pagination'=>array( 'pageSize'=>5, ), )); $this->widget('zii.widgets.grid.CGridView',array( 'dataProvider' => $dataProvider, 'cssFile' => false, //prevent Yii autoloading css 'itemsCssClass' => 'table table-striped', // override default css 'pagerCssClass' => 'pagination', // override default css 'summaryCssClass' => 'alert alert-info', // override default css 'pager' => array( 'class' => 'bootstraplinkpager', // use extended CLinkPager class 'cssFile' => false, //prevent Yii autoloading css 'header' => false, // hide 'go to page' header 'firstPageLabel' => '<<', // change pager button labels 'prevPageLabel' => '<', 'nextPageLabel' => '>', 'lastPageLabel' => '>>', ), )); ?>Have fun with Yii :)
Nice!!
First thing I'll always do is bring in these two frameworks! Thanks! Can't wait to try it out.
Looks great
Hi Outrage
Starting my second yii project and decided bootstrap looked pretty cool. Wasn't aware of HTML5 Boilerplate before reading about your extension/theme and now that I am aware it doesn't seem logical to go on without it.
Does your extension miss anything available in yii-bootstrap extension (certain widgets perhaps?). If so then any reason for or against using both together?
Without delving in deeply yet am guessing the only extra work (for me) with standard gii generated code is applying the correct css classes in the view files?
Am guessing yii-bootstrap (again without looking deeply) perhaps provides some additional widgets?
By the way, have installed and looks great!
Re: Looks great
Hi andrew1,
I feel the same about H5BP, it seems silly not to use this as the base for all of my HTML5 projects. Bootstrap too, although Foundation3 looks amazing... I just don't think it will get the same following and third party tools and support.
With regards using the theme along with yii-bootstrap extension, I haven't tried it out yet.
What I have tried are the widgets from the yii-bootstrap-widgets extension. The theme and the widgets from my limited testing, seem to work nicely together.
When installing the widgets, I didn't follow the instructions to add the css to layouts/main.php, because obviously that is already done in the theme.
The other thing to think about is that certain widgets will add bootstrap.js to the head of the page. Of course this is also already included. Fortunately the author has made it easy to prevent this, at least in the widgets I looked at:
/* * JS File to tab through the pages * * If its set to false, no file will be included */ public $jsFile = null;By all means, try it with yii-bootstrap... I am guessing there may be a few issues to overcome, but the extension mentioned above seems to work well.
I have been working on polishing the theme and when I find time I will have a deeper look at yii-bootstrap, because we're definitely missing a Gii view generator. Some things to tidy up though before I update.
Thanks for your comments andrew1.
Trying bootstrap extension in conjunction
Hi Outrage
Great.
Researching the bootstrap extensions has given bootstrap that has 10 times the downloads of yii-bootstrap or yii-bootstrap-widgets and seems to be very active. Will try yii-bootstrap-widgets if bootstrap lacks. Will post evaluation but so far no issues or obvious conflicts.
.span12 is incorrect
Hi,
After trying this extension on new app, I have sidebar drop to bottom of content so I check the css. If you have span1 for 70px, margin 30px, then I guess span12 has to be 1200px and not 1170px;
Multilevel Menu is not working
Hi there!
When trying to implement a multilevel menu like this:
<?php $this->widget('zii.widgets.CMenu',array( 'items'=>array( array('label'=>'Products', 'url'=>array('product/index'), 'items'=>array( array('label'=>'New Arrivals', 'url'=>array('product/new')), array('label'=>'Most Popular', 'url'=>array('product/index')), array('label'=>'Another', 'url'=>array('product/index'), 'items'=>array( array('label'=>'Level 3 One', 'url'=>array('product/new')), array('label'=>'Level 3 Two', 'url'=>array('product/index')), array('label'=>'Level 3 Three', 'url'=>array('product/index'), 'items'=>array( array('label'=>'Level 4 One', 'url'=>array('product/new')), array('label'=>'Level 4 Two', 'url'=>array('product/index')), )), )), )), array('label'=>'Home', 'url'=>array('/site/index')), array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')), array('label'=>'Contact', 'url'=>array('/site/contact')), array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest), array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest) ), 'htmlOptions'=>array('class'=>'nav'), )); ?>I did not get the result as expected.
Could some one give me some suggestions?
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.