Skip to content


Subversion checkout URL

You can clone with
Download ZIP
JavaScript PHP
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Copyright (c) 2009 Chad Auld ( Licensed under the MIT license


Lissa is a generic CSS and JavaScript loading utility. Lissa is an extension of the YUI PHP Loader aimed at solving one of the current loader limitations; combo loading. YUI PHP Loader ships with a combo loader that is capable of reducing HTTP requests and increasing performance by outputting all the YUI JavaScript and/or CSS requirements as a single request per resource type. Meaning even if you needed 8 YUI components which ultimately boil down to say 13 files you would still only make 2 HTTP requests; one for the CSS and another for the JavaScript. That's great, but what about custom non-YUI resources. YUI PHP Loader will load them, but it loads them as separate includes and thus they miss out on benefits of the combo service and the number of HTTP requests for the page increases. Lissa works around this limitation by using the YUI PHP Loader to handle the loading and sort of YUI and/or custom resource dependencies and pairs that functional with Minify.

You can read about the benefits of Minify on their project page, but to sum it up.... we get automatic minification, compression, caching, proper setting of content headers, etc. This means that you now have the potential to serve up all JavaScript and CSS requirements for a page with just 2 optimized requests.


  1. Place Lissa somewhere under DOCUMENT_ROOT
  2. Alter includes/lissa/ as needed
  3. Set the proper $min_cachePath in includes/minify/min/config.php (and perhaps $min_documentRoot if things don't work as is)
  4. Drop additional YUI releases into the includes/js/yui/lib as needed. YUI 2.8.0r4 is supplied by default.
  5. Drop corresponding YUI Metadata files into the includes/js/yui/lib/meta folder for each new YUI release you add (see step 4). The metadata files are shipped with YUI PHP Loader and are located in the lib/meta folder.


OK enough already... How do you use it? Simple.

//Grab the class
require 'includes/lissa/class.lissa.php';

//Create a custom module metadata set
$customModules = array(
    "customJS" => array(
        "name" => 'customJS',
        "type" => 'js', // 'js' or 'css'
        "fullpath" => 'includes/js/example.js',
        "requires" => array("event", "dom", "json")
    "sampleData" => array(
        "name" => 'sampleData',
        "type" => 'js', // 'js' or 'css'
        "fullpath" => 'includes/js/sample_data.js',
        "requires" => array("customJS")
    "customCSS" => array(
        "name" => 'customCSS',
        "type" => 'css',
        "fullpath" => 'includes/css/example.css'

//Get a new Lissa instance which includes our custom metadata along with the base YUI metadata
$loader = new Lissa("2.8.0r4", null, $customModules);
$loader->load("fonts", "sampleData", "customCSS");

//Then just output the link and/or script nodes by calling one of three methods; scripts, css, tags


With the setup show above we'll end up with the following to includes:

If you are paying close attention you'll notice the handoff to Minify and the comma separated list of resources that will be minified, combined, cached, and served.


For a simple example see index.php.

For a more complex integration done around the same idea check out the Aliro Resource Loader. Lissa is a more generic spinoff of the aliroResourceLoader class.


Take Lissa and work it into your own project. You'll most likely change things along the way to fit your environment/project, but hopefully this will serve as solid starting point. Stop reading, start coding.

Something went wrong with that request. Please try again.