hyperfiddle.electric-css3 — com.hyperfiddle/electric v3-alpha-4-g9948fc0b

Dom3 compatible electric-css

• Experimental — Use it at your own risk.
• Partial at-rules support (only @keyframes ATM)

concat-selectors clj

(concat-selectors selectorA selectorB)

css-compatible-value clj

(css-compatible-value x)

grid-template clj

(grid-template rows)

(grid-template rows columns)

Convenient way to build a string compatible with CSS grid-template rule. Takes a collection of rows definition [dimention1 … dimentionN] or [[[area1 … areaN] dimention] …] And an optional collection of columns dimentions [dimention1 … dimentionN].

E.g. (grid-template [[[:logo :title :user-info] :auto] [[:menu :content :content ] :auto] [[:footer :footer :footer ] "1fr"]] ["20rem" :auto]) := ""logo title user-info" auto "menu content content" auto "footer footer footer" 1fr / 20rem auto"

keyframe clj macro

(keyframe stop declarations)

Take a stop string (e.g. "from", "to", "0%", "50%", etc...) and a map of css declarations to apply at the given stop. Will add the animation stop to the current keyframes. Can only be used in a keyframes block. Note that adding or removing a keyframe at runtime resets running animations, but changing a keyframe's content doesn't.

keyframes clj macro

(keyframes animation-name & keyframes)

Create an @keyframes <animation-name> rule group. Note @keyframes are always global, even if defined in a scoped style. Can only contain keyframe rules.

rule clj macro

(rule selector & declarations)

rule* clj

(rule* styled-element selector declarations)

rule-index clj

(rule-index styled-element target-rule)

Find the rule index in the node sheet's CSSRuleList

scoped-class clj

(scoped-class)

scoped-style clj macro

(scoped-style & body)

selector clj

Style clj

(Style styled property value)

Set a style property name to value on a styled object (e.g. DOM node, CSS Stylesheet, CSS Rule etc.).

style clj macro

(style & body)

Usage: (dom/div (dom/props {:class "my-div"}) (css/style (css/rule ".my-div" {:color :red}) (css/rule ".my-div:hover" {:color :blue})))

StyledElement clj protocol

Define an object containing CSS rules

add-rule clj

(add-rule this rule)

(add-rule this rule index)

css-rules clj

(css-rules this)

delete-rule clj

(delete-rule this rule)

find-rule clj

(find-rule this rule)

sheet clj

(sheet this)

StyleRule clj protocol

Interface over a CSS rule

set-property clj

(set-property this key value)

stylesheet< clj

to-str clj

(to-str x)