Dynamic layout context system using Clojure's dynamic vars. Provides thread-local container dimensions and responsive utilities.
Dynamic layout context system using Clojure's dynamic vars. Provides thread-local container dimensions and responsive utilities.
(breakpoint-between min-bp max-bp)Check if current breakpoint is between min and max (inclusive)
Check if current breakpoint is between min and max (inclusive)
(breakpoint<= target)Check if current breakpoint is <= target breakpoint
Check if current breakpoint is <= target breakpoint
(breakpoint= target)Check if current breakpoint equals target
Check if current breakpoint equals target
(breakpoint>= target)Check if current breakpoint is >= target breakpoint
Check if current breakpoint is >= target breakpoint
(calculate-density width)Calculate density based on viewport size
Calculate density based on viewport size
(calculate-orientation width height)Calculate orientation from width and height
Calculate orientation from width and height
(container% percentage dimension)Calculate percentage of container dimension
Calculate percentage of container dimension
(container-breakpoint)Get current breakpoint
Get current breakpoint
(container-height)Get current container height
Get current container height
(container-info)Get formatted container information
Get formatted container information
(container-orientation)Get current orientation
Get current orientation
(container-width)Get current container width
Get current container width
(current-container)Get current container context
Get current container context
(debug-container)Print current container context
Print current container context
(get-all-observer-sizes)Get all registered resize observer sizes. Returns map of id -> {:width number :height number}.
Example: (get-all-observer-sizes) ;; => {"container-1" {:width 400 :height 300} ;; "container-2" {:width 800 :height 600}}
Get all registered resize observer sizes.
Returns map of id -> {:width number :height number}.
Example:
(get-all-observer-sizes)
;; => {"container-1" {:width 400 :height 300}
;; "container-2" {:width 800 :height 600}}(get-observer-size id)Get dimensions from TypeScript resize observer by id. Returns {:width number :height number} or nil if not found.
Example: (get-observer-size "my-container") ;; => {:width 400 :height 300}
Get dimensions from TypeScript resize observer by id.
Returns {:width number :height number} or nil if not found.
Example:
(get-observer-size "my-container")
;; => {:width 400 :height 300}(get-scrollbar-width)Detect browser scrollbar width
Detect browser scrollbar width
(grid-columns)(grid-columns column-map)Get number of grid columns based on breakpoint
Get number of grid columns based on breakpoint
(grid-gap)(grid-gap gap-map)Get grid gap based on breakpoint
Get grid gap based on breakpoint
(height% percentage)Calculate percentage of container height
Calculate percentage of container height
(maintain-aspect-ratio target-ratio)Calculate dimensions to maintain aspect ratio within container
Calculate dimensions to maintain aspect ratio within container
(observe-element! element on-resize)Observe element size changes. Returns cleanup function.
Observe element size changes. Returns cleanup function.
(observe-size-changes! id callback)Subscribe to resize events from TypeScript resize observer. Callback receives {:width number :height number}. Returns unsubscribe function.
Example: (def unsub (observe-size-changes! "my-container" (fn [size] (println "Resized to" size)))) ;; Later: (unsub)
Subscribe to resize events from TypeScript resize observer.
Callback receives {:width number :height number}.
Returns unsubscribe function.
Example:
(def unsub (observe-size-changes!
"my-container"
(fn [size]
(println "Resized to" size))))
;; Later: (unsub)(responsive-class classes)Generate responsive class based on breakpoint. Classes should be a map of breakpoint to class string/vector.
Generate responsive class based on breakpoint. Classes should be a map of breakpoint to class string/vector.
(responsive-value values)Get value based on current breakpoint. Values should be a map of breakpoint to value. Falls back to smaller breakpoints if current not found.
Get value based on current breakpoint. Values should be a map of breakpoint to value. Falls back to smaller breakpoints if current not found.
(width% percentage)Calculate percentage of container width
Calculate percentage of container width
(width->breakpoint width)Determine breakpoint from width
Determine breakpoint from width
(with-container {:keys [width height scrollbar-width density] :as dimensions}
&
body)Bind new container dimensions with calculated metadata. Merges with existing container context.
Bind new container dimensions with calculated metadata. Merges with existing container context.
(with-resize-observer id & body)Bind container context from TypeScript resize observer registry. Gets dimensions from ty-resize-observer component with given id via window.tyResizeObserver API.
Usage: (with-resize-observer "my-panel" (my-component))
Note: Requires TypeScript ty-resize-observer web component to be registered. If no size is available (e.g., element not yet mounted), executes body without container binding.
Bind container context from TypeScript resize observer registry.
Gets dimensions from ty-resize-observer component with given id via window.tyResizeObserver API.
Usage:
(with-resize-observer "my-panel"
(my-component))
Note: Requires TypeScript ty-resize-observer web component to be registered.
If no size is available (e.g., element not yet mounted), executes body without container binding.(with-window & body)Bind window dimensions as container context. Automatically tracks resize events and updates the window-size atom. Usage: (with-window (my-component))
Bind window dimensions as container context.
Automatically tracks resize events and updates the window-size atom.
Usage:
(with-window
(my-component))cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |