Instant CSS margin, padding, background and text color - with zero effort.
```
## Table of Contents
+ [Quick Install](#-in-a-hurry) • [More Install](#install--use)
+ [Example](#example)
+ Extras:
+ [Fonts](./docs/font-pack.md) Install and use fonts dynamically
+ [Vendor Prefix](./docs/vendor-prefix.md) Scope Polyclass usage to a prefix
+ [Aliases](./docs/aliases.md) Reduce typing by aliasing long word
+ [Events](./docs/events.md) Apply JavaScript event listeners using class-names
+ [Icons](./docs/icons.md) Instant Google material icons
+ [Extended Colors](./docs/extended-colors.md) Use all other CSS color types
+ [Inserting Rules](./docs/inserting-rules.md) Inject CSS declarations and custom detection functions
+ Variables
+ [CSS `var()`](./docs/css-var.md) Utilise variables for declarative properties and values
+ [Polyclass `vars()` object](./docs/vars-object.md) Use JavaScript objects as CSS vars
+ Deeper
+ [Running Instances](./docs/running-polyclass.md)
+ [Polyclass and CSS Anatomy](./docs/anatomy.md) Understand a CSS Property
+ [Addons](./docs/addons.md) Read more on the addon platform for customising Polyclass internals
+ Knowledge
+ [What is JIT](#what-is-just-in-time)
+ [What is Declarative](#what-is-declarative-css)
+ [5 Quadrillion?](./docs/dev/class-count.md)
## 🚀 In a Hurry?
Include from [jsdelivr](https://www.jsdelivr.com/package/npm/polyclass):
```jinja
```
**All Done. Let's use it.**
Apply `polyclass` to your target, such as the `body`:
```jinja
Purple Title!
```
**Polyclass anything!** [More Install](#install--use)
### Your Instant, Pluggable, Dynamic CSS Base Library
Polyclass is a [_just-in-time_](#what-is-just-in-time) CSS class library, built dynamically from your class-names using "[Declarative CSS](#what-is-declarative-css)".
+ **Just-in-Time** runtime to declare CSS on-the-fly
+ **No opinion** no factory, forced, or predefined CSS included!
+ Supports **any** CSS length you need, from `px` to `cqmax`
+ **All** CSS Properties are ready, even: `order-block-start-style-dotted`!
+ **Less than 7 Kilobytes** (gzipped) including all addons.
+ over 5 quadrillion available properties *\*([and counting](./docs/class-count.md))* 😅
+ No compilation, installation, dependencies, or IDE configurations!
```jinja
ET VOILÀ! Polyclassed.
Flexy sticky header! No mess!
```
``` js
Polyclass.getInstance(header).asString()
// Rendered CSS Stylesheet.
```
Polyclass possibilities are loaded from the processed HTML entity, ensuring the library is always ever-green, naturally adopting CSS engine changes as soon as they exist, such as [Use Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
```jinja
Text balanced h2,
With a scrolling margin,
for the page header from the CSS Var "header-height"
```
# Install & Use
Polyclass is designed to be quick to initiate.
[Grab from jsdelivr](https://www.jsdelivr.com/package/npm/polyclass) and apply it directly to your HTML:
```html
```
[Grab from NPM](https://www.npmjs.com/package/polyclass) and do node things:
```bash
npm install polyclass
```
An ESM import:
```js
import Polyclass from "polyclass"
new Polyclass()
```
`import()` on the `node` terminal:
```js
// Fetch the esm node default using import()
const { default: Polyclass } = await import("polyclass")
new Polyclass()
```
`require()` on the terminal:
```js
// Collect a .cjs module with require()
const polyclass = await require("polyclass")
new polyclass.Polyclass()
```
Or if you have the source-code locally:
```jinja
```
## Load
To load Polyclass use the automatic attribute `polyclass`, or create a new JavaScript instance `Polyclass()`. Multiple instances of Polyclass can exist in one view
---
### HTML `polyclass` attribute
Use the Polyclass automatic detection:
```jinja
Grey Title!
```
Read more in [Running Polyclass: Auto](./docs/running-polyclass.md#auto-polyclass)
---
### JavaScipt `Polyclass` Instance
Run `Polyclass` somewhere in your code. It can run in the ``, the `