DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Jouderian Nobre Junior
Jouderian Nobre Junior

Posted on

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 ๐Ÿ’ƒ.

Alt Text

Let's code

Top comments (0)

๐ŸŒ™ Dark Mode?!

Turn it on in Settings