This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-06-17
Channels
- # admin-announcements (103)
- # beginners (4)
- # boot (101)
- # cider (64)
- # clojure (126)
- # clojure-australia (1)
- # clojure-berlin (21)
- # clojure-china (1)
- # clojure-dev (11)
- # clojure-germany (13)
- # clojure-india (1)
- # clojure-italy (20)
- # clojure-japan (43)
- # clojure-poland (7)
- # clojure-russia (9)
- # clojure-spain (4)
- # clojure-uk (10)
- # clojurescript (152)
- # core-async (2)
- # css (51)
- # editors (25)
- # events (2)
- # instaparse (17)
- # jobs (1)
- # ldnclj (50)
- # om (7)
- # reactive (7)
- # reading-clojure (1)
- # reagent (1)
- # remote-jobs (1)
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.
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.
For those who’re new to css in Cljs, I’m working on a garden based lib called Mesh - https://github.com/facjure/mesh
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
Interesting question. Not sure. Remove the element from the header and refresh the DOM somehow?
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.
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?
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.
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.
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
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.
re-com has a nice-looking demo that makes use of flexbox: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/