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
73 lines (70 loc) • 2.84 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 005</title>
<style>body{display:none;}</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"
></script>
<script src="../dist/pcss.js"></script>
<script src="../dist/pcss.cfg.js"></script>
<script src="js/pcss._ex005_.js"></script>
<script>
$(function () {
pcss._ex005_();
(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>
</head>
<body>
<div id="pcss-_head_"></div>
<a href="../index.html"><div class="pcss-_logo_" title="PowerCSS"></div></a>
<h2>Example 005: Minimal time-based processing</h2>
<p>This shows minimal time-base processing of three cascades
and ten mixin-maps color themes. The theme is changed every five
seconds. Click on the top right corner to switch cascades.
All changes are dispatched with just one PowerCSS call
and all changes are transparently double-buffered.</p>
<div id="pcss-_switch_">
<div class="pcss-_x_select_">Cascade A</div>
<div>Cascade B</div>
<div>Cascade C</div>
</div>
<div class="pcss-_box_">PowerCSS 01<br/>
<input title="name" type="text" placeholder="your name here"/>
</div>
<div class="pcss-_box_">PowerCSS 02</div>
<div class="pcss-_box_">PowerCSS 03</div>
<div class="pcss-_box_">PowerCSS 04</div>
<div class="pcss-_box_">PowerCSS 04</div>
<div class="pcss-_box_">PowerCSS 05</div>
<div class="pcss-_box_">PowerCSS 06</div>
<div class="pcss-_box_">PowerCSS 07</div>
<div class="pcss-_box_">PowerCSS 08</div>
<div class="pcss-_box_">PowerCSS 09</div>
<div class="pcss-_box_">PowerCSS 10</div>
<div class="pcss-_box_">PowerCSS 11</div>
<div class="pcss-_box_">PowerCSS 12</div>
<div class="pcss-_box_">PowerCSS 13</div>
<div class="pcss-_box_">PowerCSS 14</div>
<div class="pcss-_box_">PowerCSS 15</div>
<div class="pcss-_box_">PowerCSS 16</div>
<div class="pcss-_box_">PowerCSS 17</div>
<div class="pcss-_box_">PowerCSS 18</div>
<div class="pcss-_box_">PowerCSS 19</div>
<div class="pcss-_box_">PowerCSS 20</div>
</body>
</html>