Bigger style sheet, less HTTP requests, faster loading

Download as .zip Download as .tar.gz View on GitHub

CSS One, unify your your style sheet and it's images into one file

June 27, 2012

CSS One has been tested with jQuery UI release themes and custom themes; to create custom themes, use theme roller; but other Javascript framework CSS files should work too if the images are in the same directory as the style. Look at the index.php to get an idea of how to use this code for your widget or web app. The demo in index.php has an example of how to impliment multiple jQuery ui themes to your web applications; I simplely reused the atom feed and a little XSLT to made a select box that would load the new style.

CSS One will do

CSS output example

for the best performance, please keep your styles organized in different folders with their images. view the jQuery UI css folder (found in the unzipped release folder) for the best example to get the best results.

$css=new css_one();

HTML5 / xHTML output example

$css=new css_one();
$css->title="CSS One ";
$css->description="This is a jQuery UI CSS theme testing tool";        
$css->keywords="HTML5, css, base64 images, phpclasses";
$css->add_atom('Test jQuery UI',$_SERVER['SCRIPT_NAME'].'/feed.atom'); 
echo $css;

CSS files often define styles that reference images and other resources that are available in separate locations.

This class can process one or more CSS style sheets in such way that it retrieves the information of images and embed them in the processed CSS output, so all CSS and image data is included in a single style sheet.

Manuel Lemos

View Karl Holz's profile on LinkedIn