| File | Role | Description | ||
|---|---|---|---|---|
 images (16 files) |
||||
  jquery-ui-1.8.21.custom.css |
Data | jquery-ui demo files | ||
CSS One: Combine CSS and images into a single stylesheet
| Recommend this page to a friend! |
  Download .zip |
| Info | View files (54) |
Download .zip |
Reputation | Support forum | Blog | Links |
| Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
2022-10-27 (17 days ago)  | Not enough user ratings | Total: 997 This week: 2 | All time: 3,642 This week: 270 | |||||
| Version | License | PHP version | Categories | |||
| cssone1 1.3 | MIT/X Consortium ... | 5.2 | HTML, PHP 5 |
| Description | Author | |||||||||||
This class can combine multiple CSS files and referenced images into a single stylesheet. Innovation Award
|
|
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 |
| File | Role | Description | ||
|---|---|---|---|---|
| css (1 file, 3 directories) |
||||
| js (3 files) |
||||
| css-ui.php |
Class | this is the work horse class for all the CSS and image encoding work | ||
| index.php |
Example | CSS One tester, it uses jquery-ui demo files for the example | ||
| LICENCE.txt |
Lic. | License text | ||
| README.txt |
Doc. | Basic Class Info, and two examples | ||
| Files |
/ | css |
| File | Role | Description | ||
|---|---|---|---|---|
| SalamCast (1 file, 1 directory) |
||||
| start (1 file, 1 directory) |
||||
| vader (1 file, 1 directory) |
||||
| ui-demo.css |
Data | jquery-ui demo files | ||
| Files |
/ | css | / | SalamCast |
| File | Role | Description | ||
|---|---|---|---|---|
| images (12 files) |
||||
| jquery-ui-1.8.21.custom.css |
Data | new custom theme | ||
| Files |
/ | css | / | SalamCast | / | images |
| File | Role | Description |
|---|---|---|
 ui-bg_diagonals-th...48_1e158e_40x40.png |
Icon | new custom theme |
| ui-bg_diamond_75_09810b_10x8.png |
Icon | new custom theme |
| ui-bg_dots-medium_55_fbf9ee_4x4.png |
Icon | new custom theme |
| ui-bg_dots-medium_95_fef1ec_4x4.png |
Icon | new custom theme |
| ui-bg_hexagon_65_4c7d0d_12x10.png |
Icon | new custom theme |
| ui-bg_hexagon_75_1727d9_12x10.png |
Icon | new custom theme |
| ui-bg_hexagon_75_2d5841_12x10.png |
Icon | new custom theme |
| ui-bg_loop_0_1f08bf_21x21.png |
Icon | new custom theme |
| ui-bg_loop_30_7ea276_21x21.png |
Icon | new custom theme |
| ui-icons_2e83ff_256x240.png |
Icon | new custom theme |
| ui-icons_cd0a0a_256x240.png |
Icon | new custom theme |
| ui-icons_ffffff_256x240.png |
Icon | new custom theme |
| Files |
/ | css | / | start |
| Files |
/ | css | / | start | / | images |
| File | Role | Description |
|---|---|---|
| ui-bg_flat_55_999999_40x100.png |
Data | jquery-ui demo files |
| ui-bg_flat_75_aaaaaa_40x100.png |
Data | jquery-ui demo files |
| ui-bg_glass_45_0078ae_1x400.png |
Data | jquery-ui demo files |
| ui-bg_glass_55_f8da4e_1x400.png |
Data | jquery-ui demo files |
| ui-bg_glass_75_79c9ec_1x400.png |
Data | jquery-ui demo files |
| ui-bg_gloss-wave_45_e14f1c_500x100.png |
Data | jquery-ui demo files |
| ui-bg_gloss-wave_50_6eac2c_500x100.png |
Data | jquery-ui demo files |
| ui-bg_gloss-wave_75_2191c0_500x100.png |
Data | jquery-ui demo files |
| ui-bg_inset-hard_100_fcfdfd_1x100.png |
Data | jquery-ui demo files |
| ui-icons_0078ae_256x240.png |
Data | jquery-ui demo files |
| ui-icons_056b93_256x240.png |
Data | jquery-ui demo files |
| ui-icons_d8e7f3_256x240.png |
Data | jquery-ui demo files |
| ui-icons_e0fdff_256x240.png |
Data | jquery-ui demo files |
| ui-icons_f5e175_256x240.png |
Data | jquery-ui demo files |
| ui-icons_f7a50d_256x240.png |
Data | jquery-ui demo files |
| ui-icons_fcd113_256x240.png |
Data | jquery-ui demo files |
| Files |
/ | css | / | vader |
| File | Role | Description | ||
|---|---|---|---|---|
| images (15 files) |
||||
| jquery-ui-1.8.21.custom.css |
Data | jquery-ui demo files | ||
| Files |
/ | css | / | vader | / | images |
| File | Role | Description |
|---|---|---|
| ui-bg_flat_0_aaaaaa_40x100.png |
Data | jquery-ui demo files |
| ui-bg_glass_95_fef1ec_1x400.png |
Data | jquery-ui demo files |
| ui-bg_gloss-wave_16_121212_500x100.png |
Data | jquery-ui demo files |
| ui-bg_highlight-hard_15_888888_1x100.png |
Data | jquery-ui demo files |
| ui-bg_highlight-hard_55_555555_1x100.png |
Data | jquery-ui demo files |
| ui-bg_highlight-soft_35_adadad_1x100.png |
Data | jquery-ui demo files |
| ui-bg_highlight-soft_60_dddddd_1x100.png |
Data | jquery-ui demo files |
| ui-bg_inset-soft_15_121212_1x100.png |
Data | jquery-ui demo files |
| ui-icons_666666_256x240.png |
Data | jquery-ui demo files |
| ui-icons_aaaaaa_256x240.png |
Data | jquery-ui demo files |
| ui-icons_bbbbbb_256x240.png |
Data | jquery-ui demo files |
| ui-icons_c98000_256x240.png |
Data | jquery-ui demo files |
| ui-icons_cccccc_256x240.png |
Data | jquery-ui demo files |
| ui-icons_cd0a0a_256x240.png |
Data | jquery-ui demo files |
| ui-icons_f29a00_256x240.png |
Data | jquery-ui demo files |
| Files |
/ | js |
| File | Role | Description |
|---|---|---|
| jquery-1.7.2.min.js |
Data | jquery-ui demo files |
| jquery-ui-1.8.21.custom.min.js |
Data | jquery-ui demo files |
| jquery.xslt.js |
Data | used for applying xslt to atom feed |
| Version Control | Reuses | Unique User Downloads | Download Rankings | ||||||||||||||||
| 100% | 1 |
|
|
| Applications that use this package |
| SalamCast Podcast Player jQuery plugin for playing audio and video podcasts with jPlayer |
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 CSS-One Demo with jQuery UI |
| jQuery UI Theme roller application, these jQuery themes will work with CSS One |
| GitHub GitHub site for CSS One |
