Hey, there are no dumb questions, only stale docs in this case. 1. jquery was the only option when hoplon was created. But we added different providers that don't require the use (neither they pull it as a dependency). We have a goog provider that uses helpers from the google closure library and a dom provider that directly uses the native browser api. Because of the order they were introduced, jquery is the default but if you add a require of hoplon.dom the native brower api will be used. 2. you can include css on your html or use a css in js solution, there are some options that are easy to use from clojurescript. Hoplon is css agnostic, so you can choose what you like. Let me know if you have more questions or need some help.

You can even put <style> tag in a forumula cell for dynamically updating global styles. Not sure of performance implications for that though..

thank you both! @U05094X3J, is there any documentation or examples showing how to use the different options, both for javascript and for css?

So for javascript if you generate a new project using the https://github.com/hoplon/hoplon?tab=readme-ov-file#quickstart you will get the browser native api that is what we currently recommend. In the generated project you will have a file src/PROJECT_NAME/main.cljs that has [hoplon.dom] in the :require. If you change that to [hoplon.goog] you will get the google closure library based provider. And if you remove or change to [hoplon.jquery] you will get the jquery based one. This is global and having more than one will cause the last one loaded to win and other unexpected behavior.

And for css, to add css files you should edit the public/index.html file to add the link tag. One example using inline css with https://github.com/noprompt/garden is https://gist.github.com/thedavidmeister/68cf53456c61c37a33331d06008c4940 If you have other libraries that you want to try and is having trouble I can try to create an example.

I will explore more but I think I'm good for now, thank you! Thank you for the link to garden as well. Was going to ask, since I've never heard about it

One clojurescript based library that should be interesting to try is https://github.com/green-coder/girouette But I chose https://daisyui.com/ recently for a side project I'm prototyping.

I will create a gist later but I wrote some small example of dynamic styles and css on the playground https://hoplon.io/playground.html

(ns playground
  (:require
    [hoplon.core :as h]
    [javelin.core :as j :refer [defc]]))

(defc dynamic-css
  {:background-color "green" :color "white"})

(defc dynamic-style
  "background-color: black; color: white;")

(defn css-and-style-example
  []
  (h/div
    (h/h2 (h/code ":css") " attribute")
    (h/div
      (h/span :css {:background-color "green" :color "white"} "Static inline css "))
    (h/div :css {:padding-top "12px"}
      (h/span :css dynamic-css "Dynamic inline css "))
    (h/div :css {:padding-top "12px"}
      (h/button :click #(swap! dynamic-css assoc :background-color "red") "Red background")
      (h/button :click #(swap! dynamic-css assoc :background-color "green") "Green background"))
    (h/h2 (h/code ":style") " attribute")
    (h/div
      (h/span :style "background-color: black; color: white;" "Static inline style "))
    (h/div :css {:padding-top "12px"}
      (h/span :style dynamic-style "Dynamic inline style "))
    (h/div :css {:padding-top "12px"}
      (h/button :click #(reset! dynamic-style "background-color: blue; color: white;") "Blue background")
      (h/button :click #(reset! dynamic-style "background-color: black; color: white;") "Black background"))))

(.replaceChildren (.getElementById js/document "app")
  (css-and-style-example))

(ns playground
  (:require
    [hoplon.core :as h]
    [javelin.core :as j :refer [defc]]))

(defn css-and-style-example
  []
  (h/div
    (h/link :rel "stylesheet" :href "")
    (h/div
      (h/h2 (h/span :class "bg-green-500 text-yellow-200" "Adding a css link tag from inside Hoplon")))))

(.replaceChildren (.getElementById js/document "app")
  (css-and-style-example)))

This ☝️ will add tailwind-css from hoplon. It breaks the styling of the buttons on the interface.

This is a more interesting version of the same thing:

(ns playground
  (:require
    [hoplon.core :as h]
    [javelin.core :as j :refer [defc]]))

(defn css-and-style-example
  []
  (h/div
    (h/link :rel "stylesheet" :href "")
    (h/div
      (h/h2 (h/span :class "py-2 px-4 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-white hover:text-red-500 focus:outline-none" "Adding a css link tag from inside Hoplon")))))

(.replaceChildren (.getElementById js/document "app")
  (css-and-style-example)))

thank you for all your help, @U05094X3J! I have to apologize that some of this stuff is just over my head; I am new not just to Hoplon... but still new to Clojure as well

No problem, you can ask any questions and we will try to help. I was a beginner in clojure/clojurescript when I found hoplon and learned a lot using it.

Your questions will be helpful so we can improve the docs making it easier to future users.