CSS structure and managing

Yii 1.1 General Discussion
1

Hi,

I’m going to start my first Yii application and would like to modify the CSSs files but can’t find anything that explains the CSS structure and how to manage them.

I took a look at the default application generated with yiic but I can’t understand how its CSSs work.

Maybe I lost some useful link to do this :)

Thank for the forthcoming replies!

Bye!

2

I’d be interested to hear that as well as I noticed the same lack of info about “working with CSS in Yii”.

I think that in a nutshell:

  • CSS files that belong to either specific view or layout should be included and referenced from within that layout. See main.php layout generated by yiic for the generic app it creates.

  • More specific CSS inclusion can be triggered by calling some methods in classes which I don’t remember by heart (nor did I try this yet).

3

The most important thing to know about the CSS structure, as seen in the yiic generated web application, is that it uses the BluePrint CSS framework. :)

It’s a grid based CSS framework, which makes it much, much quicker to generate wholesome layouts.

BluePrint home page

I personally like it a lot.

Some webdesigners view grid based layouts/frameworks as only a tool from which you create your own css from, but I find that it helps me (a non-designer) to create coherent looking sites.

Here’s their quick-start tutorial:

blueprint-css/wiki/Quick-start-tutorial

4

And some really nice cheat-sheets:

http://www.garethjmsaunders.co.uk/blueprint/

Print one out and hang on your wall. B)

5

Nice!

Thanks!

6

Thanks a lot Jacmoe!!!

P.S. your avatar reminds me that I used it too time ago! Nice one! :D

7

Ok,

I’ve read the blueprint tutorial and looks like it’s very simple, but can’t understand why in the default application generated by yiic the HTML code doesn’t have any “span-x” class or similar.

For example, there’s the “header” id without any specified blueprint classes but anyway it’s got its width that’s not specified anywhere.

Is it because blueprint make it using the default size so there’s no need to specify it?

8

The generated app does not use a lot of Blueprint, to be honest. :)

Only when using the two column layout (column2.php).

The main.php in views/layouts only has a


<div class="container" id="page">

, that’s Blueprint which is in app_root/css/screen.css.

Then the content itself is rendered in another


<div class="container">

.

The two column layout (views/layouts/column2.php) has a grid:


<?php $this->beginContent('//layouts/main'); ?>

<div class="container">

	<div class="span-19">

		<div id="content">

			<?php echo $content; ?>

		</div><!-- content -->

	</div>

	<div class="span-5 last">

		<div id="sidebar">

		<?php

			$this->beginWidget('zii.widgets.CPortlet', array(

				'title'=>'Operations',

			));

			$this->widget('zii.widgets.CMenu', array(

				'items'=>$this->menu,

				'htmlOptions'=>array('class'=>'operations'),

			));

			$this->endWidget();

		?>

		</div><!-- sidebar -->

	</div>

</div>

<?php $this->endContent(); ?>

All the Yii-specific css is in css/main.css, so take a look at that. :)

9

Just wanted to add a great tutorial:

tablecss-argument-an-introduction-to-blueprintcss/

The overall hottest tip from that tutorial is this:

I’ve had no end of trouble with BluePrint because I broke that rule!

Now I take care not to mix layout and style in the same divs - except for BluePrint built-in styles, of course.

I hope this ends up helping someone. (As it did me) :)

10

Thanks for the reference.

I’m not a CSS expert but I think that inline styling should be avoided in any case. Do it all in CSS. just use divs classes. This way, separate styling from layout altogether. I think this is a good general recommendation regardless of BluePrint.

11

@jacmoe thanks for the link to the cheat sheets.

The link for version1.0 doesn’t work on the site (malformed url)

This link works

doodle