PHP Classes

CSS One: Combine CSS and images into a single stylesheet

Recommend this page to a friend!
     
  Info   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 1,002 All time: 3,644 This week: 79Up
Version License PHP version Categories
cssone1 1.3MIT/X Consortium ...5.2HTML, PHP 5
Description 

Author

Karl Holz

This class can combine multiple CSS files and referenced images into a single stylesheet.

It takes a list of CSS stylesheets and combine them into a single stylesheet.

The images referenced by each stylesheet are retrieve from their remote URLs and converted into data inline URIs, so the resulting stylesheet contains all stylesheets and all image data within the same CSS file.

Innovation Award
PHP Programming Innovation award nominee
July 2012
Number 2

Prize: One subscription to the PDF edition of the PHP Architect magazine		 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
Picture of Karl Holz
  Performance   Level  
Name: Karl Holz <contact>
Classes: 14 packages by
Country: Canada Canada
Age: 44
All time rank: 44918 in Canada Canada
Week rank: 49 Up1 in Canada Canada Up

Level 5 StarStarStarStarStar

 Innovation award
Innovation award
Nominee: 9x

Details

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

@package css_one
@authour Karl Holz <newaeon|A|mac|d|com>
@link 

June 27, 2012
 

 CSS One
 -> bigger style sheet 
 -> less http requests 
 -> faster loading 



For an example of how to use this class in your php/jQuery project, look at index.php

CSS One will do
- print minifyed CSS with images embedded into the document output
- print HTML5 or xHTML output with a the ability to add custom feeds, js files/links and a 
custom HTML (<body /> only) for your widget markup.  


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();
$css->add_style('./book/style1.css');
$css->add_style('./css/style2.css');
$css->printCSS();
exit();

CSS One has been tested with jQuery UI css release and custom themes - http://jqueryui.com/download 
to create custom themes, use theme roller - http://jqueryui.com/themeroller/

