Clojurians Log v2
css
@pri: I'm quite interested in your work with CSS and grid systems.
@meow: thanks, I’ve been slowly making progress though it’s still a mess now
Do you have experience working in Garden
Sometimes I make better progress if I give myself permission to knowingly create a big mess that I can then clean up over time. Seriously. Gets me over that hump. :simple_smile:
True, that’s how I’ve been rolling too: keep pushing on git, until it makes sense
I have a tiny bit of experience with Garden.
I've been working with clojure for about 4 weeks now, coming most recently from QML and Python and too many years of too many other non-lisp languages.
You’re on the right track then
Learning as quickly as I can.
For those who’re new to css in Cljs, I’m working on a garden based lib called Mesh - https://github.com/facjure/mesh
Yes, I have looked at mesh and mala.
Like I said, I'm quite interested in your work. :simple_smile:
I should get something usable out next month, starting with v0.4
I'm exploring various approaches to Reactive single page apps here: https://github.com/pkobrien/ing
This one, for example, does a basic flexbox with the css coming from garden: https://github.com/pkobrien/ing/blob/master/styling/src/app/core.cljs
nice
You should recognize the set-stylesheet fn since I stole it from you... 😉
Though I think I changed the name - iirc yours was insert-stylesheet or insert-styles
ha
Do you know if there’s a way to unset a stylesheet?
Interesting question. Not sure. Remove the element from the header and refresh the DOM somehow?
I thought about it, seems slow
I never learned more js than I had to and haven't done browser apps recently so I'm still getting up to speed on react and dom manipulations.
I did notice something in mesh today that I was going to ask you about since I was looking for examples of code using Garden's defstyles macro and it seemed like maybe mesh was calling (list ...) inside (defstyles ...) unnecessarily, such as here: https://github.com/facjure/mesh/blob/master/examples/grids/styles.clj
But I just learned about defstyles, your code came up in my search on github, then something else distracted me and I hadn't gotten back to it yet.
I'm also wondering if garden supports the combinators such as mentioned here: http://www.planningforaliens.com/blog/2013/04/28/grokking-css-combinators/. I'm thinking they aren't supported and, contrary to that article, its probably a good thing if I avoid those advanced forms of crazy selectors and keep things simple.
About the only thing I'm sure about at this point is that I want to keep all my css generation inside of cljs without writing out to a .css file if at all possible. Then the question is what should go into the stylesheet for the document and what should go into the style attribute of the component and how that all works properly with React.
thanks for the tip, fixed!
I prefer coding css in cljs and would avoid generating .css files. Organizing a hierarchy of styles for page->components, and ensuring the styles are scoped is still an unsolved problem.
@pri: np. It does seem like css organization is a challenge. With that in mind I liked the look of garden's macros so I went looking for good examples of code using them and added several to this file: https://github.com/pkobrien/ing/blob/master/styling/src/app/core.cljs
I also just added a defrule for each of the "big" semantic elements like body, header, footer, aside, article - seemed like the best place to start.
Not sure if it makes sense to try to collect some kind of canonical list of these into a shared library - any thought on that?
What's in that file now is just a mess of what I found in the wild.
I have a similar example in mesh. The challenge is defining scope and ensuring components’ styles aren’t overridden by others. Currently, this isn’t possible in CSS, as you know CSS is inheritance-based.
Developers in React/Postcss seem to be moving towards inline styles
When I first learned css way back when it seemed pretty cool and powerful. Which it is. And then I also learned what a nightmare it really is. Then I didn't do web stuff for several years. Now that I'm back into the web stuff with cljs and react I really have no desire to allow css to be anything more than the simplest possible thing it can be.
And I am familiar with the fact that React folks seem to favor inline styles but I don't know much more than that, and I'm not sure how that translates into our cljs/garden world.
Sure, its just a style attribute, but how will that scale up? Which is why I'm creating these sample apps so I can start small and see how things fall out as the apps grow in complexity.
It’s a good start. Keep posting your updates so we can learn, together
I'd be happy to do so. I was quite inspired by the video of your presentation. Some of the first database apps I worked on back around 1990 or so were used to publish print directories. So I learned a lot about typography and page layout and when I look at what you are working on it reminds me of all that stuff, which I really enjoyed.
Print design has over a century of modern knowledge that we can tap into. I’m glad you’re thinking in the same lines ...
Before I really dive into flexbox, which I plan to do tomorrow, I'm curious to know your opinion of it. Is it good? Any limitations or problems with its use in cljs?
And if you need a guinea pig for any of the stuff you are working on I would be happy to be an early user/adopter/tester if you want one.
I haven’t tried flexbox much, except an example using with flexboxcss - https://github.com/priyatam/thinking-grids/tree/master/flexbox
You're much further along with all of this than I am.
Here’s a test I do: Can I explain flexbox to a graphic/print designer who has never written CSS? If the answer is no, I get back to work.
Well, hopefully I'll get to really dive into this tomorrow.
re-com has a nice-looking demo that makes use of flexbox: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/
and it uses re-frame so its a reactive app as well
I’ll check it out, thanks.