Fork me on GitHub
#css
<
2022-12-06
>
dharrigan16:12:07

This is somewhat of a newbie question, but related to clojurescript. I'm mostly a backend developer, branching out to a bit of clojurescript. I'm wondering - how does one style up their pages? If you want to have a nice layout, with good looking forms and buttons (let's say I use material ui and the library for reagent), do people use some type of templating/prototyping tool that spits out all the css etc?, or do you just take a component and style it up in your cljs files (using, say ornament)

chromalchemy20:12:53

There a quite a few ways to go about it.. I think people do not usually use an external prototyping tool, because there needs to be some mapping between the clojure code and the css generated by clojure (and it’s implied html structure). I think people commonly use something like reagent and hiccup syntax (or alternatively some function based syntax) that generates html. And then you can add whatever classes and inline styles you want (to override defaults) very directly. Using a css library like tailwind, material-ui, semantic-ui, bulma, etc can take you very far quickly, just by adding their classes. And there is the benefit that there are lots of vanilla html examples out there to sample from. Just rebuild them in hiccup/clojurescript-html-components. ex: https://www.tailwindtoolbox.com/ https://www.tailwindawesome.com/ Ornament is nice in that it has a pretty advanced story for composing css between components, can use tailwind syntax for ergonomic quick-prototyping, and generates a static css asset for fast/optimized deployment (compared to dynamically creating inline styles at runtime loading, and identical style declaration being duplicated inline across components..). I also like how Ornament enables the separation of the styling of a component, from it’s other concerns (state, metadata, etc). Style declarations can get quite long, even with an abbreviated syntax like tailwind, and could clutter up the code that governs these other concerns. (I guess this is in the spirit of old school html/css separation, but more evolved) I have used Tailwind directly with hiccup before. It’s still pretty nice, even on it’s own. I haven’t had a chance to use many of the other css frameworks/approaches.

dharrigan21:12:57

That's great - thank you!

dharrigan16:12:33

How do you go from a blank white page with a few buttons/forms on it, to something that is pretty?