An elm-ui introduction

Once upon a time, the brave developers were used to use HTML and CSS to build their cool websites. The same idea was brought to Elm, they created a package called elm/html and this package mimics the HTML into functions. Some comparison:

HTML

<div class="fancy-div">Hello new world!</div>

Elm

div [ class "fancy-div" ] [ text "Hello new world" ]

And it works right? I mean, you can build your UI in the same mindset as you were used to do, and you can still use the old and friendly CSS to make it pretty.

There is just one problem with this comfortable plan, it's called HTML + CSS 💩. HTML is not exactly meaningful and CSS can be a mess. Of course, you can improve this using good CSS conventions and naming, but you will still have some div, span and p all over the place.

Trying to avoid that problem a nice guy called Matthew Griffith created a new way to build UIs in Elm, and that package is called elm-ui.

I could try to explain what that package does, but I will only quote the Github description :D.

What if you never had to write CSS again?

So, what I'm trying to say here is that we can do Elm and not use HTML + CSS 💃.

Let's code