Clojurians
# css

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

meow 05:03:22

hello @domkm and @priyatam :simple_smile:

meow 05:03:50

@priyatam: I'm quite interested in your work with CSS and grid systems.

priyatam 05:05:00

@meow: thanks, I’ve been slowly making progress though it’s still a mess now

priyatam 05:05:46

Do you have experience working in Garden

meow 05:06:13

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:

priyatam 05:06:47

True, that’s how I’ve been rolling too: keep pushing on git, until it makes sense

meow 05:06:58

I have a tiny bit of experience with Garden.

meow 05:07:58

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.

priyatam 05:08:26

You’re on the right track then

meow 05:08:44

Learning as quickly as I can.

priyatam 05:09:16

For those who’re new to css in Cljs, I’m working on a garden based lib called Mesh - https://github.com/facjure/mesh

meow 05:09:39

Yes, I have looked at mesh and mala.

meow 05:10:33

Like I said, I'm quite interested in your work. :simple_smile:

priyatam 05:11:21

I should get something usable out next month, starting with v0.4

meow 05:12:42

I'm exploring various approaches to Reactive single page apps here: https://github.com/pkobrien/ing

meow 05:13:46

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

meow 05:15:51

You should recognize the set-stylesheet fn since I stole it from you... :wink:

meow 05:17:53

Though I think I changed the name - iirc yours was insert-stylesheet or insert-styles

priyatam 05:19:45

Do you know if there’s a way to unset a stylesheet?

meow 05:20:53

Interesting question. Not sure. Remove the element from the header and refresh the DOM somehow?

priyatam 05:21:25

I thought about it, seems slow

meow 05:22:13

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.

meow 05:25:57

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

meow 05:27:08

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.

meow 05:30:48

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.

meow 05:33:12

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.

priyatam 05:40:04

thanks for the tip, fixed!

priyatam 05:42:14

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.

meow 06:02:14

@priyatam: 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

meow 06:03:12

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.

meow 06:04:11

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?

meow 06:05:18

What's in that file now is just a mess of what I found in the wild.

priyatam 06:05:56

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.

priyatam 06:06:42

Developers in React/Postcss seem to be moving towards inline styles

meow 06:10:15

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.

meow 06:11:43

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.

meow 06:13:09

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.

priyatam 06:13:40

It’s a good start. Keep posting your updates so we can learn, together

meow 06:16:53

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.

priyatam 06:22:06

Print design has over a century of modern knowledge that we can tap into. I’m glad you’re thinking in the same lines ...

meow 06:26:53

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?

meow 06:28:02

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.

priyatam 06:28:54

I haven’t tried flexbox much, except an example using with flexboxcss - https://github.com/priyatam/thinking-grids/tree/master/flexbox

meow 06:29:02

You're much further along with all of this than I am.

priyatam 06:30:41

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.

meow 06:34:44

Well, hopefully I'll get to really dive into this tomorrow.

meow 06:36:17

re-com has a nice-looking demo that makes use of flexbox: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/

meow 06:37:11

and it uses re-frame so its a reactive app as well

priyatam 06:38:38

I’ll check it out, thanks.