Powerful UI tooling in simple CSS syntax.
Blazingly fast reactive framework features in one-liner CSS.
Now you can do more than just :hover!
Over 100 tools for building interactive websites and SPAs.
Plus, a CSS version of web components...
Pre-requisites to studying Active CSS are HTML, CSS and basic JavaScript.
An epic higher-level companion for native JavaScript.
Works in runtime. Works inline. Works with your plugins.
A 32kB plugin with Brotli compression, fully integrated with all features.
This SPA site is powered on the front-end with static HTML, CSS and Active CSS
<script src="/activecss-2-4-3.min.js"></script>Hello world
Active CSS looks like CSS, but it supports all the DOM events, like click, mouseover, etc.
Basic website building JavaScript commands have been converted to CSS one-liner syntax.
add-class
toggle-class
Hello world 2
You can add delays to any command in Active CSS, including regular CSS, and chain those commands by using a comma.
Because the commands are all one-liners, and the affecting of a target selector is so direct, you write less code.
And because of the nature of CSS syntax, this is the most direct way to code event-driven actions that can affect any element on the page.
All commands are sequential, so they run one after the other in the order they are written, just like a regular language.
It is a lot easier to write code like this in Active CSS than doing the same thing in native JavaScript due to:
1) Fastest selector referencing when you type.
2) Simple chaining of actions.
3) Simpler delaying of actions.
4) Actions are kept separate from HTML markup.
All webpage UI actions are essentially cause and effect reactions with HTML objects. So you can do a lot with Active CSS alone.
The code editor used throughout this site is a component made purely with Active CSS.
Component - ajax
Writing web components is a modern style of coding. Active CSS simplifies this.
In Active CSS, you can attach components to custom HTML tags or use components as simple blocks of HTML.
You can bind a component to a custom element by using the create-element command, so that the component draws inside the element when it is drawn.
Active CSS variables are scoped in the global DOM, in a designated component area, or even nested component areas (including nested shadow DOMs).
There is also a very easy way to data-bind variables — just add double-curlies. When a variable changes, it updates automatically on the page.
Active CSS does not use a Virtual DOM. Instead it utilises modern browser observers and direct internal references to target nodes.
This example simply fetches a JSON string from the server, this automatically converts itself to Active CSS variables, and draws the results in 3 separate components.
To see a full explanation of this example, see the Component - ajax example page.
You can do fun stuff...
Mouseover wack-a-mole!
Attributes - referenced by {@attr name} - are substituted during runtime into data from the event selector if it isn't found in the target selector.
There is also a built-in "draw" event, which fires when any element is first drawn on the page. This is a really handy event to have.
And practical stuff...
Simple embedded video modal
You can display any component by rendering {|component name} into a target.
This example renders a video iframe inside a modal background tag, and gets the video URL from the img tag that is clicked on.View the code editor component code here!
There are no additional libraries to the plugin, everything is integrated.
The possibilities are limitless. Lots more examples inside!
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-4-3.min.js"></script>