HTML5 / xHTML output example (index.php has the best example of it's use)

$css=new css_one();
// -> set $css->HTML5=FALSE; // for xHTML output 
$css->title="CSS One ";                                                // <title />
$css->description="This is a jQuery UI CSS theme testing tool";        // <meta />
$css->keywords="HTML5, css, base64 images, phpclasses";                // <meta />
$css->add_atom('Test jQuery UI',$_SERVER['SCRIPT_NAME'].'/feed.atom'); // add ATOM feed
$css->set_jquery('/js/jquery-1.7.2.min.js');                           // add jquery, will default to web link if file is not avaliable
$css->set_jquery_ui('/js/jquery-ui-1.8.21.custom.min.js');             // add jquery-ui, will default to web link if file is not avaliable
$css->add_js('/js/ui-demo.js');                                        // add custom javascript
$css->add_style('style.php');                                          // this css is a link to the document or script
$css->load_body(dirname(__FILE__).'/jquery-ui/demo.html');             // load HTML5/xHTML markup
echo $css;                                                             // just print the object to get the html document

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.

  Files folder image Files (54)  
File Role Description
Files folder imagecss (1 file, 3 directories)
Files folder imagejs (3 files)
Plain text file css-ui.php Class this is the work horse class for all the CSS and image encoding work
Accessible without login Plain text file index.php Example CSS One tester, it uses jquery-ui demo files for the example
Accessible without login Plain text file LICENCE.txt Lic. License text
Accessible without login Plain text file README.txt Doc. Basic Class Info, and two examples

  Files folder image Files (54)  /  css  
File Role Description
Files folder imageSalamCast (1 file, 1 directory)
Files folder imagestart (1 file, 1 directory)
Files folder imagevader (1 file, 1 directory)
  Accessible without login Plain text file ui-demo.css Data jquery-ui demo files

  Files folder image Files (54)  /  css  /  SalamCast  
File Role Description
Files folder imageimages (12 files)
  Accessible without login Plain text file jquery-ui-1.8.21.custom.css Data new custom theme

  Files folder image Files (54)  /  css  /  SalamCast  /  images  
File Role Description
  Accessible without login Image file ui-bg_diagonals-th...48_1e158e_40x40.png Icon new custom theme
  Accessible without login Image file ui-bg_diamond_75_09810b_10x8.png Icon new custom theme
  Accessible without login Image file ui-bg_dots-medium_55_fbf9ee_4x4.png Icon new custom theme
  Accessible without login Image file ui-bg_dots-medium_95_fef1ec_4x4.png Icon new custom theme
  Accessible without login Image file ui-bg_hexagon_65_4c7d0d_12x10.png Icon new custom theme
  Accessible without login Image file ui-bg_hexagon_75_1727d9_12x10.png Icon new custom theme
  Accessible without login Image file ui-bg_hexagon_75_2d5841_12x10.png Icon new custom theme
  Accessible without login Image file ui-bg_loop_0_1f08bf_21x21.png Icon new custom theme
  Accessible without login Image file ui-bg_loop_30_7ea276_21x21.png Icon new custom theme
  Accessible without login Image file ui-icons_2e83ff_256x240.png Icon new custom theme
  Accessible without login Image file ui-icons_cd0a0a_256x240.png Icon new custom theme
  Accessible without login Image file ui-icons_ffffff_256x240.png Icon new custom theme

  Files folder image Files (54)  /  css  /  start  
File Role Description
Files folder imageimages (16 files)
  Accessible without login Plain text file jquery-ui-1.8.21.custom.css Data jquery-ui demo files

  Files folder image Files (54)  /  css  /  start  /  images  
File Role Description
  Accessible without login Image file ui-bg_flat_55_999999_40x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_flat_75_aaaaaa_40x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_glass_45_0078ae_1x400.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_glass_55_f8da4e_1x400.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_glass_75_79c9ec_1x400.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_gloss-wave_45_e14f1c_500x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_gloss-wave_50_6eac2c_500x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_gloss-wave_75_2191c0_500x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_inset-hard_100_fcfdfd_1x100.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_0078ae_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_056b93_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_d8e7f3_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_e0fdff_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_f5e175_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_f7a50d_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_fcd113_256x240.png Data jquery-ui demo files

  Files folder image Files (54)  /  css  /  vader  
File Role Description
Files folder imageimages (15 files)
  Accessible without login Plain text file jquery-ui-1.8.21.custom.css Data jquery-ui demo files

  Files folder image Files (54)  /  css  /  vader  /  images  
File Role Description
  Accessible without login Image file ui-bg_flat_0_aaaaaa_40x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_glass_95_fef1ec_1x400.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_gloss-wave_16_121212_500x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_highlight-hard_15_888888_1x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_highlight-hard_55_555555_1x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_highlight-soft_35_adadad_1x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_highlight-soft_60_dddddd_1x100.png Data jquery-ui demo files
  Accessible without login Image file ui-bg_inset-soft_15_121212_1x100.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_666666_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_aaaaaa_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_bbbbbb_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_c98000_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_cccccc_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_cd0a0a_256x240.png Data jquery-ui demo files
  Accessible without login Image file ui-icons_f29a00_256x240.png Data jquery-ui demo files

  Files folder image Files (54)  /  js  
File Role Description
  Accessible without login Plain text file jquery-1.7.2.min.js Data jquery-ui demo files
  Accessible without login Plain text file jquery-ui-1.8.21.custom.min.js Data jquery-ui demo files
  Accessible without login Plain text file jquery.xslt.js Data used for applying xslt to atom feed

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
Downloadcssone1-2022-10-27.zip 243KB
Downloadcssone1-2022-10-27.tar.gz 185KB
Install with ComposerInstall with Composer
 Version Control Reuses Unique User Downloads Download Rankings  
 100%1
Total:1,002
This week:0
All time:3,644
This week:79Up

  Applications that use this package  
jQuery plugin for playing audio and video podcasts with jPlayer

Add link image If you know an application of this package, send a message to the author to add a link here.


  Other classes that need this package  
Class Why it is needed Dependency
Proxy Cast Used by jQuery ui for the plugin demo Optional

  Related pages  
CSS-One Demo with jQuery UI
Theme roller application, these jQuery themes will work with CSS One
GitHub site for CSS One