Let’s face it: CSS is unintuitive and complicated. You may know it quite well, but do you enjoy writing it? Is it ever fun to build a UI with CSS?

For me, it’s always a chore because of the unpredictability and its unintuitive nature. I often find myself scrolling through the CSS rules for a misbehaving element in Developer Tools, trying to figure out where a particular attribute came from and why. What does height: inherit do, exactly? Off to check the documentation – again.

Then I have to figure out how to get just the right combination of attributes to finally do what I need. If I use a CSS framework, then it’s almost inevitable that I’ll end up sprinkling !important on styles to get my overrides to finally apply, which always feels like something I shouldn’t be doing.

There is so much weirdness in CSS.

Most people know about box-sizing: border-box which stops weird stuff happening with width and padding calculations. But did you know that margins of adjacent elements can collapse together instead of being added up? It only happens sometimes though, and there’s a whole bunch of complicated rules to remember!

Then there are the specificity rules. How many times did you have to fight those? And don’t forget about the CSS painting order algorithm, which is extremely complex, with rules nesting six levels deep at one point!

Not only is CSS unintuitive, it’s also sprawling.

Its features accreted seemingly ad-hoc over decades. Back in the stone age we had to do layout with tables, then CSS came along and fixed it. Then it fixed it again, with Flexbox. And then it fixed it again, with CSS Grid. Now it’s up to you to learn how all of these options work and to decide which one to use in a particular scenario.

That’s only the start though! Should you use classes or IDs? Should you come up with semantic class names? What does it even mean? Aren’t we trying to separate styling from the semantics?.. Argh!

I’m not even going to go into the differences between browsers. Did you know that Flexbox in Safari does not work quite the same as Flexbox in Firefox?

It’s hard to ever become comfortable with CSS.

What if you didn’t have to fight with CSS?

What if you could construct sophisticated, responsive cross-browser UIs in pure Elm, assisted by the compiler and using a set of building blocks which are so intuitive that most of the time you don’t even need to look at the documentation?

What if you could build UIs faster and have fun while doing it?

It’s not hypothetical! It’s exactly how I describe my experience with using the mdgriffith/elm-ui package to build UIs.

elm-ui was created by Matthew Griffith as a replacement for both HTML and CSS, which it treats as an output target. I like to describe it by analogy: elm-ui is to HTML/CSS as Elm itself is to Javascript. Just like Elm, it gives you a much better set of primitives combined with a type system and a helpful compiler.

So is this a silver bullet?

elm-ui gives you a much simpler approach to building UIs compared to HTML and CSS.

But let me be clear that elm-ui is not a panacea. As it tries to address a huge problem space, it still has rough edges and it doesn’t replace all of the capabilities of HTML/CSS.

Nonetheless, it makes UI development vastly more intuitive and fast, and is a joy to use.

Sometimes I may need to drop back to HTML and CSS (which is possible), but if I can forget about CSS 95% of the time rather than 100% of the time, I’ll still take that option gladly!

Besides, any package that takes on a huge task like this is going to have a learning curve. elm-ui still takes some getting used to and requires a change of mindset.

Luckily, I can help you with this part: I wrote this guide and created a showcase of common UI patterns built with elm-ui to make your transition from HTML/CSS as smooth as possible.

What’s in the guide?

Table of contents for the guide:

Note: On the spectrum between a manual and a technical book with an elaborate storyline, this guide is much closer to a manual. I wanted to make sure that I cover all of the aspects of elm-ui clearly and concisely, and it wasn’t feasible to combine it with a running example of an app or other plot devices.

Showcase of interactive examples

The showcase is an extended version of elm-ui-patterns. In addition to the examples in elm-ui-patterns, you get 26 additional examples:

Controls

• Tag input/selector
• Focus style
• Drag-and-drop list (annaghi/dnd-list)
• Form (hecrj/composable-form)
• Video

Elements

• Custom element (Ace editor)

Layouts

