Should I have a CSS file for my made-with-Elm web app?

[John Bugner]

When I make a web app(lication) with Elm, should I put all the styling in a CSS file? Is there a way to then tell elm to import that CSS file so I don't have to manually do it after compiling?

[Peter Damoc]

Elm does not have an official CSS approach yet. 

You can do whatever you like. 

If your styling needs are simple, use inline styles. 

If your styling needs are more complex, use a build system (webpack or gulp) 

There is also a hack described in the elm-community FAQ
http://faq.elm-community.org/#how-can-i-load-css-or-other-resources-in-elm-reactor

This hack could be OK for exploring things but it is not OK in production due to performance issues. 

If you want to generate the CSS using Elm, you can look into rtfeldman/elm-css. You can either generate the CSS file or load the resulting CSS into a head element as described here:
https://github.com/pdamoc/elm-powercss-proposal
 

On Tue, Aug 23, 2016 at 4:06 PM, John Bugner <john....@gmail.com> wrote:

When I make a web app(lication) with Elm, should I put all the styling in a CSS file? Is there a way to then tell elm to import that CSS file so I don't have to manually do it after compiling?

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Wouter In t Velt]

What works for me is:

• Separate CSS file for static styling and basic UI animations, so I only need to add class attributes in view functions.
• Layout, fonts, hover and focused states etc etc all go in css file.
• So e.g. if I want to make give a "selected" element in a list a different background-color, I use elm to apply a class of e.g. "item--selected", and use css to define the styling.
• Basic UI animations: E.g. I have a dropdown menu for which appears if a button is clicked. This is handled completely in css, using the :focus state of of the button to unhide the dropdown.
• Do transitions and more complicated animations directly in elm.
• Unfortunately, css can only handle basic animations/ transitions.
• E.g. for drag and drop, do positioning directly in elm (but I keep the styling in css)

I use webpack for development, but I have not yet found a way to "automatically" import the right css files needed.

[Rupert Smith]

On Tuesday, August 23, 2016 at 2:06:50 PM UTC+1, John Bugner wrote:

When I make a web app(lication) with Elm, should I put all the styling in a CSS file? Is there a way to then tell elm to import that CSS file so I don't have to manually do it after compiling?

Currently I set up a build with grunt that combines together Elm + other bits of javascript, html, css etc. I am using compass to generate me css from scss. I prefer this approach to emebedding the css in Elm directly, particularly as most of my css is being shared with other projects for a common look and feel.

I am a little suspicios of embedding the css inside elm as I am trying to keep content and stlying separate, but I suppose it all comes down to what you are trying to do and the scope of your particular project.

[Brian John Farrar]

I use elm-live to automatically load changes on external css files.

https://github.com/tomekwi/elm-live

[Thibaut Assus]

I think css stylesheets are useless in Elm. Inline styles are a lot better imo for reactive procramming. I plan to write a blogpost on that soon. An exemple of my ideas in a repo : https://github.com/tibastral/elm-credit-card. Look at the style part.
Have a good day !

[Rex van der Spuy]

On Friday, August 26, 2016 at 12:10:30 PM UTC-4, Thibaut Assus wrote:

I think css stylesheets are useless in Elm. Inline styles are a lot better imo for reactive procramming. I plan to write a blogpost on that soon. An exemple of my ideas in a repo : https://github.com/tibastral/elm-credit-card. Look at the style part.
Have a good day !

Thibault... I agree!!

(Well, almost... stylesheets can be the more useful option in some cases...)

But, I find that for interactive web apps (not "websites") it's more useful for me to work with self-contained components where the style and functionality is all in one place.

That way I don't have the pieces of my components spread out all in lots of disparate files that I have to go hunting around around for.

I'm using Elm for exactly what I used to use Flash for 10 years ago - in Flash you made integrated components too, and I overall think it's a much better paradigm for interactive design.

[Rupert Smith]

On Friday, August 26, 2016 at 5:10:30 PM UTC+1, Thibaut Assus wrote:

I think css stylesheets are useless in Elm. Inline styles are a lot better imo for reactive procramming. I plan to write a blogpost on that soon. An exemple of my ideas in a repo : https://github.com/tibastral/elm-credit-card. Look at the style part.
Have a good day !

So you put it all in Elm, or just the bits that you change more dynamically?

Also interested to hear what css frameworks people use, MDL, bootstrap? Do you import set that part up the index.html at least? 

[Matija Srček]

I'm also interested in best practices (performance wise) for using frameworks. Should I import external libraries in my index.html file or should I use elm packages. What's the better approach?

For example:

Should I import PureCSS im my index.html using "<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">" or should I use benthepoet/elm-purecss package. All I'm interested is to add basic styling for my web apps.