Active CSS

Power-up your CSS with actions!

Active CSS is a JavaScript plugin that adds event-driven actions to CSS.

• Fast to learn: Active CSS is quick to learn, as it looks like CSS. Just learn some new commands like "add-class", "remove-class", etc., plus a few new concepts that turn CSS into a proper programming language.
• Fast, intuitive to write: Active CSS converts common JavaScript actions to a higher-level one-liner CSS syntax. Around 100 new commands and pseudo-selectors for all common website building tasks.
• Easy to debug: Active CSS is easy to debug, even easier than CSS. All declarations are cumulative which means that there are no cascading commands - no heirarchical rules to slow you down trying to get things to work.
• Supports modern web components: As well as supporting the regular DOM, you can more easily build web components with native shadow DOMs having isolated events and variables.
• Build SPAs: Active CSS includes an easy front-end method of single page application routing (with tutorial) to make your site faster, more scalable, and more friendly to use. No more clunk-fest website! Now you can have that radio station on your site that you always wanted without melting your brain trying to work out how to keep it on the page.
• Extendable: Write your own Active CSS in native JavaScript on-the-fly in your code. Prototype new commands so you can try out your own styling and action concepts as one-liner commands.
• Write more stuff: With your code leaving a smaller footprint, you don't have to worry any more about adding more functionality to websites. You can tweak more to make it look and do awesome things. It's like tweaking CSS.
• Dynamic CSS & future-proof: Include your regular CSS in with Active CSS commands. Active CSS is future-proofed so that even if browsers replicated and altered Active CSS commands, your websites will still work as they used to.
• Truly event-driven: Active CSS is a pure event-driven programming style. It is the missing language in the browser's object-oriented programming platform that makes things quick and easy to code. Now you can add "methods" to objects directly. All DOM events and CSS selectors are supported.
• Simple by design: Easy to install and develop with. Simple architecture of the core for optimal performance. No fush. No compromise.

For best results, start building a website with no plugins or JavaScript and see how far you can get by only using HTML, CSS and Active CSS.

Active CSS works on modern browsers that are ES6-compliant and support shadow DOM.

Active CSS should work fine on desktop Firefox, Chrome, Opera, Safari and the latest Edge; iOs Safari and Chrome, Android Chrome and Firefox. IE and old Edge support is not planned. A more complete list of supported browser versions will be compiled at some point.

Installation

Active CSS has been designed for gradual adoption from the start, and you can use as little or as much Active CSS as you need, like CSS. Although practically speaking, you should be aiming to get as much done with Active CSS as you can. You will save on bloated plugin overhead.

The Active CSS installation instructions are on the website.

If you are looking for the core script to download, check out the dist folder and then find the version(s) you need.

The production (live) version will look like this: activecss-2-0-0.min.js

The development (offline) version (which supports the upcoming DevTools extention) will look like this: activecss-dev-2-0-0.min.js

Documentation

You can find comprehensive documentation on the website.

Examples

There are loads of examples on the practical examples page.

Here's a taster:

#clickMe:click {
    alert: "Hello world!";
}

Want to see it work? Go to the website.

You'll notice that it looks a lot like CSS. There are lots of features in Active CSS. It is truly epic!

It puts back the fun in functionality! Yeah, sorry about that.

License

Active CSS is MIT licensed.

Copyright (c) 2020-present, River Zend Dynamics Ltd.