elm-ui: The CSS Escape Plan

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.

CSS is unintuitive and complicated

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?

No 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.

(I will also send you updates when I publish an Elm related post.)
elm-ui: The CSS Escape Plan

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.

Sunshine and rainbows

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.

elm-ui: The CSS Escape Plan

What’s in the guide?

Table of contents for the guide:

Chapter Page
0. Introduction 1
1. Layouts 4
    - Getting started: title page layout
    - Layout functions
    - Responsive layouts
    - Debugging
    - Escape hatches
2. Page elements and controls 36
    - Links
    - Images
    - Tables
    - Buttons
    - Labels for inputs
    - Checkboxes
    - Radio buttons
    - Single line text inputs
    - Multiline text inputs
    - Sliders
    - A note on focus
    - Events
    - Accessibility
    - Third-party elements and controls
3. Typography 60
    - Text appearance
        - Font size and typeface
        - Font color, weight and styles
        - Variants
        - Other attributes
    - Text layout
        - Alignment
4. More on styling 72
    - Specifying colours
    - Temporary styling
    - Multiple layouts on one page
5. Working with various types of content [TBD] 80
    - Optimising performance using Element.Lazy and Element.Keyed
    - Building forms with hecrj/composable-form
    - Rendering Markdown with dillonkearns/elm-markdown
    - Rendering elm-markup content mdgriffith/elm-markup
    - Inserting iframes
    - Incorporating video
    - Using custom elements
    - Drag & drop for lists with annaghi/dnd-list

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 all of these examples:

Controls

  • Tag input/selector

Layouts

  • Adjacent elements
  • In front and behind elements
  • Dashboard
  • Nested grid
  • Clip and scrollbars
  • Element alignment
  • Element width
  • Equal height columns
  • Fixed header and footer
  • Floating button
  • Floating button with menu
  • Two scrolling columns

Typography

  • Font
  • Paragraph

What do other people say about the guide?

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 haven’t collected a lot of testimonials for the guide yet, but many people have found my book Practical Elm useful, and it also features elm-ui. Here are a few comments from Practical Elm readers as well:

Honestly i was aha-ing throughout the entire book, but to be specific there were two moments that stood out to me and were extremely useful; the first was elm-ui and browser package, I don’t know how to express how happy I had felt when elm-ui finally became clear to me, and your book was a great example and reference to put all the pieces together, the second was server requests and JSON, it was the reason why I bought this book in the first place, all the examples that I had found online were outdated and I couldn’t understand how they worked.

— Yousof Hafiz

Your book and blog posts have been super helpful to me as a designer learning Elm. I’ll be speaking about my experience learning to code via Elm at Elm Europe. So you were a part of making that a possibility. Thank you!

Jono Mallanyk

Read your book 2 times already. Love your book, it is the first one that talk about problems that you start to see only on big projects and how to organize your code. The two things in the book that where most valuable for me are how to organize modules and testing. Thank you very much for writing this book.

— Barak Bar Orion

I really like it, the practical approach of skipping through lots of information already present elsewhere. The chapter “beyond basic syntax” was great, I’m also very interested in using elm-ui, nice chapter also. Overall yes I would highly recommend it.

— Francisco Dibar

Master elm-ui with this guide

elm-ui: The CSS Escape Plan cover
Formats
PDF, Mobi, EPUB
Pages
79 - more to come
Money back guarantee
30 days
elm-ui version
1.1.8
Elm version
0.19.1
Interactive showcase
included
Samples in the showcase
38
Get the guide now for $19 [early access]
Escape the drudgery of CSS. Start having fun when building UIs!

Note: The guide isn’t complete yet and is in early access. You can buy it now at a lower price, and you get the first 79 pages comprising four chapters (Layouts, Page elements and controls, Typography, and More on styling). The showcase is also a work in progress – I’m still expanding it as I write the guide.

 

 

Not ready to buy yet?

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

(I will also send you updates when I publish an Elm related post.)
elm-ui: The CSS Escape Plan

About the author

Alex Korban 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.