Compressed OOCSS uses the OOCSS Parser and the CSS Compressor to give live action compression on both regular CSS files and object oriented ones. The .htaccess file provided is set up to redirect all requests of any .css or .oocss extensions to the main control script, which will in turn parse if needed, and compress the output.
After parsing and compression is done, the script is cached so it can be reused. To make development easier, any changes made to the oocss parser, css compressor, control script, or the requested css file will automatically trigger parsing and compression. Here's the same example used in the OOCSS demo, but with compression added.
As new branches of the OOCSS Parser and CSS Compressor get realesed, they will be updated and merged with this package. The readme file will contain the current revisions of each.
Unparsed, Uncompressed styles.oocss
/**
* Object Oriented CSS 2.0
* September 5, 2009
* Corey Hart @ http://www.codenothing.com
*/
/* Variables */
$pageFontSize = font-size: 10pt;
$links = {
color: blue,
text-decoration: none
};
$code_wrapper = {
display: block,
border: 1px dashed #595959,
height: 200px,
background-color: #f1f1f1,
overflow: auto,
width: 500px,
margin: 0 0 40px 0,
font-size: 9pt
};
/* Styles */
body {
$pageFontSize;
margin: 0;
padding: 0;
}
a {
$links;
}
pre {
$code_wrapper;
margin-left: 15px;
}
h4 {
background-color: #989898;
padding: 5px;
margin: 0;
width: 600px;
color: white;
}
p > {
/* p Attributes */
width: 600px;
padding-left: 10px;
/* Child */
code {
display: block;
border: 1px dashed #595959;
background-color: #f1f1f1;
overflow: auto;
margin: 15px;
padding: 5px;
font-size: 9pt;
}
}
table {
/* Table Attributes*/
margin-top: 20px;
/* Descendents */
pre { $code_wrapper; }
iframe { $code_wrapper; }
td {
> a { $links; }
}
}
#warning {
display: none;
}
#footer > {
font-size: 9pt;
margin: 40px 0 0 10px;
a { $links; }
}
|
Parsed & compressed styles.oocss |