How to Style my Elm application? (Beginner)

Learn
1

Hi everbody. I have discovered Elm just recently and wanted to pick it up as my first functional programming language ( I am a junior front end react developer).

How do I do CSS styling of my simple Elm application?

3 Likes
2

Welcome to the community! There are many ways to style your Elm application. Here’s my list in order of complexity:

There’s also numerous third-party packages available at the time but the above list is my go-to reference on the sibject.

2 Likes
3

Thank you for your reply, novid.
But I am still struggling with the styles, specifically rtfeldman/elm-css package.
I tried to import it as a module and tried to apply it to style attribute, but there was a type mismatch - it expected a String and I was giving it a Style…

https://ellie-app.com/ppq4FWh8HJNa1 - here is my project with the elm-css package installed. Can you please, give me a simple example on how to use it?

4

Have a look at examples directory of elm-css’s github repository.

5

Here’s your Ellie, but modified to use elm-css https://ellie-app.com/ppqPgDGgF4Wa1.

Also, I’d recommend switching from rtfeldmand/elm-css to dzuk-mutant/elm-css as it’s a more recent fork of rtfeldman/elm-css that’s being maintained. Richard Feldmand spoke on a podcast some months ago about it being a better alternative than his package as well.

5 Likes
6

Thank you very much wolfadex for your recommendation and your example of how to you use. I wouldn’t have asked it in the firstplace if I understood the examples given in the package, but those were not clear to me.
Thank you!

7

Of course, happy to help!

A couple of notes for differences:

You can expose multiple things from an import, so

import Html.Events exposing (onClick)
import Html.Events exposing (onInput)

can be simplified to

import Html.Events exposing (onClick, onInput)

The modules Html and Html.Styled both have a type named Html. This can be confusing if you’re using the two, which is why I used fully qualified names in the Ellie.

There’s also a button on the top middle of Ellie to run elm-format on your code, that can be super helpful.

Enjoy the coding :smile:

8

Once you get your head around elm-css (its always good to learn the basics before building on top of them), I would recommend using the tailwind css framework along with the elm-tailwind-default-modules package.

1 Like
9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.