CODEWITHSUNDEEP
elm
Eric
Eric

Reputation: 1521

How can I maintain stylesheets during Elm development?

I'm new to Elm and trying to build a web app with elm-html. I'm having trouble setting up my workflow to develop and see my results quickly.

I've used elm-reactor to serve and reload my changes but that serves my app from localhost:8000/Foo.elm which doesn't include any external stylesheets. I have to use inline styles for all my components, which is discouraged by most HTML guidelines. I'd rather use CSS (or a CSS preprocessor).

I can use elm-make to build to a *.js file and include that in an index.html that I maintain, but it won't watch changes.

Is it the wrong approach to include CSS files in an Elm project, and if not, how do I maintain stylesheets outside of Elm and still serve my project locally, while watching for changes?

Upvotes: 12

Views: 2986

Answers (4)

Gark Garcia
Gark Garcia

Reputation: 460

I'm just a beginner, but I find myself using the browser CSS editor a lot.

The style editor is usually placed close to the JS console and HTML inspector, press F12 and you'll find it.

You can just create your regular elm markup without any styling and then manually import the stylesheet when testing it out in the browser. After you've finished your project, just add the stylesheet to the finished app manually (standard <link> tag).

The plus side to this is that the browser provides live preview while you're writing your CSS. The downside to it is that you'll have to work with your browser's editor, which may not be the best option out there compared to something like VS Code or Atom.

Note: I use Firefox Developer Edition, their styles editor is great. Can't comment on Chrome's.

Upvotes: -1

Brian Olpin
Brian Olpin

Reputation: 87

https://github.com/elm-community/elm-webpack-starter was my first attempt to graduate beyond elm-reactor + inline styles. It seemed kind of heavy.

I currently use elm-live (https://github.com/tomekwi/elm-live), like so:

$ cat <<——— > index.html
  <!doctype html>
  <link rel="stylesheet" href="style.css" />

  <body>
    <div></div>
    <script src="elm.js"></script>
    <script>Elm.Main.embed(document.querySelector("div"));</script>
  </body>
———
$ elm-live Main.elm --output=elm.js --open

Code is in Main.elm and styles are in style.css.

Upvotes: 3

Adam Waselnuk
Adam Waselnuk

Reputation: 970

I found a good solution for those who want quick prototyping in elm-reactor with full CSS but don't want to figure out build tooling or more sophisticated elm CSS packages. You can get started pretty fast using basic elm, elm-html, and css.

This solution uses standard Elm to generate inline styles and Html.node to create a style tag so you can apply a CSS rule to the body of the document.

-- VIEWS

view model =
  main_
    [ cssMain ]
    [
      styleTag 
    , div 
        [ cssControlPanel ]
        [
          button 
            [ cssBtn
            , cssBtnGenerate
            , onClick GenerateMap
            ]
            [ text "GENERATE MAP" ]
        ]

-- STYLES 

styleTag : Html Msg
styleTag =
  let
    styles = 
      """
        body { overflow: hidden; }
      """
  in
    node "style" [] [ text styles ]

cssMain : Attribute Msg
cssMain =
  style
    [ ("backgroundColor", "#eee")
    , ("position", "relative")
    , ("width", "100vw")
    , ("height", "100vh")
    ] 

...

Upvotes: 4

Chad Gilbert
Chad Gilbert

Reputation: 36375

You're probably better off not using elm-reactor for your main development because of those limitations. It is perfectly acceptable to use your own external CSS file and I agree, that's a much better practice than embedding styling in the output html.

I've used gulp and the gulp-elm package to set up a file watching task that compiles all Elm code (as well as SCSS files) on save, and that works wonderfully.

There is a Grunt plug-in for Elm if you're into that.

There is a webpack loader for Elm if you prefer that over gulp or grunt.

There is a young project that offers a Single Page Application generator for Yeoman which bundles together some of the live-reloading tasks. It is very opinionated on some of the decisions it makes, but it's a good reference if you want to get running quickly.

Upvotes: 6

Related Questions