Powerful UI tooling in simple CSS syntax.
Now you can do more than just :hover. If you can think it, you can code it!
Blazingly-fast modern framework features, shadow DOM, components, and more!
Over 100 tools included for building interactive websites and SPAs.
An epic higher-level companion for native JavaScript.
Works in runtime. Works inline. Works with your old-school plugins.
A 35kB plugin with Brotli compression, fully integrated with all features.
Pre-requisites to studying Active CSS are HTML, CSS and basic JavaScript.
This SPA website is powered live by Active CSS, CSS and statically generated HTML
(with a little bit of really basic PHP on the back-end for the search results).
<script src="/activecss-2-5-0.min.js"></script>Over the last 2.5 years we have built a UI engine, modelled for CSS syntax,
written in JavaScript and completely separate to the CSS rendering engine,
so that we could implement simple commands and functionality
for CSS to handle UI in an intuitive, direct and logical way.
The ultimate goal is to provide a test-proven, practical
prototype for W3C consideration. Your opinions matter!
CSS can handle so much more than just styles and animation.
SCSS Similarities: You may find similarities to SCSS in the syntax,
but Active CSS is not intentionally modelled on it, so there will be differences.
Don't mix: Active CSS and regular static CSS have to live in different places for now,
because browsers will show errors if they find Active CSS code mixed in with CSS.
Whoa there Nelly! It has been pointed out that a lot of the examples are too complicated,
so please bear with us while we sort that out. Making examples just gets too exciting!
New commands (action commands)
New pseudo-selectors (conditionals)
The links above do not cover everything you need to know.
Using CSS for events can seem a little weird at first, but when it all clicks it does make sense.
To read the documentation for real, you will need to study the documentation in sequence.
Click here to go to the beginning of the docs.
But you want to see some fancy stuff, right?
And fun stuff (this isn't very serious)...
Mouseover wack-a-mole!
In-depth explanations of the concepts used in this example can be studied by reading the documentation in sequence.
The responsive code editor that you see above was also written in Active CSS!
The possibilities are limitless!
Build occasional functionality, or a full application website.
Download and place in a script tag, or import as an npm package for Node.
<script src="/activecss-2-5-0.min.js"></script>