• Adjacent elements
• In front and behind elements
• Dashboard
• Nested grid
• Clip and scrollbars
• Element alignment
• Element width
• Fixed header and footer
• Floating button
• Floating button with menu
• Two scrolling columns
• Multiple layouts
• Mobile menu
• Iframe
• Markdown (dillonkearns/elm-markdown)
• Elm markup (mdgriffith/elm-markup)

Performance

• Lazy list
• Keyed list

Typography

• Font
• Paragraph

What do other people say about the guide?

Many people have found the guide to be useful, here is a sample of what readers say:

Your book organizes the functionality and helps the reader understand the big picture and groups of functionality better. The book is also a nice way to discover many of the features of elm-ui that you may not know about.

— Cliff Brake

I wanted to learn elm-ui for some time, but I am not so comfortable learning things by reading API docs at the beginning. I prefer tutorials or guides. And your book is just what I was looking for! I like the structure and the pretty fast pace. I would definitely recommend this book to anyone who wants to start playing with elm-ui and, like me, prefers a guide to API docs.

— Mickey Vashchinsky (@mickeyvip)

[I] have read the guide, and really enjoyed it. Thanks! I’d recommend it, totally. I think the main reason is it shows how easy it is to get nice web UIs quickly and simply (e.g. the Slack UI example). Especially for those, like me, who aren’t experienced in CSS (e.g. back-end devs who are using Elm for the first time).

— Yoni Gibbs

I am starting frontend for personal uses and I have systems background (C, C++) and love functional languages, so Elm was like “oh God, yes”. But then, it’s difficult to make something complex, and elm-ui appeared and was again “aha, cool”. And there’s where your book actually makes a difference as the library does not have a lot of useful doc, so starting from layouts and then cover simple elements was great.

I would recommend it definitely! As explained above, if Elm wants to take over frontend, it needs libs like elm-ui, and resources like your books. Using your book I’m actually doing some real progress instead of trying to tweak internet examples.

— Pablo Bravo

Master elm-ui with this guide

Not ready to buy yet?

Check out the sample and get on my mailing list to get Elm tips:

About the author

Hi, I’m Alex Korban. I’m an author and software consultant with an interest in functional programming, databases, and geospatial applications.

I promote Elm and run several projects to make it easier for people to learn it and use it:

• I’m the editor of Elm Weekly, a weekly Elm newsletter
• I made Elmstatic, a static site generator that allows you to make sites with Elm
• I created and maintain Elm Catalog to help people find Elm packages & tools
• I write about Elm on this site (35+ posts as of last count).

Previously, I co-founded a company to help the heavy construction industry improve safety and productivity when building highways, tunnels, and other infrastructure. We did this by collecting geospatial data via mobiles and Bluetooth beacons, and then analysing and visualising it.

I’ve also written several books about C++, and a book about working with time in PostgreSQL.

Prior to that I worked on a wide range of software, such as pre-iPhone mobile applications, a flight simulator, GPS-based vehicle fleet tracking, and automatic control software for construction machines (bulldozers, excavators, and self-driving kerb laying machines).

Q & A

Can I pay with PayPal?

Yes, you can pay either via PayPal or with a credit card. For credit card payments, I use Stripe, so your information is secure either way.

What if the guide isn’t useful to me?

I offer a 30-day money back guarantee, so there is no risk in buying.

What format is the guide in?

The guide is provided in PDF format as well as EPUB and Mobi. Note, however, that EPUB and Mobi versions are formatted for tablets and provided for convenience only. I don’t test them extensively, so formatting may be off – in particular, code samples may wrap awkwardly.

What version of elm-ui and Elm is used in the guide?

elm-ui 1.1.8 and Elm 0.19.1.

Will I get updates?

I will update the guide if I find errors, and you will get those updates free.

If a new version of elm-ui is released with major changes, it might require a new edition of the guide, which I will make available at a discount to customers who bought the previous version of the guide.