Windstorm is a library that allows element customization without needing to use css directly and without predefining hundreds or thousands of css classes with minor differences between a set of 20.
> Note: the version number is not necessary in the url, but is recommended.
> Including the version ensures that if updates are made to the library, any
> compatibility issues or bugs that get introduced won't affect existing pages,
> and also allows updates to be done when intended.
html
`$3
js
// Only scanning, no functions
import "https://esm.sh/@axel669/windstorm@0.6.1"
// Import functions + scanning
import ws from "https://esm.sh/@axel669/windstorm@0.6.1"ws.x({...stuff})
`$3
bash
npm add @axel669/windstorm
`Usage
Windstorm can be used as a standalone script added to the page, or included in a
bundle with other scripts/frameworks. Regardless of which form it's used in,
windstorm should be included in the body of the page before the content that it
will style in order to prevent FOUC. For static content, this means the script
tag that uses it should not be async or defered. For content generated by a
framework like React or Svelte, this should not be an issue as including
windstorm in the build bundle will allow it to run before the framework adds DOM
elements to the page.Once added to the page, windstorm will scan all current elements, and any
elements added later for the
attribute, and generate the necessary css
immediately. Component css is automatically added to the head as well, so no
extra work is needed to use any of the components. Components that transform
standard tags will only work if the tag has the data-ws on it (although the value
can be empty).> Many of the windstorm components expect some css variables defined by the
> theme to be present, so a theme should always be applied to the body.
`html
Static content here
`> Any html elements that do not have the
attribute are left alone,
> allowing windstorm to play nice with any other css lib (that I tried).$3
The data-ws attribute is what windstorm will scan to apply styles to elements.
The attribute is formatted similar to regular css but with some important
diffrences.Instead of css properties and their values, macros are used and applied in the
order they are defined (and custom macros can be made). CSS can also be directly
applied in the case where a built-in macro doesn't exist or work the way you
need it to for the element. Macros can also contain macros inside them.
Media queries and nested-selectors can be used even while in the element
attribute. There is also a css variable shortcut that will either set the
variable value when used in the macro name position, or will expand to the
var syntax (without a default) when used in the value. Normal variable syntax
also works without any edits.
| Macro Type | Syntax |
| --- | --- |
| Normal Macro |
|
| CSS | * |
| CSS variable | @ |Macros can also have a single argument, or multiple arguments. Macros that use
a single argument will use that arg trimmed, and multi arg macros will have each
argument trimmed. More details on using the arguments is found in the Macros
page.
`
: ;! {
: ;
...
}
! | | {
: ;
...
}
html
content
other content
``