### Install uix.css using Clojure CLI/deps.edn Source: https://github.com/roman01la/uix.css/blob/master/README.md Shows how to add the uix.css library as a dependency in a Clojure project using the `deps.edn` file. ```clojure {:deps {com.github.roman01la/uix.css {:mvn/version "0.3.0"}}} ``` -------------------------------- ### Code-Splitting CSS with uix.css and Shadow Source: https://github.com/roman01la/uix.css/blob/master/README.md Illustrates code-splitting CSS modules using uix.css and Shadow's module loader, starting from v0.3.0. It shows how to create loadable React components and manage CSS bundle loading with `uix.css/load-before`. ```clojure ;; main module (ns app.core (:require [uix.core :as uix :refer [$ defui]] [uix.css :refer [css]] [uix.css.adapter.uix] [shadow.lazy])) ;; create loadable var (def loadable-settings (shadow.lazy/loadable app.settings/view)) (def settings ;; creates lazy React component (uix.core/lazy ;; loads CSS bundle of the settings module #(uix.css/load-before app.settings ;; loads settings module (shadow.lazy/load loadable-settings)))) (defui root-layout [] ($ :div {:style (css {:padding 24})} ;; Suspense component displays the fallback UI while ;; lazy component is being loaded ($ uix.core/suspense {:fallback "loading settings..."} ($ settings)))) (defn init [] ;; render ) ;; settings module (ns app.settings (:require [uix.core :as uix :refer [$ defui]] [uix.css :refer [css]] [uix.css.adapter.uix])) (defui view [] ($ :div {:style (css {:padding 16})})) ;; shadow-cljs.edn build config {:app {:target :browser :module-loader true :modules {:main {:entries [app.core] :init-fn app.core/init} :settings {:entries [app.settings] :depends-on #{:main}}} :build-hooks [(uix.css/hook)]}} ``` -------------------------------- ### Apply inline styles alongside uix.css for gradual migration Source: https://github.com/roman01la/uix.css/blob/master/README.md Shows how uix.css can gracefully handle existing inline styles. When a map of styles is passed at runtime, it's applied as regular inline styles, aiding in migrating components incrementally. ```clojure (defui button [{:keys [style children]}] ($ :button {:style (css {:color :red :padding "8px 16px"} style)} children)) ;; these styles will be applied as inline styles ($ button {:style {:background :yellow}} "press me") ``` -------------------------------- ### Define a simple button component with uix.css Source: https://github.com/roman01la/uix.css/blob/master/README.md Demonstrates the basic usage of the `css` macro to define styles for a button component. It uses `uix.core` for UI definition and `uix.css` for styling. ```clojure (ns my.app (:require [uix.core :as uix :refer [defui $]] [uix.css :refer [css]] [uix.css.adapter.uix])) (defn button [] ($ :button {:style (css {:font-size "14px" :background "#151e2c"})})) ``` -------------------------------- ### Advanced button styling with states and media queries Source: https://github.com/roman01la/uix.css/blob/master/README.md Illustrates advanced styling capabilities of uix.css, including hover states (`&:hover`), media queries (`@media`), and nested selectors (`& > strong`). It also shows dynamic style values using variables. ```clojure (ns my.app (:require [uix.core :as uix :refer [defui $]] [uix.css :refer [css]] [uix.css.adapter.uix])) (def border-color "blue") (defn button [] ($ :button {:style (css {:font-size "14px" :background "#151e2c" :padding "8px 32px" :border (str "1px solid " border-color) :&:hover {:background "green"} "@media (max-width: 800px)" {:padding "4px 12px"} "& > strong" {:font-weight 600}})})) ``` -------------------------------- ### Compose styles with multiple css macro calls Source: https://github.com/roman01la/uix.css/blob/master/README.md Demonstrates how to compose styles by passing multiple style maps to the `css` macro. This allows for modularity and easier style management. ```clojure (defui button [{:keys [style children]}] ($ :button {:style (css {:color :red :padding "8px 16px"} style)} children)) ($ button {:style (css {:background :yellow})} "press me") ``` -------------------------------- ### Configure shadow-cljs for uix.css build hook Source: https://github.com/roman01la/uix.css/blob/master/README.md Configuration snippet for `shadow-cljs.edn` to integrate the `uix.css/hook` for CSS generation during the build process. It sets up a browser target and defines the website module. ```clojure ;; shadow-cljs.edn {:deps true :dev-http {8080 "public"} :builds {:website {:target :browser :build-hooks [(uix.css/hook)] :modules {:website {:entries [my.app]}}}}} ``` -------------------------------- ### Inline CSS Expressions with uix.css Source: https://github.com/roman01la/uix.css/blob/master/README.md Demonstrates how uix.css inlines constant values and evaluates pure expressions within CSS, reducing dynamic style computations. It analyzes code and evaluates known functions with constant arguments. ```clojure (def border-color "blue") (def m-xl 64) (css {:border (str "1px solid " border-color) :margin m-xl}) ``` -------------------------------- ### Define global styles using the :global keyword Source: https://github.com/roman01la/uix.css/blob/master/README.md Explains and demonstrates the use of the `:global` keyword within the `css` macro to apply styles that are not scoped to a specific element and do not support dynamic values. Useful for base or reset CSS. ```clojure (defui app [] ($ :div {:style (css {:width "100vw" :min-height "100vh" :background "#10121e" :color "#d7dbf1" :global {:html {:box-sizing :border-box} "html *" {:box-sizing :inherit} :body {:-webkit-font-smoothing :antialiased :-moz-osx-font-smoothing :grayscale :-moz-font-feature-settings ""liga" on" :text-rendering :optimizelegibility :margin 0 :font "400 16px / 1.4 Inter, sans-serif"}}})})) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.