Pure CSS - Neuron

Welcome to the Functional Programming Zulip Chat Archive. You can join the chat here.

NullSense

Is there a way or possibility of making the css pure css? It would be miles better, since everyone is familiar with css. Development of beautiful frontends would also be easier.

Sridhar Ratnakumar

@NullSense Are you suggesting that we rewrite neuron's Haskell-DSL for CSS in pure CSS? Or are you asking about a way to add a custom.css in neuron generated site?

NullSense

Well, for both purposes, pure css would be the way to go IMO. (for maintainability, future extensibility and wider reach)

Sridhar Ratnakumar

For the former, the answer is no. For the latter, I was thinking of supporting it like this. If you have a static/style.css file in your notes dir, then include that in every generated HTML.

Sridhar Ratnakumar

But this is all just once piece of the puzzle in the larger theming support. See this discussion: https://github.com/srid/neuron/issues/22

Allow some basic customization of the CSS (via neuron.dhall) so that not all Zettelkastens appear with teal as the primary color. Might as well normalize heading colors as part of this work.
NullSense

I see, that would be nice.

NullSense

I would love to help the project with some design stuff, try different views and that kind of thing, pure css would help with that immensely. Learning haskell just to edit css is kinda heavy.

NullSense

Is there some sort of transpiler that would be possible to use?

Sridhar Ratnakumar

Going back to plain CSS would be a degradation in development experience in many ways.

Sridhar Ratnakumar

In current development workflow, when you use the bin/run script - and when you change the clay CSS DSL thing directly, the whole site regenerates automatically. You get instant feedback on your changes. And if your CSS changes are semantically wrong , the compiler will catch it and tell you the error.

Sridhar Ratnakumar

Not to mention the ability to "compose" CSS styles, which you don't get with plain CSS format.

Sridhar Ratnakumar

You don't need to learn entirety of Haskell; just need to familiarize yourself with enough syntax so as to be able to work with Clay's DSL.

Sridhar Ratnakumar

A "css block" is usually defined like this:

"div.myClass" ? do
  marginLeft (em 0.4)
Sridhar Ratnakumar

That ? do is like indentation in Python, or {...} in C or Java.

Sridhar Ratnakumar

And instead of "0.4 em", you write em 0.4 - because Haskell is like Math. You call the function "em" with the value "0.4".

Sridhar Ratnakumar

Likewise, you call the function marginLeft with the value em 0.4. You wrap the latter in parenthesis to make it clear that the whole of it is an argument. Alternatively the dollar sign can be used: marginLeft $ em 0.4

NullSense

okay that doesn't sound too bad.