UPD Today you can simply use HTTP/2

No more need to think of work arounds. Simply turn on HTTP/2 for your web server

• Nginx https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-with-http-2-support-on-ubuntu-16-04
• Apache https://httpd.apache.org/docs/2.4/howto/http2.html

Introduction

Bootstrap CSS Sprite is a PHP library, which provides displaying of multiple images as a signle sprite in a Bootstrap 3 style. E.g. you have a set of images one of which is named cat.png. To display this image you can just use tag <span> with CSS class img-cat as Bootstrap 3 does: <span class="img-cat"></span>. A nice bonus: the image's height and width are set automatically in CSS file.

Benefits

• One image file instead of multiple: one request to server – less traffic and time.
• Image hover first time without blinking and "jumping".
• No need to define size for each image in HTML templates - library will do it for you in generated CSS file.
• Less HTML code: <span class="img-cat"></span> instead of

  <img src="<?=$this->theme->baseUrl?>/images/cat.png" style="width: 64px; height: 64px;" />

  It really saves your time!

Usage

Here is most simple example how to use the library. This code sample takes all images (jpg, jpeg, gif, png) from ./images/source/ directory. Than it merges all these images into one - sprite.png and generates CSS file - sprite.css. The CSS file contains classes for all merged files. These classes define source of image, it's size and hover behavior.

$sprite = new BootstrapCssSprite(array(
    'imgSourcePath' => './images/source',
    'imgSourceExt'  => 'jpg,jpeg,gif,png',
    'imgDestPath'   => './images/sprite.png',
    'cssPath'       => './css/sprite.css',
    'cssImgUrl'     => '../images/sprite.png',
));
$sprite->generate();

It will look the same way for Yii component. Just copy YiiBootstrapCssSprite.php file to /extensions/ and add this component in /config/main.php

'components' => array(
    ...
    'sprite' => array(
        'class'         => 'ext.YiiBootstrapCssSprite',
        'imgSourcePath' => '/path/to/images/source',
        'imgSourceExt'  => 'jpg,jpeg,gif,png',
        'imgDestPath'   => '/path/to/images/sprite.png',
        'cssPath'       => '/path/to/css/sprite.css',
        'cssImgUrl'     => '/path/to/images/sprite.png',
    ),
    ...
)

And generate sprite anywhere you want:

abstract class BaseController
{
    public function init()
    {
        ...
        if (APP_ENV === APP_ENV_DEV) {
            Yii::app()->sprite->generate(); // Regenerates sprite only if source dir was changed
        }
        ...
    }
}

:hover :active :target

If you want your picture to be changed on mouse hover, you just need to put cat.hover.png image file near cat.png. And that's all! In case when you need to change picture when it's parent element mouseovered (not picture itself), you should add hover-img CSS-class to the element:

<button class="btn hover-img"><span class="img-cat"></span> My Cat</button>

Also you can trigger hover event manually by adding hover CSS-class to your picture:

$('.img-cat').addClass('hover')

The same is for :active and :target pseudo-classes.

:checked :disabled – Custom Checkboxes

If you want to implement some custom checkbox than :checked and :disabled pseudo-classes will be useful for you. Again, you will need source file checkbox.png and one file for each pseudo-class: checkbox.checked.png and checkbox.disabled.png. Here's how you HTML will look:

<label class="checkbox-custom">
    <input type="checkbox" />
    <span class="img-checkbox"></span>
</label>

Also you have to write a little extra CSS to hide native checkbox control:

label.checkbox-custom > input {
    display: none;
}

Contributors

Oleg Poludnenko oleg@poludnenko.info

Bugs & Issues

Please feel free to report any bugs and issues to me, my email is: oleg@poludnenko.info

Contributing

Somebody who want to contribute to the project, may help us by doing these:

• Implement a component for one of PHP frameworks (Yii, Zend, Symfony and others).
• Port the library to other web-related languages (Ruby, .Net, Java, etc.).