powercss/index.html at master · mmikowski/powercss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PowerCSS</title>
  <!-- see http://www.html5rocks.com/en/mobile/touch.html
   prevents native zooming -->
  <meta name="viewport" content="width=device-width user-scalable=no
    initial-scale=1,maximum-scale=1"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- ie9+ rendering support for latest standards -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="icon" type="image/png" href="img/favicon.png">

  <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="examples/js/pcss._home_.js"></script>
  <script>
  $(pcss._home_._initModule_);

  (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 class="pcss-_head_">
    <div class="pcss-_head_float_"></div>
    <div class="pcss-_head_float_"></div>
    <div class="pcss-_x_clear_"></div>
  </div>

  <div class="pcss-_content_">
    <section>
    <div class="pcss-_logo_"></div>
    <div class="pcss-_byline_">JS-powered run-time CSS</div>
    </section>

    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf1ea;</span> Latest News</h2>
      <div class="pcss-_alt_clearfloat_"></div>
      <p><strong>2016-09-06: v1.3 &#8212; Added <code>_setStyleAttr_</code>
      method.</strong> PowerCSS can now change styles on-the-fly after a
      stylesheet is written.  Here is an example:</p>

      <pre>// Rewrite an attribute for a style.
// This will update all elements with this class in the DOM immediately
//
pcss._setStyleAttr_({
  _selector_str_ : '.xhi-_svg_ellipse_',
  _attr_key_ : 'rx',
  _attr_val_ : x_radius_px
});</pre><br/>

      <p>If you have just a few style changes, <code>_setStyleAttr_</code>
      can be more efficient or easier to implement. Other times, double-buffer
      stylesheet flipping will be much faster or easier.  The easiest solution
      is usually the best; however, if performance is critical you should
      profile both approaches in you applicaiton to help you determine which
      makes the most sense.</p>

      <p><strong>PowerCSS v1.3</strong> is backward compatible with all
      versions since 1.0.</p>
    </section>

    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf02d;</span> What</h2>
      <div class="pcss-_alt_clearfloat_"></div>
      <p><strong>PowerCSS is a JavaScript library that create run-time CSS optimized for
        performance.</strong>
        Watch <a href="https://www.youtube.com/watch?v=rnkMjzhxw4s"
                 target="_blank">this presentation</a> for an an overview of CSS double-buffering.
        PowerCSS is all-new code with many additional capabilities
        and optimizations.<p>

      <p>The project is hosted on <a href="https://github.com/mmikowski/powercss"
                                     target="_blank">GitHub</a> and is available as an
        <a href="https://www.npmjs.com/package/powercss" target="_blank">npm package</a>.
        It can be installed using <code>npm install powercss</code>. After
        installation, if you&apos;d like to run the regression tests, enter the
        following into a Bash shell:</p>

    <pre>cd node_modules/powercss
npm install
npm test</pre>
    </section>

    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf0ad;</span> How</h2>
      <div class="pcss-_alt_clearfloat_"></div>
      <p><strong>This page is styled using PowerCSS</strong>. I know, dog-food
        much?  Anyway, click at the top right to change the palette or cascade
        at any time.  It looks good on a phone as well as a desktop.
        There are 5 examples discussed in the
        <a href="https://github.com/mmikowski/powercss/blob/master/README.md"
           target="_blank">documentation</a>.  These include:
      <ul>
        <li><a href="examples/pcss._ex001_.html">001 The basics</a></li>
        <li><a href="examples/pcss._ex002_.html">002 Double buffering</a></li>
        <li><a href="examples/pcss._ex003_.html">003 Mixin-maps</a></li>
        <li><a href="examples/pcss._ex004_.html">004 Compression</a></li>
        <li><a href="examples/pcss._ex005_.html">005 Dynamic themes</a></li>
      </ul>
    </section>
    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf075;</span> Why</h2>
      <div class="pcss-_alt_clearfloat_"></div>
      <p><strong>Traditional CSS is created well before it is used</strong>,
        not when the application needs it. While preprocessors such as
        <code>{less}</code>, <code>Stylus</code>, or <code>Sass</code> can help
        reduce some of the tedium of creating styling variations, they complicate the
        tool chain and can hinder design iterations.</p>

      <p><strong>PowerCSS is designed and optimized for run-time
        creation and application of CSS</strong>. It can be responsive to the user&apos;s
        environment to a level not possible with preprocessors.  Even better,
        there is no additional compile step to hinder design iteration.
        Styling can be infinitely adjust based on almost any real-time data available
        to an application such as ambient temperature, device orientation, ambient light,
        GPS location, heart rate, or time of day. Static CSS can&apos;t compete with
        this flexibility.</p>

      <p><strong>PowerCSS has not only achieved its primary goal</strong>, but
        it is often better than static CSS in many other respects as well.
        It provides a simple and familiar API where experienced CSS authors
        can use their existing skills to be up and running in minutes.
        When compressed, a PowerCSS solution can download and render faster,
        and it can speed up some CSS operations by 10x or more.
        What&apos;s not to like?</p>

      <ul>
        <li><strong>Real-time styling</strong> - Create
          custom styling for every user of your application at any time.</li>
        <li><strong>Pure JS</strong> - Remove the need for <strong>any</strong>
          static CSS files.</li>
        <li><strong>Namespaced</strong> - Play well with frameworks, jQuery,
          other libraries, and third-party JavaScript.</li>
        <li><strong>Double-buffering</strong> - Minimizes page re-flows with
          this automatic feature. It can speed up some styling changes by more
          than 10x.</li>
        <li><strong>Merging and caching</strong> - Control when
          your styling is updated using time-based minimal processing.</li>
        <li><strong>Mixins</strong> - Create custom symbols at multiple levels:
          virtual stylesheet, virtual cascade, and global.
          Change a mixin and watch the styles change immediately.</li>
        <li><strong>Familiar workflow</strong> - Leverage your experience with
          static CSS files using virtual stylesheets and cascades.</li>
        <li><strong>Machine optimized CSS</strong> - Have the browser
          work more efficiently as only <strong>one stylesheet</strong>
          is used for styling at any given time, and
          <strong>numerous redundancies</strong> are removed during its
          preparation.</li>
        <li><strong>Highly compressible</strong> - Compress your styling
          to a fraction of static CSS.</li>
        <li><strong>Quality code</strong> - Use well tested and documented code.
          A commit hook is  used to ensure no changes occur unless they pass
          <strong>JSLint</strong> <i>and</i> <strong>regression tests</strong>.
        <li><strong>MIT license</strong></li>
        <li><strong>No dependencies</strong></li>
      </ul>
    </section>

    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf017;</span> Older News</h2>
      <div class="pcss-_alt_clearfloat_"></div>

      <p><strong>2016-09-03: v1.2 &#8212; External symbol
      definitions.</strong> PowerCSS can now use custom symbol maps.
      The <code>pcss._initModule_({...})</code> method has two additional
      options: <code>_css_key_map_</code> and <code>_css_val_map_</code>.

      <p><strong>PowerCSS v1.2 is fully backward compatible</strong> with v1.1
      and v1.0 as long as we add the <code>pcss.cfg.js</code> source file:
      page like so:</p>

      <pre>&lt;!-- v1.1 --&gt;
&lt;script&gt;../dist/pcss.js&lt;/script&gt;

&lt;!-- v1.2+ --&gt;
&lt;script&gt;../dist/pcss.js&lt;/script&gt;
&lt;script&gt;../dist/pcss.cfg.js&lt;/script&gt;
</pre><br/>

      <p>No changes to client code is necessary, as PowerCSS checks and
      includes the default CSS key and value maps from <code>pcss.cfg.js</code>
      file if they are not otherwise provided in the <code>pcss._initModule_({...})</code>
      call.  The API remains fully backward compatible with 1.0.</p>

      <p><strong>2016-03-25: v1.1 &#8212; Conditional expressions.</strong>
        PowerCSS now supports arbitrary-depth conditional CSS and media
        queries. See the <code>Conditional Expressions</code> section of updated
        <a href="https://github.com/mmikowski/powercss/blob/master/README.md"
           target="_blank">documentation</a>. We added 22 regression tests to
        ensure quality and reliability.</p>

      <p><strong>2016-03-25: v1.0 &#8212; First production release.
      </strong> We have a strong set of regression
        tests and has been used in a number of production and production-intent
        projects with good results. Expect per-cascade double-buffered
        stylesheets in the 1.2.x release.</p>

      <p><strong>2016-03-20: v0.7.1 &#8212; Rewrote the rule-map
        resolver.</strong> It now processes arbitrarily complex data
        structures. This allows mixin maps with any nesting of
        alternate-lists, concatenations, and symbol-lookups. The isolated code
        is found in <code>test/resolve.js</code>.</p>

      <p><strong>2016-03-09: v0.6.6 &#8212; Fixed bugs found from
        testing.</strong> Also added process events: <code>_pcss_merged_</code>,
        <code>_pcss_prepared_</code>, and <code>_pcss_used_</code>.
        The event object provides the ID of the <strong>cascade</strong>
        affected.
      </p>

      <p><strong>2016-03-07: v0.6.2 &#8212; Added automated regression
        tests.</strong> Production deployments underway.</p>

      <p><strong>2016-03-04: v0.5.20 &#8212; Added key benefits section
        .</strong></p>

      <p><strong>2016-02-24: v0.5.16 &#8212; Completed 1.x API design.</strong>
        Also added double-buffering and theming demo to the home page.</p>

      <p><strong>2016-02-24: v0.5.0 &#8212; First beta announcment.</strong>
      PowerCss was nearly feature complete on this date and considered
      <b>Beta</b>. The API was overhauled, cutting the number of methods in
      half while adding many capabilities.  Documentation and examples were
      expanded and updated.  The cookbook section was added.</p>
    </section>

    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf130;</span> Contribute</h2>
      <div class="pcss-_alt_clearfloat_"></div>

      <p>If you want your voice heard, join the project! PowerCSS is hosted on
      <a href="https://github.com/mmikowski/powercss" target="_blank">GitHub</a>
      and is also distrubted as an <a href="https://www.npmjs.com/package/powercss"
      target="_blank">npm package</a>.  The best way to contribute is to report
      <a href="https://github.com/mmikowski/powercss/issues"
      target="blank">issues</a> on Github. Pull request are strongly
      encoouraged <span class="pcss-_x_fa_icon_">&#xf118;</span></p>
    </section>

    <section>
      <h2><span class="pcss-_x_fa_icon_">&#xf04d;</span> End</h2>
      <div class="pcss-_alt_clearfloat_"></div>
      <div class="comments">
        <div id="disqus_thread"></div>
        <script type="text/javascript">
          var disqus_shortname = 'mmikowski';
          (function() {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
             dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      </div>
    </section>
  </div>
</body>
</html>