Responsive website CSS framework for Yii

Yii 1.1 General Discussion
1

Hi,

I am fairly new to yii and web development in general.

I have been looking to replace Blueprint CSS to a responsive. Is there an obvious choice?

I could not find much through google.

Thanks,

Vic

2

I use ZURB’s Foundation and found it quite easy to use with Yii. Nearly everything can be customized with CSS classes and the liquid grid system works very intuitive

3

Check this post: http://www.yiiframework.com/forum/index.php?/topic/24455-skeleton-instead-of-blueprint-self-rejected/

4

Thanks!!!

Can you please summarize the steps to replace blueprint by zurb? Is it difficult?

5

I actually did not replace blueprint with foundation, I started with foundation right from the beginning. But the grid syntax should be familiar (“span-7” =>“seven columns”) so it shouldn’t be too tough

6

Thanks!

So how did you start your application with ZURB?

Can you please mention few steps?Like where to place ZURB files before creating webapp by yiic? right?

7

I can’t explain everything in detail but the steps are as follows

  1. Create your webapp with yiic

  2. Download Foundation and put the css files in your css folder, deleting all the other css files

  3. Add a js folder, put all the foundation js in there

  4. Change your main layout file to NOT include any blueprint css files

  5. Change your main layout file to include all necessary foundation css and js files and make it HTML5 ready (changing doctype etc.). Just look at the foundation example page to get an idea

8

Perfect answer, exactly what I was looking for…I will try this

Two question have always bothered me, those are

  1. In the view files, I have certain div names for buttons, forms etc. for blueprint, when I implement ZURB do I need to change my view files’ div names??

  2. So all I need is one main ZURB layout?? No detection?

BR,

Vic

9

Well you’ll always have to change classnames for buttons etc. It’s like expecting changing PHP code to Ruby code without effort ;)

You can’t just switch a layout file. This is the first step. You’ll have to rework every view by yourself in order to make this work but believe me. Foundation is a really great tool and after 2-3 days you don’t want to switch back. It is the best responsive framework I know so far

10

Thanks Sir!!

So just to summarize

  • How to Change class names for HTML elements (is there a nomenclature on ZURB’s website for that?)

e.g. how do i implement zurb to cmenu widget

-Do I need any device detect function anywhere or ZURB’s responsiveness will take care of it.

  • Also do I make js folder in webapp/css or webapp/

-I pointed to js file as below. I can see a Zurb styled button but Ajax call is not working on it. Any clue?

[b]<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.’/css/js/foundation.js’);?>

<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.’/css/js/app.js’);?>[/b]

BR