 Latest News

2016-09-06: v1.3 — Added _setStyleAttr_ method. PowerCSS can now change styles on-the-fly after a stylesheet is written. Here is an example:

// 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
});

If you have just a few style changes, _setStyleAttr_ 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.

PowerCSS v1.3 is backward compatible with all versions since 1.0.

 What

PowerCSS is a JavaScript library that create run-time CSS optimized for performance. Watch this presentation for an an overview of CSS double-buffering. PowerCSS is all-new code with many additional capabilities and optimizations.

The project is hosted on GitHub and is available as an npm package. It can be installed using npm install powercss. After installation, if you'd like to run the regression tests, enter the following into a Bash shell:

cd node_modules/powercss
npm install
npm test

 How

This page is styled using PowerCSS. 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 documentation. These include:

• 001 The basics
• 002 Double buffering
• 003 Mixin-maps
• 004 Compression
• 005 Dynamic themes

 Why

Traditional CSS is created well before it is used, not when the application needs it. While preprocessors such as {less}, Stylus, or Sass can help reduce some of the tedium of creating styling variations, they complicate the tool chain and can hinder design iterations.

PowerCSS is designed and optimized for run-time creation and application of CSS. It can be responsive to the user'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't compete with this flexibility.

PowerCSS has not only achieved its primary goal, 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's not to like?

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

 Older News

2016-09-03: v1.2 — External symbol definitions. PowerCSS can now use custom symbol maps. The pcss._initModule_({...}) method has two additional options: _css_key_map_ and _css_val_map_.

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

<!-- v1.1 -->
<script>../dist/pcss.js</script>

<!-- v1.2+ -->
<script>../dist/pcss.js</script>
<script>../dist/pcss.cfg.js</script>

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

2016-03-25: v1.1 — Conditional expressions. PowerCSS now supports arbitrary-depth conditional CSS and media queries. See the Conditional Expressions section of updated documentation. We added 22 regression tests to ensure quality and reliability.

2016-03-25: v1.0 — First production release. 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.

2016-03-20: v0.7.1 — Rewrote the rule-map resolver. 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 test/resolve.js.

2016-03-09: v0.6.6 — Fixed bugs found from testing. Also added process events: _pcss_merged_, _pcss_prepared_, and _pcss_used_. The event object provides the ID of the cascade affected.

2016-03-07: v0.6.2 — Added automated regression tests. Production deployments underway.

2016-03-04: v0.5.20 — Added key benefits section .

2016-02-24: v0.5.16 — Completed 1.x API design. Also added double-buffering and theming demo to the home page.

2016-02-24: v0.5.0 — First beta announcment. PowerCss was nearly feature complete on this date and considered Beta. 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.

 Contribute

If you want your voice heard, join the project! PowerCSS is hosted on GitHub and is also distrubted as an npm package. The best way to contribute is to report issues on Github. Pull request are strongly encoouraged 

 End