powercss
Version:
Unleash PowerCSS to create custom styling for every user of your web application. PowerCSS uses merging, caching, compression, and double-buffering to exceed the speed and flexibility of static CSS. https://www.youtube.com/watch?v=rnkMjzhxw4s
93 lines (90 loc) • 3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Mobile settings
see http://www.html5rocks.com/en/mobile/touch.html -->
<meta name="viewport" content="width=device-width user-scalable=no
initial-scale=.8,maximum-scale=.8"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- ie9+ rendering support for latest standards -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PowerCSS Example 004</title>
<style>body{display:none}</style>
<script src="js/pcss._ex004_.js"></script>
<script>window.onload = pcss.e4;</script>
</head>
<body>
<a href="../index.html"><div class="pcss-_logo_" title="PowerCSS"></div></a>
<h2>Example 004: Compression</h2>
<p>This example has the capability as Example 003, however it uses
compressed PowerCSS. The table below illustrates how object key compression
("Superpack") can result in nearly half the download size compared to a
an UglifyJS minification and only 15% of the original library and logic
files!
</p>
<table>
<tr>
<th>Compression</th>
<th>Bytes</th>
<th>Relative Size</th>
</tr>
<tr>
<td>Original</td>
<td>42,186</td>
<td><b>100%</b></td>
</tr>
<tr>
<td>Pruned</td>
<td>36,449</td>
<td>86.4%</td>
</tr>
<tr>
<td>Minified + Prune</td>
<td>12,524</td>
<td>29.7%</td>
</tr>
<tr>
<td>Superpack</td>
<td>6,454</td>
<td><b>15.3%</b></td>
</tr>
</table>
<div id="pcss-vr">
<div class="pcss-v8">Cascade A</div>
<div>Cascade B</div>
<div>Cascade C</div>
</div>
<div class="pcss-ra">PowerCSS 01<br/>
<input title="name" type="text" placeholder="your name here"/>
</div>
<div class="pcss-ra">PowerCSS 02</div>
<div class="pcss-ra">PowerCSS 03</div>
<div class="pcss-ra">PowerCSS 04</div>
<div class="pcss-ra">PowerCSS 04</div>
<div class="pcss-ra">PowerCSS 05</div>
<div class="pcss-ra">PowerCSS 06</div>
<div class="pcss-ra">PowerCSS 07</div>
<div class="pcss-ra">PowerCSS 08</div>
<div class="pcss-ra">PowerCSS 09</div>
<div class="pcss-ra">PowerCSS 10</div>
<div class="pcss-ra">PowerCSS 11</div>
<div class="pcss-ra">PowerCSS 12</div>
<div class="pcss-ra">PowerCSS 13</div>
<div class="pcss-ra">PowerCSS 14</div>
<div class="pcss-ra">PowerCSS 15</div>
<div class="pcss-ra">PowerCSS 16</div>
<div class="pcss-ra">PowerCSS 17</div>
<div class="pcss-ra">PowerCSS 18</div>
<div class="pcss-ra">PowerCSS 19</div>
<div class="pcss-ra">PowerCSS 20</div>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66128066-2', 'auto');
ga('send', 'pageview');
</script>
</html>