CSS Library

Category:Libraries::External

So this is actually attempt number two for this library. The first one worked OK for me, but broke for just about anyone else. This one should work much better all around.

Here's what it does: It collects CSS files into 'bundles,' it allows you to add CSS files from any model/controller/library/sub-view/wherever, it makes sure you never include the same CSS file more than once on the same page, and (depending on config) it will compress and GZIP your CSS.

'Bundles' are new in this version. Bundles are very similar to using a 'master CSS file.' For those who are unfamiliar, a master CSS looks something like this:

@import url("reset.css"); @import url("form.css"); // etc...

The purpose of a master CSS file is to allow you to break your CSS up into more meaningful chunks.

To use bundles, simply define them in the config/css.php file. Calling the library to link any of the individual CSS files in the bundle will cause the entire bundle to be linked. This allows you to break your CSS into small chunks without the overhead of linking lots of small CSS files (very similar to a master CSS file). You can do some pretty confusing things if you include the same CSS file in more than one bundle.... I recommend NOT doing that (I've never found a good use for it anyway).

Support was added for the 'media' attribute on linked CSS. I haven't tested this extensively. Give it a try... tell me what happens.

This version adds GZIP but does much less aggressive compression than version 1 (the aggressive compression in version 1 created some problems). I was very surprised at how much GZIP helped with download times.... fabulous! There are two ways to implement GZIP for CSS. The more sophisticated one uses changes to .htaccess, but it does not work on IIS servers under certain configurations (so I am told) and not everyone has access to .htaccess. So I chose the less sophisticated but more reliable method of changing the CSS files into PHP files and adding some code at the head of the file.

I've tested this in Firefox 2, IE 7, Safari 3 and Opera 9.

If you are using my Site Library (posted elsewhere) to keep track of paths and urls, then the config is even easier...most of the parameters can be left as empty strings.

Here's how it works. The library maintains a queue (as opposed to a stack) of CSS files that you have requested. If you are using bundles, then when you add a CSS file that is in a bundle, it adds the entire bundle to the queue. If you try to add the same CSS file twice, it is ignored.

Ignoring multiple requests is a great feature. I use it to advantage all the time in my form library... every form field simply links a CSS file that contains what it needs, I have a bundle of CSS files for general forms and a couple other CSS files for form field types that use a lot of CSS but are rarely used (like file uploads). The CSS Library keeps it all sorted out for me.

When you call $this->css->getlinks(), the Library does it's thing. If bundling and gzipping are both turned off, then it just produces links to all the CSS files - use this for debugging your CSS. If bundling OR gzipping is turned on, then it writes files into the the css subdirectory of the cache directory (a little foreshadowing of a future Library). If gzipping is turned on, then these are PHP files, otherwise they are CSS files. Finally, it generates links to the files just created.

Getting started:

1. put config/css.php in your config directory
2. put libraries/css.php in your libraries directory
3. edit config/css.php - there are lots of comments in there
4. create directories for the cached files like this: your_cache_directory_path/css and change the permissions so PHP can write to it
5. autoinclude the css library (if you are using the Site Library, be sure to include the Site Library before the CSS Library)
6. add CSS links from your controllers/models/libraries/subviews/wherever like this:

$this->css->addlink('form');

7. add the following code to your template (where you would normally put the links to your CSS files)

<?php $ci=& get_instance(); echo $ci->site->getlinks(); ?>

That's it. If you like this Library, stay tuned because I'm working on one to do the same sorts of things for javascript...

Enjoy. As always, constructive comments and suggestions are welcome.

=dave= File:config_css.php.zip File:libraries.css.php.zip